- Anima for Sketch
- Anima for Sketch
- Install Plugin
- Install Plugin
- Create a Project
- Create a Project
- Preview & Sync Project
- Preview & Sync Project
- Upgrade a Team
- Upgrade a Team
- Tutorial Files
- Tutorial Files
- Introduction
- Introduction
- Pins
- Pins
- Stacks (Flexbox)
- Stacks (Flexbox)
- Padding
- Padding
- Screen Presets
- Screen Presets
- Keyboard Shortcuts
- Keyboard Shortcuts
- Symbols
- Symbols
- Examples
- Examples
- Introduction
- Introduction
- Links
- Links
- Breakpoints
- Set Homepage
- Breakpoints
- Set Homepage
- Hover Effects
- Hover Effects
- Entrance Animation
- Entrance Animation
- Fixed Position
- Fixed Position
- Text Input & Forms
- Text Input & Forms
- Videos/GIFs/Lottie
- Videos/GIFs/Lottie
- Embed Code
- Embed Code
- Interaction & Animation
- Interaction & Animation
- Interactions Intro
- Interactions Intro
- Samples
- Samples
- Play
- Breakpoints Viewport
- Comments
- Code
- Share Prototype
- Manage Access Levels
- Publish Website
- Publish Website
- Custom Domains
- Custom Domains
- Analytics
- Analytics
- Project Settings
- Project Settings
Getting Started
Layout
Prototype
Collaborate
Prototype Link
Project Settings
Built with ❤️   in NYC & TLV
Breakpoints
Breakpoints are a way to make your design look great on Mobile, Tables or Desktops.
How To Create Breakpoints
First, design your website in multiple artboards where each of the artboards represent the same webpage but for different screen size.
To mark different screen size artboard as the same webpage:
- Select the artboard of one of the device screens, for example, Home Desktop
- Expand the Flow section of Prototype and click the Breakpoints button (marked in red below)
- Drag the yellow line to another artboard that represents the same web page but in a different device screen, for example, Table Desktop, Mobile Desktop
- Live Website: [Open]
- Sample Sketch File: [Download]
- Original Design by Zhenya & Artem
Caught a mistake or want to contribute to the documentation?
Edit this page on Github!