DEV Community

nireadaddy
nireadaddy

Posted on • Originally published at nuttadech.com

Auto Layout + Shared Components: Building a Figma Design System That Actually Scales

#figma #designsystem #autolayout #tutorial

Why Auto Layout Matters

If you're still designing in Figma by manually dragging elements into position — you're working like it's 2020.

Auto Layout basics — padding, spacing, and alignment

Auto Layout is a Figma feature that makes elements inside a frame arrange themselves automatically — like CSS Flexbox, but in Figma. No code required.

Why it matters:

  • Resize without breaking — change the width and everything adjusts automatically
  • Add or remove content freely — add another item to a list without manually nudging everything
  • Consistent spacing — padding and gaps are fixed values that never drift
  • Developers understand it instantly — because Auto Layout works just like the Flexbox they already use

Auto Layout 101: Starting from Zero

Horizontal vs Vertical Layout

There are only 2 directions:

  • Horizontal (→) — elements line up side by side, like flex-direction: row
  • Vertical (↓) — elements stack top to bottom, like flex-direction: column

Padding = "Edge Spacing"

Padding is the space between the frame's edge and its inner content.

  • Set equally on all sides: padding: 16
  • Set individually: top: 24, right: 16, bottom: 24, left: 16

Gap = "Space Between Items"

Gap is the distance between each element inside the frame.

  • Common values: 8, 12, 16, 24
  • Always use values from your design system's spacing scale

Alignment

Controls how items position themselves within the frame:

  • Top-left, Center, Bottom-right, etc.
  • Space between — distribute evenly (like justify-content: space-between)

Nested Auto Layout: Building Complex UI from Small Pieces

Nested Auto Layout — building complex components from small layers

The real power of Auto Layout is nesting multiple layers — like LEGO blocks.

Example: Building a Product Card

Layer 1 — Text Group (Vertical)

[Title]        ← text, bold
[Description]  ← text, regular
Gap: 4px
Enter fullscreen mode Exit fullscreen mode

Layer 2 — Content Row (Horizontal)

[Image] [Text Group]
Gap: 12px
Alignment: center
Enter fullscreen mode Exit fullscreen mode

Layer 3 — Card Body (Vertical)

[Content Row]
[Price + CTA Button]
Gap: 16px
Padding: 16px
Enter fullscreen mode Exit fullscreen mode

Layer 4 — Full Card (Vertical)

[Hero Image]    ← fill width
[Card Body]
Gap: 0
Border radius: 12px
Enter fullscreen mode Exit fullscreen mode

Every layer is an Auto Layout frame that resizes independently — add 2 more lines of description and the card grows automatically. Shrink the width and everything reflows.

Key Principles

  • Build inside-out — create the smallest pieces first, then combine them
  • Every layer must be Auto Layout — any non-Auto Layout layer is where things break on resize
  • Name your layers clearly — Card/Body, Card/Content-Row, Card/Text-Group — not Frame 47

Shared Components: The Heart of Multi-Project Design

Shared Component Library across multiple projects

Auto Layout makes components flexible. But if every project creates its own components, they'll diverge over time until nothing matches.

How to Set Up a Shared Library

Step 1: Create a Separate Figma File for the Library

Don't put components inside project files — create a dedicated file that serves as your "Single Source of Truth."

📁 Design System Library (Figma file)
├── 🎨 Colors & Tokens
├── 📝 Typography
├── 🔲 Icons
├── 🧩 Components
│   ├── Button
│   ├── Input
│   ├── Card
│   ├── Modal
│   ├── Navigation
│   └── ...
└── 📐 Layout Patterns
Enter fullscreen mode Exit fullscreen mode

Step 2: Publish as a Team Library

In Figma, go to the Assets panel → Publish library. Every project in your team will see this library and can drag components in.

Step 3: Enable the Same Library in Every Project

Project A (Web App)       → Enable "Design System Library"
Project B (Admin Panel)   → Enable "Design System Library"
Project C (Mobile App)    → Enable "Design System Library"
Enter fullscreen mode Exit fullscreen mode

When you update a component in the Library, every project gets a notification to update — consistency on autopilot.

Component Variants: One Component to Rule Them All

Component Variants — managing every state and size in one place

A good component covers every use case — you shouldn't need to create a new component every time.

Example: Button Component

