How to Add Breakpoints to Your Sketch Prototype
Prototyping with Anima Tip #2 out of 6
Tip #2 of 6 of the Anima prototype series:
Interactions| Breakpoints | External links |Overlays|Background videos|
If you haven’t already, get the Anima plugin for Sketch, Adobe XD, or Figma.
What are Breakpoints?
Breakpoints are a way to make your design look great on every screen size — Mobile, Tablets, or Desktops. Breakpoints are the point in which your prototypes adapt to viewports of all screen sizes.
And in simple words: connecting two artboards with breakpoints, means they are the same screen — but for different screen sizes.
Why do you need breakpoints?
When you send your prototype to customers, investors, or any other stakeholders, you don’t know in which device they will open it. By using breakpoints, you offer a tailored experience for any device.
With Anima’s Breakpoints and Pins, you can create responsive prototypes without leaving Sketch.
How to Add Breakpoints:
Select one of the artboards, and click Prototype tab > Flow > Breakpoints> mark the 2nd artboard (just like links).
How does it work?
Design for the smallest size for each breakpoint. Let’s say for example — 320px for mobile, and 1024px for desktop. That means, for screen size between 320–1023px, you’ll see the mobile design, and for screens over 1024px, you’ll see the desktop design.
You can create and connect as many breakpoints as you like.
Preview in Browser
Preview is the best way to view and test your prototype on your browser while designing. Shrink and expand the browser window to see the breakpoints in action. Or, simply open the link on your mobile device.
Create a Fully Responsive Experience
To complete the experience, and to control the design in between the breakpoints, use Pins (constraints) and Breakpoints together.
← Previous tip (Interactions) | Next tip (External links) →
What is Anima?
Anima allows designers to create high-fidelity prototypes right inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.
Join the discussion or show off your designs on Facebook, Twitter, Slack, Instagram. Or, vote for new features at UserVoice.
Stay creative!
❤️ Anima team
