Figma Auto Layout в CSS Grid: практическое руководство

TL;DR

• Auto Layout сопоставляется с flex для одномерного потока и с grid для двумерных раскладок.
• Определяйте строки/столбцы в Figma до экспорта; грязные слои дают грязный grid.
• Проверяйте результат по шкале отступов Tailwind и вашим брейкпойнтам.

Почему Grid — правильная цель для некоторых Auto Layout

Auto Layout по умолчанию линеен, но когда карточки переносятся, появляются смешанные ширины или контенту нужно выравнивание и по строкам, и по столбцам, CSS Grid подходит лучше.

Выбирайте grid, когда нужно

• Двумерное размещение (строки и столбцы).
• Согласованное выравнивание при разной высоте контента.
• Явный контроль промежутков по обеим осям.

Выбирайте flex, когда нужно

• Простой горизонтальный или вертикальный поток.
• Размеры по контенту без жёстких строк.
• Минимум правил вёрстки и более компактный CSS.

Сопоставление Auto Layout с CSS Grid

Цель — перевести замысел, а не каждый пиксель. Используйте это сопоставление как отправную точку:

Пошаговый рабочий процесс

1. Сгруппируйте слои по строкам/столбцам в Figma.
2. Переименуйте фреймы/компоненты, чтобы экспортированные классы были осмысленными.
3. Определите столбцы grid (например, 2, 3, 4) и правила брейкпойнтов.
4. Экспортируйте и сопоставьте промежутки с вашими токенами отступов.
5. Доработайте адаптивность с помощью minmax() или классов брейкпойнтов.

Советы по сопоставлению с Tailwind

• Начните с grid + gap-*.
• Используйте grid-cols-* для фиксированных столбцов или grid-cols-[repeat(auto-fit,minmax(240px,1fr))] для текучих раскладок.
• Держите отступы в соответствии с конфигурацией (gap-4, gap-6 и т. д.).

Адаптивная стратегия

• Сначала мобильные: начните с одного столбца, затем увеличивайте количество на md/lg.
• Столбцы, учитывающие контент: используйте auto-fit с minmax, чтобы избежать неудобных промежутков.
• Проверки переполнения: проверяйте длинные заголовки и переменную высоту контента.

Частые ошибки

• Чрезмерная вложенность фреймов, создающая лишние grid-обёртки.
• Игнорирование собственных размеров; карточки с большим объёмом текста требуют более высоких строк.
• Несовпадение токенов; экспортированные отступы, которых нет в шкале Tailwind.

Чек-лист перед релизом

• Grid согласован с отступами дизайн-системы.
• Брейкпойнты соответствуют правилам раскладки продукта.
• Компоненты остаются переиспользуемыми вне контекста grid.

FAQ

Можно ли преобразовать каждый Auto Layout в grid?
Используйте grid только тогда, когда нужно двумерное управление; в остальных случаях flex проще и компактнее.

Нужен ли мне плагин?
Нет, но хорошие инструменты экспорта экономят время. Смотрите варианты в Figma to Code Converter.

Как избежать сдвигов раскладки?
Задавайте предсказуемые ширины столбцов и тестируйте с реальным контентом.

Рекомендуемые инструменты

Сравните экспортёры и поддержку grid на странице сравнения.

Следующие шаги

• Изучите центр Figma to Code.
• Ознакомьтесь с советами по адаптивному экспорту в руководстве по сравнению.