Anima

Breakpoints are a great way to make your design look great on desktop, tablet or mobile devices. This guide will explain how to set up breakpoints using the Anima plugin within <a href="#h_5c9e476a0e">Figma</a>, <a href="#h_5c9e476a0e">Adobe XD</a> and <a href="#h_d88f774f1a">Sketch</a>.

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

[<a href="https://support.animaapp.com/en/articles/5619491-how-can-i-export-responsive-design-into-one-html-file">Check out this article</a> to learn more about exporting breakpoints into HTML code.]

___________________________________________________________

How To Create Breakpoints in Adobe XD and Figma:

Click Breakpoints under the Responsive tab

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

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

Click Save to apply the Breakpoints

Don't forget to Preview and <a href="https://support.animaapp.com/en/articles/6189254-how-to-sync-figma-design-to-anima">Sync</a> your project to Anima, in order to see the breakpoints in effect!

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 <a href="https://support.animaapp.com/en/articles/6189254-how-to-sync-figma-design-to-anima">Sync</a> your project to Anima, in order to see the breakpoints in effect!

Adobe XD Sample File: <a href="https://docs.animaapp.com/v3/adobe-xd/getting-started/sample.html" rel="nofollow noopener noreferrer" target="_blank">Download</a>

Figma Sample File: <a href="https://docs.animaapp.com/v3/figma/getting-started/sample.html" rel="nofollow noopener noreferrer" target="_blank">Download</a>

- Adobe XD Sample File: <a href="https://docs.animaapp.com/v3/adobe-xd/getting-started/sample.html" rel="nofollow noopener noreferrer" target="_blank">Download</a>
- Figma Sample File: <a href="https://docs.animaapp.com/v3/figma/getting-started/sample.html" rel="nofollow noopener noreferrer" target="_blank">Download</a>

Full Tutorial for creating breakpoints in Figma:

Full Tutorial for creating breakpoints in Adobe XD:

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

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

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

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:

Live Website: <a href="https://launchpad.animaapp.com/SurfaceSample/home" rel="nofollow noopener noreferrer" target="_blank">[Open]</a>

Sample Sketch File: <a href="https://docs.animaapp.com/v3/sketch/getting-started/tutorials.html" rel="nofollow noopener noreferrer" target="_blank">[Download]</a>

Original Design by Zhenya &amp; Artem: <a href="https://dribbble.com/shots/2409031-Free-Sport-landing-page-PSD-Sketch" rel="nofollow noopener noreferrer" target="_blank">[Open]</a>

- Live Website: <a href="https://launchpad.animaapp.com/SurfaceSample/home" rel="nofollow noopener noreferrer" target="_blank">[Open]</a>
- Sample Sketch File: <a href="https://docs.animaapp.com/v3/sketch/getting-started/tutorials.html" rel="nofollow noopener noreferrer" target="_blank">[Download]</a>
- Original Design by Zhenya &amp; Artem: <a href="https://dribbble.com/shots/2409031-Free-Sport-landing-page-PSD-Sketch" rel="nofollow noopener noreferrer" target="_blank">[Open]</a>

Get involved in our <a href="https://forum.animaapp.com/" rel="nofollow noopener noreferrer" target="_blank">Anima Community Forum</a>!

<a href="https://projects.animaapp.com/signup" rel="nofollow noopener noreferrer" target="_blank">Create an account for free!</a>

Learn more about using Anima with <a href="https://www.animaapp.com/figma" rel="nofollow noopener noreferrer" target="_blank">Figma</a>, <a href="https://www.animaapp.com/xd" rel="nofollow noopener noreferrer" target="_blank">XD</a> and <a href="https://www.animaapp.com/sketch" rel="nofollow noopener noreferrer" target="_blank">Sketch</a>

<a href="https://support.animaapp.com/en/articles/2350134-how-to-download-the-anima-plugin-for-sketch-adobe-xd-or-figma">How to Download the Anima Plugin</a>

- <a href="https://projects.animaapp.com/signup" rel="nofollow noopener noreferrer" target="_blank">Create an account for free!</a>
- Learn more about using Anima with <a href="https://www.animaapp.com/figma" rel="nofollow noopener noreferrer" target="_blank">Figma</a>, <a href="https://www.animaapp.com/xd" rel="nofollow noopener noreferrer" target="_blank">XD</a> and <a href="https://www.animaapp.com/sketch" rel="nofollow noopener noreferrer" target="_blank">Sketch</a>
- <a href="https://support.animaapp.com/en/articles/2350134-how-to-download-the-anima-plugin-for-sketch-adobe-xd-or-figma">How to Download the Anima Plugin</a>

<a href="https://support.animaapp.com/en/articles/2621070-how-to-embed-videos-gifs-and-lottie-files">How to Embed Videos, GIFs, and Lottie files</a>

<a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima">How to Publish a Website and Host it With Anima</a>

- <a href="https://support.animaapp.com/en/articles/2621070-how-to-embed-videos-gifs-and-lottie-files">How to Embed Videos, GIFs, and Lottie files</a>
- <a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima">How to Publish a Website and Host it With Anima</a>

Breakpoints

How To Create Breakpoints in Adobe XD and Figma:

How To Create Breakpoints in Sketch:

Get involved in our Anima Community Forum!

New to Anima?

Learn More