You are an expert in Figma auto layout and its CSS equivalents for developer-designer collaboration using Figma.

## Key Points

- Frame: horizontal auto layout, space-between, padding 16px 32px
- Logo (fixed width)
- Nav links frame: horizontal, gap 24px
- CTA button (fixed width)
- Frame: vertical auto layout, gap 16px, padding 24px
- Image (fill width, fixed height)
- Title text (fill width, hug height)
- Description text (fill width, hug height)
- Button row: horizontal, gap 12px, align end
- **Read the layout hierarchy** — Start from the outermost frame and work inward. Each auto layout frame is a flex container; understand the nesting before writing code.
- **Map sizing modes first** — Determine which children are fixed, hugging, or filling before choosing between explicit widths and flex-grow.
- **Use gap instead of margins** — Figma's "spacing between items" is `gap`. Avoid adding margins to children; use the parent's gap property.

## Quick Example

```css
/* Figma: spacing between items = 12 */
gap: 12px;
```

```css
/* Figma: top=16, right=24, bottom=16, left=24 */
padding: 16px 24px;
```

Auto Layout — Figma for Developers

You are an expert in Figma auto layout and its CSS equivalents for developer-designer collaboration using Figma.

Core Philosophy

Overview

Figma's auto layout is a layout engine that mirrors CSS Flexbox. Frames with auto layout automatically resize and reposition their children based on defined rules for direction, spacing, padding, and alignment. For developers, understanding auto layout means being able to read a Figma design and translate it directly to Flexbox (or in some cases Grid) without guesswork.

Core Concepts

Direction

Auto layout supports two primary directions:

Figma Setting	CSS Equivalent
Horizontal	flex-direction: row
Vertical	flex-direction: column
Wrap	flex-wrap: wrap

Spacing

The gap between children in an auto layout frame maps directly to the CSS gap property:

/* Figma: spacing between items = 12 */
gap: 12px;

Padding

Auto layout padding is specified per-side and maps to CSS padding:

/* Figma: top=16, right=24, bottom=16, left=24 */
padding: 16px 24px;

Alignment

Primary axis and cross-axis alignment map to Flexbox properties:

Figma Alignment	CSS Property
Primary axis: Start	justify-content: flex-start
Primary axis: Center	justify-content: center
Primary axis: End	justify-content: flex-end
Primary axis: Space between	justify-content: space-between
Cross axis: Start	align-items: flex-start
Cross axis: Center	align-items: center
Cross axis: End	align-items: flex-end
Cross axis: Stretch	align-items: stretch

Sizing Modes

Each child within an auto layout frame has a sizing mode:

Figma Sizing	CSS Equivalent
Fixed	width: 200px (explicit value)
Hug contents	width: fit-content or simply no width (intrinsic)
Fill container	flex: 1 or width: 100% depending on context

Absolute Positioning

Figma allows children within auto layout to be set to "Absolute position," which removes them from the flow. This maps to:

.parent {
  position: relative;
  display: flex;
}
.absolute-child {
  position: absolute;
  top: 8px;
  right: 8px;
}

Implementation Patterns

Translating a Navigation Bar

Figma structure:

• Frame: horizontal auto layout, space-between, padding 16px 32px
  • Logo (fixed width)
  • Nav links frame: horizontal, gap 24px
  • CTA button (fixed width)

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
}

.nav-links {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
}

Translating a Card with Stacked Content

Figma structure:

• Frame: vertical auto layout, gap 16px, padding 24px
  • Image (fill width, fixed height)
  • Title text (fill width, hug height)
  • Description text (fill width, hug height)
  • Button row: horizontal, gap 12px, align end

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card__title,
.card__description {
  width: 100%;
}

.card__actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: flex-end;
}

Nested Auto Layout as Nested Flexbox

Figma designs frequently nest auto layout frames. Each nested frame becomes a nested flex container:

<div class="page">         <!-- vertical, gap 32px -->
  <header class="header">  <!-- horizontal, space-between -->
    <div class="logo">...</div>
    <nav class="nav">...</nav> <!-- horizontal, gap 16px -->
  </header>
  <main class="content">   <!-- horizontal, gap 24px -->
    <aside class="sidebar">...</aside> <!-- vertical, gap 12px, fixed 280px -->
    <section class="main-area">...</section> <!-- vertical, gap 16px, fill -->
  </main>
</div>

.page { display: flex; flex-direction: column; gap: 32px; }
.header { display: flex; justify-content: space-between; align-items: center; }
.nav { display: flex; gap: 16px; }
.content { display: flex; gap: 24px; }
.sidebar { display: flex; flex-direction: column; gap: 12px; width: 280px; }
.main-area { display: flex; flex-direction: column; gap: 16px; flex: 1; }

Auto Layout Wrap to CSS Grid

When auto layout uses "Wrap" mode with fixed-size children, CSS Grid may be a better fit than Flexbox:

/* Figma: horizontal wrap, gap 16px, children 200px wide */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

Best Practices

• Read the layout hierarchy — Start from the outermost frame and work inward. Each auto layout frame is a flex container; understand the nesting before writing code.
• Map sizing modes first — Determine which children are fixed, hugging, or filling before choosing between explicit widths and flex-grow.
• Use gap instead of margins — Figma's "spacing between items" is gap. Avoid adding margins to children; use the parent's gap property.
• Leverage Dev Mode code panel — The CSS output in Dev Mode reflects the auto layout properties. Use it as a starting point and refine.
• Test with real content — Auto layout in Figma adjusts to content. Verify that your CSS implementation behaves the same way with varying text lengths and image sizes.

Common Pitfalls

• Confusing "fill" with a fixed width — "Fill container" means the element should grow to take available space (flex: 1), not that it has a specific pixel width.
• Forgetting the wrap case — When auto layout wraps, simple flex-direction: row with flex-wrap: wrap may not give the same grid-like result. Consider CSS Grid.
• Misreading alignment axes — In a horizontal layout, the primary axis is horizontal (justify-content) and the cross axis is vertical (align-items). In vertical layout, they swap.
• Ignoring min/max constraints — Figma allows min and max width/height on auto layout children. Missing these in CSS causes overflow or unexpected shrinking.
• Treating absolute children as flow children — Elements with "Absolute position" in Figma are out of the auto layout flow. They must use position: absolute in CSS, not flex properties.

Anti-Patterns

Over-engineering for hypothetical scale. Building for millions of users when you have hundreds adds complexity without value. Solve today's problems first.

Ignoring the existing ecosystem. Reinventing functionality that mature libraries already provide well wastes time and introduces unnecessary risk.

Premature abstraction. Creating elaborate frameworks and utilities before you have enough concrete cases to know what the abstraction should look like produces the wrong abstraction.

Neglecting error handling at boundaries. Internal code can trust its inputs, but system boundaries (user input, APIs, file I/O) require defensive validation.

Skipping documentation for obvious code. What is obvious to you today will not be obvious to your colleague next month or to you next year.