Using Figma's Component Properties:

Variant Properties:

  • Type: Primary / Secondary / Ghost / Danger
  • Size: Small (32px) / Medium (40px) / Large (48px)
  • State: Default / Hover / Pressed / Disabled

Boolean Properties:

  • Show Icon: true / false
  • Show Badge: true / false

Instance Swap Properties:

  • Icon: swap in any icon for context

Text Properties:

  • Label: change text directly on the instance

The Result

From 1 component, you get buttons for every scenario:

  • Primary Large with icon → main CTA button
  • Secondary Small without icon → action button in a table
  • Ghost Medium → cancel button in a modal
  • Danger Medium → delete button

No new components. No detaching instances. No style overrides.

Auto Layout + Components = Responsive Design

Auto Layout makes components responsive automatically

When components use Auto Layout correctly, they become naturally responsive.

Resizing Behavior

Controls how an element resizes when its parent changes size:

  • Fixed — stays the same size regardless of parent
  • Fill — expands to fill remaining space (like flex: 1)
  • Hug — shrinks to fit its content (like width: fit-content)

Example: A Responsive Card 

Card (Vertical Auto Layout, Fill width)
├── Image (Fill width, Fixed height: 200px)
├── Body (Vertical Auto Layout, Hug height)
│   ├── Title (Fill width, Hug height)
│   ├── Description (Fill width, Hug height)
│   └── Actions (Horizontal Auto Layout, Fill width)
│       ├── Price (Hug width)
│       └── Button (Hug width)
Enter fullscreen mode Exit fullscreen mode
  • Desktop (360px wide): Card displays normally, text and button sit side by side
  • Mobile (280px wide): Narrower, text wraps, button stays next to price
  • List view (600px wide): Wider, content spreads out elegantly

No need to design 3 separate breakpoints — Auto Layout handles it.

Best Practices for Multi-Project Design Systems

1. Establish Clear Naming Conventions

Use / to create hierarchy in the Assets panel:

Button/Primary/Large
Button/Primary/Medium
Button/Secondary/Large
Card/Product/Horizontal
Card/Product/Vertical
Input/Text/Default
Input/Text/Error
Enter fullscreen mode Exit fullscreen mode

Every project sees components organized cleanly — no hunting through long lists.

2. Use Design Tokens

Don't hardcode color and spacing values — use Figma Variables:

  • Colors: primary/500, neutral/100, danger/600
  • Spacing: space/4, space/8, space/16, space/24
  • Border Radius: radius/sm, radius/md, radius/lg

When you need to rebrand or change themes, just update the token values — every component in every project updates instantly.

3. Document Components in Figma

Every component should have:

  • Description — when to use it
  • Usage guidelines — dos and don'ts
  • Link to code — if using Code Connect, link to the codebase component

4. Version Control

  • Use Branches in Figma when making major component updates
  • Review before merging, just like a code PR
  • Changelog — record what changed in each version

5. Create Template Pages

Beyond components, create page templates assembled from shared components:

📄 Templates
├── Dashboard Layout
├── Settings Page
├── Form Page
├── List/Table Page
└── Empty State
Enter fullscreen mode Exit fullscreen mode

When starting a new project, just duplicate a template and customize — no starting from scratch.

Lessons from Managing a Design System Across Multiple Projects

What Works Well

  • 40–50% less design time — no rebuilding components from scratch
  • Automatic consistency — every project uses the same components
  • Faster onboarding — Juniors start producing immediately with ready-made components
  • Easier handoff — developers inspect one component and use it everywhere

Watch Out For

  • Don't over-engineer — start with frequently-used components (Button, Input, Card), don't try to build everything upfront
  • Maintain regularly — a library that doesn't get updated is a library nobody uses
  • Listen to team feedback — if people keep detaching instances, your components aren't flexible enough
  • Don't force adoption — let people see the benefits themselves rather than making it feel like a burden

Wrap Up

Auto Layout + Shared Components isn't "nice to have" — it's the foundation that lets design teams actually scale.

Start simple:

  1. Convert your most-used components to Auto Layout
  2. Create a separate Library file
  3. Publish it as a Team Library
  4. Enable the same library in every project
  5. Gradually add components by priority

It doesn't have to be perfect on day one — just start today.

Originally published at nuttadech.com. Follow me for more UX design insights.

Top comments (0)