Anima

Read how you can utilize the full potential of Figma's native auto layout feature throughout your design in order to generate fully responsive, Flex code with the help of Anima!

___________________________________________________________

<a href="#h_0ee4615eb8">Adding Auto Layout to Your Components</a>

<a href="#h_166d0e1d10">Exporting Your Fully Responsive Flex Code </a>

- <a href="#h_0ee4615eb8">Adding Auto Layout to Your Components</a>
- <a href="#h_166d0e1d10">Exporting Your Fully Responsive Flex Code </a>
   

Open Figma and create / edit a component.

Select the entire component. Then add auto layout, in the right sidebar.

Fine-tune layout, padding and spacing as needed.

Test it by resizing the component or container in Figma. 

1. Open Figma and create / edit a component.
    
2. Select the entire component. Then add auto layout, in the right sidebar.
    
3. Fine-tune layout, padding and spacing as needed.
    
4. Test it by resizing the component or container in Figma. 
    
5. Your component is now responsive!<br>

Exporting Your Fully Responsive Flex Code 

Once auto layout has been added and your components are functioning responsively inside Figma, it’s time to export them into code!

And watch its responsive, flex behavior: 

As you can see, Anima will generate clean, maintainable, responsive code for your components or screens in a matter of seconds. Export the code as a local file and use it as you please!

<br>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/8136746-create-and-export-reusable-figma-components">Create and Export Reusable Figma Components</a>

<a href="https://support.animaapp.com/en/articles/6445795-best-figma-practices-for-optimal-code-generation">Best Figma Practices for Optimal Code</a>

- <a href="https://support.animaapp.com/en/articles/8136746-create-and-export-reusable-figma-components">Create and Export Reusable Figma Components</a>
- <a href="https://support.animaapp.com/en/articles/6445795-best-figma-practices-for-optimal-code-generation">Best Figma Practices for Optimal Code</a>

Skip to a Section:

Adding Auto Layout to Your Components

Exporting Your Fully Responsive Flex Code

Get involved in our Anima Community Forum! 😎

New to Anima?

Learn More