Using Anima in Figma, you can now create fully responsive designs that can be resized and suitable for any screen size, in your web browser and generated code. There are several ways to do this: using Figma's auto layouts and Anima’s breakpoints. Depending on your needs and preferences, you can use both auto layout and breakpoints simultaneously, or you can choose to use only one.
Skip to a section
Auto Layout
Auto layout is a Figma property that you can add to your frames and components. It allows you to create dynamic frames that will automatically resize to maintain the layout structure you’ve established, according to the added content. This is particularly useful for example with cards containing icons or texts inside, as well as the layout of the cards relative to the main frame, and so on.
Anima supports Figma’s auto layouts and will convert your interfaces into responsive sites and code accordingly. 🚀
How to add Auto Layout:
💡 Tip: Before adding auto layout to individual components, be sure to add it to the main frame you're working with so that the whole frame will be responsive. |
Select a frame, component or component set.
Use the keyboard shortcut Shift A or click ‘+’ next to auto layout, in the right sidebar.
Adjust auto layout properties to your design preferences and needs.
Auto layout properties:
Layout direction - allows your layout to be structured in columns (horizontal) or rows (vertical)
Spacing - controls the spacing between your objects
Padding - determines the whitespace around your objects
Alignment - describes how the children elements are aligned within the parent frame
Resizing - lets you have a dynamic (hug) or fixed width
Distribution - determines how objects are distributed within the frame
💡 Tip: Don't forget to test out your auto layouts in Figma by shrinking and expanding your frames to make sure they work properly before you preview and sync to Anima! |
Let's Practice! (Auto layout)
The auto layout feature can be tricky to learn, follow these steps to learn how to create a responsive header:
1. Create the main container:
Select your main frame (in this case Desktop) and add auto layout. Then, make sure to set the frame to Fixed for both the Width and Height. Why? Because setting it to "Hug" will resize this frame to hug the elements contained within it, which in this case, is not what we want.
Afterwards, on the auto layout properties, set it to Top Center and keep all the padding options to 0. This frame will act as a wrapper or main container for the rest of the Auto-Layouts inside, ensuring their responsiveness. The padding will be set for the internal containers we will create later.
2. Create the Header:
Add a rectangular frame (this will act as the header), then add auto layout and set the padding to 8. (We have chosen 8 because using multiples of 8 is common practice in the design world as it helps scale designs in an easy and consistent manner to different screen sizes.) This header will contain the icons, so setting up its auto layout properties correctly will ensure that the icons are resized and distributed responsively!
3. Create the Icons
Add a square inside the header (this will act as an icon) and duplicate it to create as many icons as you wish. If you have already set up the auto layout properly, this header will be fully responsive and good to go!
Extra Tip: Be sure to test all your frames' responsiveness by scaling them vertically and horizontally in Figma before syncing to Anima!
Breakpoints
Breakpoints are used when the actual layout of your site changes between screen sizes (e.g. a different UI element is used in your site's mobile vs. desktop displays).
First, design your screen in multiple frames where each of the frames represents the same webpage but for different screen sizes.
💡 Tip: Check out this article to learn more about exporting breakpoints into code. |
How To Create Breakpoints in Figma:
Click Responsiveness & Breakpoints in the Anima plugin
Click '+' and select all the frames that you want to connect with breakpoints, for example, Home Desktop, Home Tablet, Home Mobile
Check to make sure the selected frames are listed inside the Anima plugin
Click Save to apply the Breakpoints
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:
Get involved in our Anima Community Forum! 😎
New to Anima?
Learn More