Responsiveness: 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.

For example, you can use Auto-layout to make elements 100% wide and extend with the browser, or in order to align them to the sides or to the center.

How to add Auto-Layout

📘

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 a group.
• 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

📘

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!

If you wish to practice Auto-layout, refer to this support article.

Preview or Sync or Publish to see Auto-layout in action.