Anima

Anima is able to export responsive interactions and breakpoints of a given frame/artboard into one HTML file (both absolute position and auto flex).

Make sure you properly <a href="https://support.animaapp.com/en/articles/6431384-create-responsive-designs-in-figma">add Auto-Layout</a>, <a href="https://support.animaapp.com/en/articles/2324156-how-to-use-pins">set constraints</a>, and or <a href="https://support.animaapp.com/en/articles/2630156-how-to-add-breakpoints">add breakpoints</a> into your Figma, Adobe XD or Sketch file.

<a href="https://app.intercom.com/a/apps/id43h9l8/articles/articles/2627030/show" target="_blank" rel="nofollow noopener noreferrer">Export code</a> from design platform using the Anima plugin or from the Anima WebApp once you've <a href="https://support.animaapp.com/en/articles/4277384-how-to-sync-a-draft">synced</a> your project.

Open the Zip file from your downloads. Find the correct HTML file and open it in your browser, when you adjust the size, the display should be responsive!

1. Make sure you properly <a href="https://support.animaapp.com/en/articles/6431384-create-responsive-designs-in-figma">add Auto-Layout</a>, <a href="https://support.animaapp.com/en/articles/2324156-how-to-use-pins">set constraints</a>, and or <a href="https://support.animaapp.com/en/articles/2630156-how-to-add-breakpoints">add breakpoints</a> into your Figma, Adobe XD or Sketch file.
 
 
 
2. <a href="https://app.intercom.com/a/apps/id43h9l8/articles/articles/2627030/show" target="_blank" rel="nofollow noopener noreferrer">Export code</a> from design platform using the Anima plugin or from the Anima WebApp once you've <a href="https://support.animaapp.com/en/articles/4277384-how-to-sync-a-draft">synced</a> your project.
 
 
 
3. Open the Zip file from your downloads. Find the correct HTML file and open it in your browser, when you adjust the size, the display should be responsive!

When exporting into HTML, various breakpoints of 1 screen will be exported inside 1 file, under the shortest name of the existing artboard/frame, as defined in your design. Other artboards/frames will appear separately within your Zip file.

- When exporting into HTML, various breakpoints of 1 screen will be exported inside 1 file, under the shortest name of the existing artboard/frame, as defined in your design. Other artboards/frames will appear separately within your Zip file.

<a href="https://support.animaapp.com/en/articles/2630156-how-to-add-breakpoints">Check out this article</a> to learn more about setting up responsive breakpoints with Anima.

___________________________________________________________

<a href="https://support.animaapp.com/en/articles/2627097-anima-for-sketch-how-to-create-a-high-fidelity-prototype">Creating a High-Fidelity Prototyping in Sketch</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/2641923-how-to-handoff-design-specs-to-developers">How to Handoff Design Specs to Developers</a>

<a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-export-sketch-to-html">How to Export Sketch to HTML</a>

<a href="https://support.animaapp.com/en/articles/2644596-team-collaboration">Team Collaboration</a>

- <a href="https://support.animaapp.com/en/articles/2627097-anima-for-sketch-how-to-create-a-high-fidelity-prototype">Creating a High-Fidelity Prototyping in Sketch</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/2641923-how-to-handoff-design-specs-to-developers">How to Handoff Design Specs to Developers</a>
- <a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-export-sketch-to-html">How to Export Sketch to HTML</a>
- <a href="https://support.animaapp.com/en/articles/2644596-team-collaboration">Team Collaboration</a>

Learn More