By following this guide you will have a fully structured Auto Layout system in Figma that produces responsive components ready for developer handoff. The process takes roughly three hours from setup to final documentation, and the result works with Figma Variables and design tokens as of Figma's 2026 feature set.

What You'll Build

  • A base Auto Layout frame library with consistent spacing tokens applied at every level
  • Reusable responsive components that reflow correctly at mobile, tablet, and desktop breakpoints
  • A set of nested Auto Layout patterns covering cards, navigation bars, and form rows
  • A handoff-ready component set with Min/Max width constraints that mirror CSS Flexbox behaviour
  • A single source-of-truth spacing scale linked to Figma Variables so updates propagate automatically

Prerequisites

  • Figma Professional or Organisation plan (Auto Layout with Min/Max width requires this tier as of 2026)
  • Basic familiarity with Figma frames and components
  • A spacing scale defined or borrowed from an existing design system (e.g. 4px base grid)
  • Figma Variables enabled in your team file (available from Figma's 2024 release onward)

Step 1: Define Your Spacing Scale as Figma Variables

Every reliable Auto Layout system starts with a single source of truth for spacing. Without this, you end up with hard-coded values that break the moment a brand updates its grid.

Open your team library file and navigate to the Local Variables panel via the toolbar. Create a new collection called Spacing.

Add the following number variables using a 4px base:

space-1   = 4
space-2   = 8
space-3   = 12
space-4   = 16
space-5   = 24
space-6   = 32
space-7   = 48
space-8   = 64
space-9   = 96

Name each variable with a prefix so it is easy to filter: spacing/1, spacing/2, and so on. Figma uses the slash as a grouping character in its dropdown pickers.

Publish the library. Any component that binds to these variables will update across every file when you change a value here.

What if I already have a token file from a developer handoff?

Import your existing JSON tokens using the Tokens Studio plugin (formerly Figma Tokens). Map the token values to Figma Variables using the plugin's sync feature. This keeps your Figma file and codebase in sync without manual re-entry.

Step 2: Set Up Your Base Frame Archetypes

Before building individual components, create a set of reusable layout archetypes. Think of these as the structural bones that every component inherits from.

Create a new page in your file called _Layout System. Build the following three frames:

Archetype A: Horizontal Stack

Draw a frame and apply Auto Layout. Set direction to Horizontal. Set gap to spacing/4 (16px). Set horizontal padding to spacing/4 and vertical padding to spacing/3 (12px). Set alignment to Left and Centre. Set Width to Fill Container.

Archetype B: Vertical Stack

Duplicate Archetype A. Change direction to Vertical. Set gap to spacing/4. Set padding to spacing/5 (24px) on all sides. Set Width to Fill Container.

Archetype C: Wrap Grid

Duplicate Archetype A. Enable Wrap in the Auto Layout panel. Set gap to spacing/4 horizontally and spacing/4 vertically. Set Min Width on child items to 280px. This is the pattern that mimics CSS flex-wrap for card grids.

Do not publish these as components yet. They are reference frames for building real components in Step 3.

Step 3: Build Your First Responsive Component (Card)

A card is the highest-frequency component in most product UIs. It is also where Auto Layout constraints fail most visibly when built incorrectly.

Create a new component (Cmd/Ctrl + Alt + K) called Card/Base. Apply Vertical Auto Layout. Set the following properties:

Direction:          Vertical
Padding (all):      spacing/5 (24px)
Gap:                spacing/4 (16px)
Width:              Fill Container
Min Width:          280
Max Width:          600
Corner Radius:      8

Inside the card, add three child frames using the Horizontal Stack archetype: an image placeholder, a text group, and a button row.

Set the image placeholder to a fixed height (200px) and Width set to Fill Container. Set the text group to Vertical Auto Layout with gap spacing/2 (8px). Set the button row to Horizontal Auto Layout with gap spacing/3 (12px) and Space Between alignment.

Why does Min/Max width matter for developer handoff?

Min Width and Max Width in Figma map directly to min-width and max-width in CSS. When developers inspect the component in Figma's Dev Mode, these values appear explicitly. This removes the guesswork that causes 80% of layout bugs during handoff, according to common feedback from frontend teams working with Figma files in 2025 and 2026.

Step 4: Create Component Variants for Each Breakpoint State

Figma does not have true responsive preview, but you can model breakpoint behaviour using Variants. This gives developers a clear visual reference for how a component should reflow.

Select your Card/Base component. Click Add Variant in the right panel. Create three variants:

Breakpoint = Mobile    (Width: 335px)
Breakpoint = Tablet    (Width: 600px)
Breakpoint = Desktop   (Width: 800px)

On the Mobile variant, change the image placeholder to a shorter fixed height (120px). Change the button row alignment from Space Between to Stack (Vertical). This models the column-to-row reflow that happens in CSS media queries.

On the Desktop variant, switch the card's top-level direction from Vertical to Horizontal. Move the image placeholder to the left and fix its width to 240px. The text group and button row sit to the right in a Vertical Stack.

This three-variant pattern reduces back-and-forth between design and development by giving engineers a complete picture of expected layout changes at each breakpoint.

Step 5: Apply the Same System to Navigation and Form Components

Once the Card works, the same principles apply to your remaining high-priority components. Work through them in this order:

Use a Horizontal Stack archetype. Set Space Between alignment. Set the logo frame to a fixed width. Set the nav links group to Fill Container. Add a Mobile variant where the nav links group is hidden and a hamburger icon frame is shown. Use Figma's Boolean component property to toggle the hamburger icon rather than duplicating the component.

Form Row

Use a Vertical Stack archetype. Each field consists of a label text layer and an input frame below it. Set the input frame to Width: Fill Container with a fixed height of 44px (this matches the minimum touch target size recommended by WCAG 2.2). Add an error state variant with a visible error message text layer below the input.

At Lenka Studio, we follow this pattern for every client project because it directly reduces the number of revisions during the engineering phase and keeps handoff documentation clean.

Step 6: Document Your System with Annotations

A system nobody understands does not get used. Add a documentation page called _Auto Layout Guide to your file.

For each component archetype, place a copy of the component on the canvas. Use Figma's Annotation tool (available from the toolbar as of Figma's 2025 update) to label:

  • Which spacing variable controls each gap
  • Which properties are exposed as component properties for developers
  • Which breakpoint variant to reference at each screen size

