Understand the critical difference between Frames and Groups in Figma, learn how Auto Layout maps to CSS Flexbox, and translate Figma Auto Layout properties into production-ready CSS without guessing.
The single most confusing thing for developers learning Figma is the difference between Frames, Groups, and the significance of Auto Layout. Getting this wrong leads to incorrect CSS — applying Flexbox where the design intends a basic div, or missing Flexbox entirely where the design uses Auto Layout.
Auto Layout is Figma's implementation of CSS Flexbox and Grid concepts. When you see an Auto Layout frame in Figma, you know with certainty the CSS implementation uses display: flex or display: grid. The padding, gap, direction, and alignment properties map one-to-one to CSS Flexbox properties.
This lesson establishes the complete Frame/Group/Auto Layout translation table so you can look at any Figma layers panel and immediately know what CSS to write.
Frame: Figma's primary container element. Has its own coordinate system, clips overflow, supports constraints, and is required for Auto Layout. Maps to a block-level HTML element with defined dimensions (div, section, article, header, nav, footer). Every page, component, and section in a professional Figma file uses Frames.
Group: a loose collection of elements with no defined container. Does not clip overflow, does not support Auto Layout, has no fill or border. Maps to a div with no CSS layout properties — essentially invisible to CSS.
Section: a new Figma element (2023+) for organizing the canvas. Has no CSS equivalent — it is a canvas-level organizational tool, not a layer in the design hierarchy.
When you see a Group in the layers panel, the developer implementation usually uses a fragment (React) or a simple div with no layout CSS. When you see a Frame, it gets styling (background, border, padding, width, height).
CSS implications:
1/* Frame → styled container */
2.card-frame {
3 background: white;
4 border: 1px solid #e5e7eb;
5 border-radius: 0.75rem;
6 padding: 1.5rem; /* frame padding from Inspect */
7 width: 320px; /* frame width from Inspect */
8 overflow: hidden; /* frame clips by default */
9}
10
11/* Group → transparent wrapper, no specific CSS needed */
12/* .group { } — usually no styles needed for groups */Auto Layout is Figma's Flexbox. Every Auto Layout property has an exact CSS Flexbox equivalent:
| Figma Auto Layout | CSS Flexbox |
|---|---|
| Direction: Horizontal | flex-direction: row |
| Direction: Vertical | flex-direction: column |
| Spacing: Packed | justify-content: flex-start |
| Spacing: Space between | justify-content: space-between |
| Align: Top | align-items: flex-start |
| Align: Center | align-items: center |
| Align: Bottom | align-items: flex-end |
| Padding: 16 | padding: 1rem |
| Padding: 12 16 | padding: 0.75rem 1rem |
| Gap: 8 | gap: 0.5rem |
| Wrap: Wrap | flex-wrap: wrap |
| Wrap: No wrap | flex-wrap: nowrap (default) |
Child sizing modes:
| Figma child mode | CSS |
|---|---|
| Hug contents | width: fit-content (or no width — default) |
| Fill container | flex: 1 (or flex-grow: 1) |
| Fixed width | width: [value]px |
Complete Auto Layout translation example:
Figma Inspect shows for a button component:
1/* Exact CSS translation of Figma Auto Layout spec */
2.btn {
3 display: flex; /* Auto Layout → display: flex */
4 flex-direction: row; /* Horizontal */
5 align-items: center; /* Align: Center */
6 gap: 0.5rem; /* Gap: 8px */
7 padding: 0.625rem 1.25rem; /* Padding: 10px 20px */
8 width: fit-content; /* Width: Hug contents */
9}Figma's sizing behavior (how elements respond when their container changes size) maps to CSS layout properties:
For a child element in Auto Layout:
For the Auto Layout container itself:
Practical example — a card with a title that fills width:
1/* Card: Auto Layout vertical, padding 24px, gap 16px, Fixed 320px width, Hug height */
2.course-card {
3 display: flex;
4 flex-direction: column;
5 padding: 1.5rem;
6 gap: 1rem;
7 width: 320px; /* Fixed width */
8 height: auto; /* Hug contents height — grows with content */
9}
10
11/* Card title: Fill container width, Hug height */
12.course-card .title {
13 flex: 1; /* or: width: 100% — fills the card width */
14 /* height is automatic — hugs the text content */
15}
16
17/* Card button: Fill container width, Fixed 40px height */
18.course-card .btn {
19 width: 100%; /* Fill container */
20 height: 2.5rem; /* Fixed 40px */
21 flex-shrink: 0; /* Prevents compression */
22}Complex Figma components often have nested Auto Layout frames — an outer vertical layout containing inner horizontal layouts. This maps to nested Flexbox containers.
Figma layers panel showing nested Auto Layout:
1Course Card (Auto Layout vertical, padding 0, gap 0)
2├── Thumbnail (Frame, fixed 16:9)
3└── Content (Auto Layout vertical, padding 24px, gap 16px)
4 ├── Badge Row (Auto Layout horizontal, gap 8px)
5 │ ├── Badge (Component, hug)
6 │ └── Badge (Component, hug)
7 ├── Title (Text, fill width)
8 ├── Meta (Text, fill width)
9 └── Button (Component, fill width, fixed 40px height)CSS implementation of this nested structure:
1/* Outer card: vertical flex, no padding (thumbnail goes edge-to-edge) */
2.course-card {
3 display: flex;
4 flex-direction: column;
5 border: 1px solid #e5e7eb;
6 border-radius: 0.75rem;
7 overflow: hidden;
8 width: 320px;
9}
10
11/* Thumbnail: fixed aspect ratio */
12.course-card-thumbnail {
13 aspect-ratio: 16 / 9;
14 overflow: hidden;
15 flex-shrink: 0;
16}
17.course-card-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
18
19/* Content: vertical flex, padded */
20.course-card-content {
21 display: flex;
22 flex-direction: column;
23 padding: 1.5rem; /* 24px */
24 gap: 1rem; /* 16px */
25 flex: 1; /* grows to fill card */
26}
27
28/* Badge row: horizontal flex */
29.badge-row {
30 display: flex;
31 flex-direction: row;
32 gap: 0.5rem; /* 8px */
33 flex-wrap: wrap;
34}
35
36/* Title and meta: fill width (implicit in block display) */
37.course-title { margin: 0; }
38.course-meta { margin: 0; }
39
40/* Button: fill width, fixed height, pushed to bottom */
41.course-btn {
42 width: 100%; /* Fill container */
43 height: 2.5rem; /* Fixed 40px */
44 margin-top: auto; /* Pushes to bottom of flex column */
45 flex-shrink: 0;
46}A complete page layout with header, sidebar, and main content area — translating each Figma Auto Layout frame to CSS Flexbox with exact property values from the Inspect panel.
1<!--
2FIGMA INSPECT READINGS:
3App Shell frame:
4 Auto Layout: Horizontal
5 Width: Fill, Height: Fill (100vh)
6 Gap: 0
7
8Sidebar frame:
9 Auto Layout: Vertical
10 Width: Fixed 240px, Height: Fill
11 Padding: 24px 16px
12 Gap: 4px
13 Background: #1E293B
14
15Content area frame:
16 Auto Layout: Vertical
17 Width: Fill, Height: Fill
18 Gap: 0
19
20Top bar frame:
21 Auto Layout: Horizontal
22 Width: Fill, Height: Fixed 56px
23 Padding: 0 24px
24 Align items: Center
25 Justify: Space between
26 Border-bottom: 1px #E2E8F0
27 Background: white
28
29Main content frame:
30 Auto Layout: Vertical
31 Width: Fill, Height: Fill (scroll)
32 Padding: 32px 24px
33 Gap: 24px
34 Background: #F1F5F9
35-->
36
37<!DOCTYPE html>
38<html lang="en">
39<head>
40 <meta charset="UTF-8">
41 <title>Auto Layout → CSS Demo</title>
42 <style>
43 *, *::before, *::after { box-sizing: border-box; }
44 body { margin: 0; font-family: system-ui, sans-serif; }
45
46 /* App Shell: horizontal, fill viewport */
47 .app-shell {
48 display: flex; /* Auto Layout: Horizontal */
49 flex-direction: row;
50 height: 100vh; /* Fill: 100vh */
51 overflow: hidden;
52 }
53
54 /* Sidebar: vertical, fixed 240px width */
55 .sidebar {
56 display: flex; /* Auto Layout: Vertical */
57 flex-direction: column;
58 width: 240px; /* Fixed width: 240px */
59 height: 100%; /* Fill height */
60 padding: 1.5rem 1rem; /* Padding: 24px 16px */
61 gap: 0.25rem; /* Gap: 4px */
62 background: #1e293b; /* Fill: #1E293B */
63 flex-shrink: 0; /* Prevents compression */
64 }
65 .sidebar-link {
66 display: flex;
67 align-items: center;
68 gap: 0.625rem;
69 padding: 0.5rem 0.75rem;
70 border-radius: 0.375rem;
71 color: #94a3b8;
72 text-decoration: none;
73 font-size: 0.9375rem;
74 font-weight: 500;
75 transition: background 150ms ease, color 150ms ease;
76 }
77 .sidebar-link:hover { background: rgba(255,255,255,0.06); color: #e2e8f0; }
78 .sidebar-link[aria-current] { background: rgba(255,255,255,0.1); color: white; }
79
80 /* Content area: vertical, fills remaining width */
81 .content-area {
82 display: flex; /* Auto Layout: Vertical */
83 flex-direction: column;
84 flex: 1; /* Fill container (remaining width) */
85 overflow: hidden;
86 }
87
88 /* Top bar: horizontal, fixed 56px height, space-between */
89 .top-bar {
90 display: flex; /* Auto Layout: Horizontal */
91 flex-direction: row;
92 align-items: center; /* Align: Center */
93 justify-content: space-between; /* Spacing: Space between */
94 height: 3.5rem; /* Fixed height: 56px */
95 padding: 0 1.5rem; /* Padding: 0 24px */
96 background: white;
97 border-bottom: 1px solid #e2e8f0;
98 flex-shrink: 0;
99 }
100 .top-bar h1 { margin: 0; font-size: 1.125rem; font-weight: 700; }
101
102 /* Main content: vertical, fills and scrolls */
103 .main-content {
104 display: flex; /* Auto Layout: Vertical */
105 flex-direction: column;
106 flex: 1; /* Fill remaining height */
107 padding: 2rem 1.5rem; /* Padding: 32px 24px */
108 gap: 1.5rem; /* Gap: 24px */
109 background: #f1f5f9;
110 overflow-y: auto; /* Scroll main content, not sidebar */
111 }
112
113 /* Content card placeholder */
114 .content-card {
115 background: white;
116 border-radius: 0.75rem;
117 padding: 1.5rem;
118 border: 1px solid #e2e8f0;
119 }
120 </style>
121</head>
122<body>
123 <div class="app-shell">
124 <nav class="sidebar" aria-label="Sidebar navigation">
125 <div style="color:white;font-weight:800;font-size:1.125rem;padding:0.5rem 0.75rem;margin-bottom:1rem;">DevBootstrap</div>
126 <a href="/" class="sidebar-link" aria-current="page">Dashboard</a>
127 <a href="/courses" class="sidebar-link">My Courses</a>
128 <a href="/progress" class="sidebar-link">Progress</a>
129 </nav>
130 <div class="content-area">
131 <header class="top-bar">
132 <h1>Dashboard</h1>
133 <button style="padding:0.5rem 1rem;background:#2563eb;color:white;border:none;border-radius:0.375rem;cursor:pointer;">New course</button>
134 </header>
135 <main class="main-content">
136 <div class="content-card">
137 <h2 style="margin:0 0 0.5rem;">Welcome back</h2>
138 <p style="margin:0;color:#64748b;">Continue where you left off.</p>
139 </div>
140 <div class="content-card">
141 <h2 style="margin:0 0 0.5rem;">Recent activity</h2>
142 <p style="margin:0;color:#64748b;">Your recent learning progress appears here.</p>
143 </div>
144 </main>
145 </div>
146 </div>
147</body>
148</html>Every CSS property in this layout is a direct translation of a Figma Auto Layout specification from the Inspect panel. The app-shell uses display: flex (Horizontal Auto Layout). The sidebar uses display: flex + flex-direction: column (Vertical Auto Layout) with flex-shrink: 0 to prevent compression — critical when the content area also wants to grow. The content-area uses flex: 1 (Fill container mode) to take all remaining space. The top-bar uses justify-content: space-between (Figma's 'Space between' distribution). Each gap value is the direct pixel-to-rem conversion of the Figma gap property.
The next lesson covers Figma Components and Instances — how component libraries work, how to inspect component props in Dev Mode, and how component structure maps to React component props and variants.
Your progress is saved in this browser, on this device only.