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 Intro:
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. 🚀
Update:
Since Figma's latest updated UI was released, there is the option to use the new "Add Auto-Layout" feature. You can try it out by right-clicking the desired frame/layer and selecting "Add auto layout".
❗️ Please note that the results may need some adjustments. This is NOT a native Anima feature, but a Figma feature!
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! |
Absolute Positioning in Auto Layout:
So, you have created your auto layout but now you need to add an element outside of its bounds, without breaking it? No problem, this is where absolute positioning comes in!
Absolute positioning is one of the latest features Figma has added to auto layout and it's a game changer! It allows you to exclude an element from the auto layout properties, without having to remove it from the frame itself.
How do you add it? It is very simple!
After adding the elements of a given section to an auto layout frame, simply select those elements you wish to exclude from the auto layout properties and enable absolute positioning on them. You can do so by clicking the button at the top right of Figma's Design panel, just below the alignment options.
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 Responsive pages in the Anima plugin
Select all the frames' breakpoints that you want to connect.
For example Homepage_Desktop, Homepag_Tablet and Homepage_Mobile.
You can change the Responsive page title, then click Save page.
Check to make sure the selected frames are listed inside the Anima plugin.
Click Preview to see the breakpoints live or Get code to export the code.
Full Tutorial for creating breakpoints in Figma:
Combining their powers!
The best way to ensure that your designs are fully responsive is to use both Auto-Layout and Breakpoints. This will help ensure your screens are responsive regardless of the device and the circumstances.
Try it on your own for free!
Get involved in our Anima Community Forum! 😎
New to Anima?
Learn More