Export this page as a PDF and include a link in your handoff note. Teams using this approach report significantly fewer Slack questions about spacing intent after handoff.

When should you skip the annotation step?

Skip it only if your engineering team is already using Figma Dev Mode with the Variables panel open. Dev Mode surfaces variable bindings automatically, which covers most of what annotations would explain. If your team is on a Figma Starter plan without Dev Mode, annotations are non-negotiable.

Step 7: Publish and Maintain the Library

Go to Assets and click Publish Changes. Write a clear changelog note, for example: "Added Card, Nav, and Form Row components with responsive variants and spacing variable bindings."

Set a maintenance schedule. Revisit the library every time a brand change is approved or a new component type is needed. Because all spacing is bound to Variables, updating a single token value cascades automatically to every published component. You do not need to manually update each component one by one.

If your team also manages a marketing social presence, keeping your visual system consistent across products and campaigns matters. The free Lenka Studio social media toolkit includes a content calendar template that works well alongside a structured Figma design system, especially when design tokens need to stay consistent across digital and social formats.

Frequently Asked Questions

Does this Auto Layout system work with Figma's Dev Mode in 2026?

Yes. Dev Mode reads Auto Layout properties, Min/Max width values, and Variable bindings directly. Developers see gap and padding values labelled with the variable name, not just the pixel value, which makes it far easier to apply tokens in code.

How is this different from just using Constraints?

Figma Constraints (Pin left, Scale, etc.) control how a frame behaves when its parent is resized manually. Auto Layout controls how a frame responds to its content and to its siblings. Auto Layout is the right choice for components. Constraints are better for full-page layout frames.

What if my components break when I nest Auto Layout frames?

The most common cause is a child frame set to Fixed width inside a parent set to Fill Container. Check every nested frame and confirm its width is set to Fill Container unless you explicitly need a fixed size. Fixed-inside-fill is the leading cause of Auto Layout overflow bugs.

Can I use this system with Tailwind CSS during developer handoff?

Yes. Map your spacing variables to Tailwind's spacing scale in your tailwind.config.js file. For example, spacing/4 at 16px maps to Tailwind's p-4 and gap-4 classes. When engineers inspect components in Dev Mode, they can translate the variable name directly to the Tailwind class without guessing.

How many breakpoint variants should each component have?

Three is the standard minimum: Mobile (320 to 375px), Tablet (768px), and Desktop (1280px). Add a Wide variant at 1440px only if your product supports wide-screen layouts. More than four breakpoint variants per component creates maintenance overhead that outweighs the benefit for most SMB projects.

Next Steps

With your Auto Layout system published, the next useful step is connecting your Figma Variables to a code-side token pipeline. This ensures that when a spacing value changes in Figma, the update can be pulled directly into your CSS or Tailwind config without manual work.

If you are building a larger design system, run a component audit every quarter to catch drift between what is in Figma and what is in production. Small gaps compound fast on active products.

If you need a second set of eyes on your system before it goes to engineering, the team at Lenka Studio reviews Figma libraries and handoff setups regularly for clients across Australia, Singapore, Canada, and the US. Reach out and we can take a look at what you have built.