Breakpoints are a way to make your design look great on Mobile, Tablet, or Desktops.

This guide will explain how to set up breakpoints using the Anima plugin within Figma, Adobe XD and Sketch.

First, design your screen in multiple artboards where each of the artboards represents the same webpage but for different screen size (for example, desktop, tablet and mobile).

[Check out this article to learn more about exporting breakpoints into code.]

How To Create Breakpoints in Adobe XD and Figma:

  1. Click Breakpoints under the Responsive tab

  2. Click '+' and select all the artboards that you want to connect with breakpoints, for example, Home Desktop, Home Tablet, Home Mobile

  3. Check to make sure the selected artboards are listed inside the Anima plugin

  4. Click Save to apply the Breakpoints

  5. Don't forget to Preview and Sync your project to Anima, in order to see the breakpoints in effect!

Full Tutorial for creating breakpoints in Figma:

Full Tutorial for creating breakpoints in Adobe XD:

How To Create Breakpoints in Sketch:

  1. Select the artboard of one of the device screens, for example, Home Desktop

  2. Under the Prototype tab of the Anima plugin, click 'Flow' then click the '+' next to 'Breakpoints'

  3. 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

Full Tutorial for creating breakpoints in Sketch:

Get involved in our Anima Community Forum!

New to Anima?

Learn More

Did this answer your question?