Master advanced Figma Auto Layout features — min/max width, fill constraints, wrapping, and nested scroll — and translate each to production CSS using min(), max(), clamp(), and overflow patterns.
Basic Auto Layout covers the majority of Figma layouts, but responsive designs require advanced features: minimum and maximum dimension constraints, text truncation rules, overflow scrolling, and wrapping grids. These advanced settings are exactly where designers communicate responsive behavior that developers often have to guess at.
This lesson covers the advanced Auto Layout properties that appear when a designer has done careful responsive design work, and shows the precise CSS that implements each one.
Figma's Advanced Layout settings (available when an Auto Layout frame is selected) include Min Width, Max Width, Min Height, and Max Height. These constrain how far a Fill or Hug dimension can grow or shrink.
Figma settings and CSS equivalents:
| Figma | CSS |
|---|---|
| Min Width: 260 | min-width: 16.25rem |
| Max Width: 480 | max-width: 30rem |
| Min Height: 44 | min-height: 2.75rem |
| Max Height: 320 | max-height: 20rem |
| Width: Fill + Min 200 + Max 400 | flex: 1; min-width: 12.5rem; max-width: 25rem; |
Practical example — a responsive search input:
Figma spec:
1/* Responsive search input from Figma advanced layout spec */
2.search-input-wrapper {
3 display: flex;
4 align-items: center;
5 gap: 0.5rem;
6 width: 100%; /* Fill container */
7 min-width: 12.5rem; /* Min Width: 200px */
8 max-width: 30rem; /* Max Width: 480px */
9 height: 2.75rem; /* Fixed Height: 44px */
10 padding: 0 0.875rem;
11 border: 1.5px solid #d1d5db;
12 border-radius: 0.5rem;
13 background: white;
14 transition: border-color 150ms ease, box-shadow 150ms ease;
15}
16.search-input-wrapper:focus-within {
17 border-color: #2563eb;
18 box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);
19}
20.search-input {
21 flex: 1;
22 border: none;
23 outline: none;
24 font-size: 0.9375rem;
25 color: #111827;
26 background: transparent;
27}Using CSS min() and max() for responsive constraints:
1/* Equivalent without explicit min/max-width using CSS math functions */
2.search-input-wrapper {
3 /* min(100%, 30rem): never wider than 30rem, shrinks below 30rem */
4 width: min(100%, 30rem);
5 /* max(12.5rem, ...): never narrower than 12.5rem */
6 min-width: 12.5rem;
7}
8
9/* Fully fluid width using clamp */
10.hero-title {
11 /* Figma: min 24px mobile, max 64px desktop, fluid in between */
12 font-size: clamp(1.5rem, 5vw, 4rem);
13}Figma text layers have a 'Text Overflow' setting that controls how text behaves when it exceeds its container. These map directly to CSS text-overflow and line-clamp properties.
Figma text truncation options:
CSS translations:
1/* Figma: Text Overflow = Truncate (1 line) */
2.truncate-1 {
3 white-space: nowrap;
4 overflow: hidden;
5 text-overflow: ellipsis;
6 max-width: 100%;
7}
8
9/* Figma: Text Overflow = Truncate (2 lines) */
10.truncate-2 {
11 display: -webkit-box;
12 -webkit-line-clamp: 2;
13 -webkit-box-orient: vertical;
14 overflow: hidden;
15 /* Standard property (Chrome 86+, Firefox 68+) */
16 line-clamp: 2;
17}
18
19/* Figma: Text Overflow = Truncate (3 lines) */
20.truncate-3 {
21 display: -webkit-box;
22 -webkit-line-clamp: 3;
23 -webkit-box-orient: vertical;
24 overflow: hidden;
25}
26
27/* Applied to course card title (Figma: Truncate 2 lines) */
28.course-card-title {
29 font-size: 1rem;
30 font-weight: 700;
31 color: #111827;
32 display: -webkit-box;
33 -webkit-line-clamp: 2;
34 -webkit-box-orient: vertical;
35 overflow: hidden;
36 line-height: 1.4;
37 /* Height = line-height * font-size * max-lines */
38 /* 1.4 * 16px * 2 = 44.8px → card title is always max 2 lines */
39}
40
41/* Figma: Text Overflow = Clip (at frame boundary) */
42.clip-text {
43 overflow: hidden;
44 /* No ellipsis — text cuts abruptly at the frame edge */
45}Figma frames can be set to clip content and have scrollable overflow. This maps directly to CSS overflow properties.
Figma overflow settings:
Figma horizontal scroll card row:
1/* Horizontal scrolling row — Figma: Auto Layout horizontal, Clip content ON,
2 Scroll behavior: Horizontal, Scroll snap: Start */
3.card-scroll-row {
4 display: flex;
5 flex-direction: row;
6 gap: 1rem;
7 overflow-x: auto; /* Figma: Horizontal scroll */
8 overflow-y: hidden; /* Clip vertical overflow */
9 scroll-snap-type: x mandatory; /* Figma: Scroll snap: Start */
10 -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
11 scrollbar-width: none; /* Hide scrollbar on Firefox */
12 padding-bottom: 0.5rem; /* Space for scroll shadow */
13
14 /* Peek effect: show partial next card */
15 /* Figma: frame right edge shows 32px of next card */
16 padding-right: 2rem;
17}
18.card-scroll-row::-webkit-scrollbar { display: none; }
19
20.card-scroll-row .card {
21 flex: 0 0 280px; /* Fixed card width, no shrink/grow */
22 scroll-snap-align: start; /* Snap card start to container start */
23}
24
25/* Vertical scrolling list with max height */
26/* Figma: Auto Layout vertical, Fixed Height 400px, Clip content ON,
27 Scroll behavior: Vertical */
28.scroll-list {
29 display: flex;
30 flex-direction: column;
31 gap: 0.5rem;
32 height: 25rem; /* Fixed Height: 400px */
33 overflow-y: auto; /* Vertical scroll */
34 overflow-x: hidden; /* Clip horizontal */
35 padding: 0.5rem;
36 scrollbar-width: thin;
37 scrollbar-color: #d1d5db transparent;
38}
39.scroll-list::-webkit-scrollbar { width: 6px; }
40.scroll-list::-webkit-scrollbar-thumb {
41 background: #d1d5db;
42 border-radius: 3px;
43}Figma Auto Layout with wrap enabled creates a wrapping flex container. The designer sets a minimum item width by ensuring the Auto Layout gap and the items' min-width create a logical breakpoint.
Figma wrap settings:
Direct Flexbox translation:
1.flex-wrap-grid {
2 display: flex;
3 flex-direction: row;
4 flex-wrap: wrap; /* Figma: Wrap = Wrap */
5 gap: 1.5rem; /* Figma: Gap 24px */
6}
7.flex-wrap-grid > * {
8 flex: 1; /* Fill container */
9 min-width: 17.5rem; /* Min Width: 280px — Figma advanced setting */
10}CSS Grid equivalent (preferred — gives more control):
1.card-grid {
2 display: grid;
3 /* auto-fill with min 280px matches Figma wrap + min-width behavior */
4 grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
5 gap: 1.5rem; /* matches Figma 24px gap */
6}
7
8/* Limiting max columns (Figma: max 3 cards per row) */
9.card-grid-max-3 {
10 display: grid;
11 grid-template-columns: repeat(
12 auto-fill,
13 minmax(max(280px, calc((100% - 3rem) / 3)), 1fr)
14 );
15 /* This ensures never more than 3 columns by making min-width
16 at least 1/3 of the container minus gaps */
17 gap: 1.5rem;
18}A course listing section implementing min/max constraints, text truncation, horizontal scroll on mobile, and CSS Grid wrap on desktop — all from Figma advanced Auto Layout specifications.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Advanced Auto Layout Demo</title>
7 <style>
8 *, *::before, *::after { box-sizing: border-box; }
9 body { margin: 0; font-family: system-ui, sans-serif;
10 background: #f8fafc; color: #111827; }
11 .section { padding: 3rem 1.5rem; max-width: 1200px; margin: 0 auto; }
12 .section-header {
13 display: flex; align-items: baseline;
14 justify-content: space-between; margin-bottom: 1.5rem;
15 }
16 .section-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
17 .section-link { font-size: 0.875rem; color: #2563eb; text-decoration: none;
18 font-weight: 600; }
19 .section-link:hover { text-decoration: underline; }
20
21 /* Mobile: horizontal scroll row */
22 /* Figma: Auto Layout H, gap 16px, clip+scroll H, snap start */
23 .card-scroll-row {
24 display: flex; gap: 1rem;
25 overflow-x: auto; overflow-y: hidden;
26 scroll-snap-type: x mandatory;
27 scrollbar-width: none;
28 padding-bottom: 0.75rem;
29 margin: 0 -1.5rem;
30 padding-left: 1.5rem;
31 padding-right: 1.5rem;
32 }
33 .card-scroll-row::-webkit-scrollbar { display: none; }
34
35 /* Desktop: CSS Grid (from Figma wrap settings) */
36 @media (min-width: 640px) {
37 .card-scroll-row {
38 display: grid;
39 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
40 overflow: visible;
41 padding: 0; margin: 0;
42 scroll-snap-type: none;
43 }
44 }
45
46 /* Course card */
47 /* Figma: Fixed-Hug, border-radius 12px, shadow */
48 .course-card {
49 flex: 0 0 260px; /* Mobile: fixed width for scroll */
50 background: white;
51 border: 1px solid #e5e7eb;
52 border-radius: 0.75rem;
53 overflow: hidden;
54 box-shadow: 0 1px 3px rgb(0 0 0 / 0.04);
55 transition: box-shadow 200ms ease;
56 scroll-snap-align: start;
57 display: flex;
58 flex-direction: column;
59 }
60 @media (min-width: 640px) {
61 .course-card { flex: unset; } /* Grid controls width on desktop */
62 }
63 .course-card:hover {
64 box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
65 }
66 .course-thumb {
67 aspect-ratio: 16/9; overflow: hidden;
68 background: #eff6ff; flex-shrink: 0;
69 display: flex; align-items: center; justify-content: center;
70 font-size: 2rem;
71 }
72 .course-body { padding: 1rem; display: flex; flex-direction: column;
73 gap: 0.5rem; flex: 1; }
74 .course-badge {
75 display: inline-flex; align-items: center;
76 padding: 0.125rem 0.5rem; border-radius: 9999px;
77 font-size: 0.6875rem; font-weight: 700;
78 text-transform: uppercase; letter-spacing: 0.05em;
79 background: #dcfce7; color: #166534;
80 align-self: flex-start;
81 }
82 /* Figma: Text Overflow = Truncate 2 lines */
83 .course-title {
84 font-size: 0.9375rem; font-weight: 700;
85 color: #111827; margin: 0;
86 display: -webkit-box;
87 -webkit-line-clamp: 2;
88 -webkit-box-orient: vertical;
89 overflow: hidden;
90 line-height: 1.4;
91 }
92 /* Figma: Text Overflow = Truncate 1 line */
93 .course-meta {
94 font-size: 0.8125rem; color: #6b7280; margin: 0;
95 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
96 }
97 /* Figma: Min Width 80px button, Fill container */
98 .course-btn {
99 display: block; width: 100%;
100 min-width: 5rem; /* Min Width: 80px */
101 padding: 0.5rem 1rem;
102 background: #2563eb; color: white;
103 border: none; border-radius: 0.5rem;
104 font-size: 0.875rem; font-weight: 600; font-family: inherit;
105 cursor: pointer; text-align: center;
106 margin-top: auto; /* Push to bottom of flex column */
107 transition: background-color 150ms ease;
108 }
109 .course-btn:hover { background: #1d4ed8; }
110 </style>
111</head>
112<body>
113 <div class="section">
114 <div class="section-header">
115 <h2 class="section-title">Featured Courses</h2>
116 <a href="/courses" class="section-link">View all</a>
117 </div>
118 <!-- Mobile: horizontal scroll; Desktop: grid wrap -->
119 <div class="card-scroll-row" role="list">
120 <article class="course-card" role="listitem">
121 <div class="course-thumb" aria-hidden="true">⚛</div>
122 <div class="course-body">
123 <span class="course-badge">Beginner</span>
124 <!-- 2-line clamp: even long titles stay clean -->
125 <h3 class="course-title">Complete React Developer Course: From Zero to Production with Hooks and TypeScript</h3>
126 <p class="course-meta">24 lessons · 8h · 12,400 enrolled</p>
127 <button class="course-btn" type="button">Enroll free</button>
128 </div>
129 </article>
130 <article class="course-card" role="listitem">
131 <div class="course-thumb" aria-hidden="true">🎨</div>
132 <div class="course-body">
133 <span class="course-badge">Beginner</span>
134 <h3 class="course-title">CSS Design Systems for Developers</h3>
135 <p class="course-meta">18 lessons · 6h · 8,200 enrolled</p>
136 <button class="course-btn" type="button">Enroll free</button>
137 </div>
138 </article>
139 <article class="course-card" role="listitem">
140 <div class="course-thumb" aria-hidden="true">🔷</div>
141 <div class="course-body">
142 <span class="course-badge">Intermediate</span>
143 <h3 class="course-title">TypeScript Advanced Patterns</h3>
144 <p class="course-meta">20 lessons · 7h · 5,600 enrolled</p>
145 <button class="course-btn" type="button">Enroll free</button>
146 </div>
147 </article>
148 </div>
149 </div>
150</body>
151</html>This component implements three advanced Auto Layout behaviors: On mobile, the card-scroll-row is a horizontal flex container with overflow-x: auto, scroll-snap-type, and fixed card widths — matching Figma's 'Horizontal scroll' behavior. On desktop (640px+), it switches to CSS Grid with auto-fill minmax for the wrap behavior. The course-title uses -webkit-line-clamp: 2 (Figma: Truncate 2 lines) to prevent long titles from breaking card height consistency. The course-meta uses white-space: nowrap + text-overflow: ellipsis (Figma: Truncate 1 line). The course-btn has min-width: 5rem matching Figma's Min Width: 80px constraint on the button component.
The next lesson covers Figma plugins for developers — Figma to Code, Tailwind CSS plugin, and other tools that accelerate the design-to-code workflow.
Your progress is saved in this browser, on this device only.