Новая функция Grid в Figma: разбираемся, как она работает

На первый взгляд может показаться, что это просто еще один способ организации дизайна, но на самом деле здесь кроется нечто большее.

Как убежденный сторонник того, что дизайнеры должны понимать CSS, сразу предупрежу: если вы хотите освоить новую функцию Grid в Figma, вам нужно разобраться, как работает CSS Grid. Она хорошо, но не со 100%-ной точностью имитирует CSS Grid, и это нормально. Именно поэтому так важно понимать, где заканчивается функционал Figma и какие возможности верстки, гибкость и отзывчивость способен предоставить только браузер.

Понимание того, как работает CSS Grid, поможет вам проектировать более продуманные макеты, эффективнее взаимодействовать с разработчиками и создавать продукты, способные выдержать проверку реальностью.

Давайте разберемся, что же перешло в Figma из CSS, а что нет.

Знакомимся с новой функцией Grid

В мае 2025 года Figma представила крупное обновление своей системы лейаутов. Ранее дизайнерам был доступен только одномерный Auto Layout, то есть размещение элементов в одном направлении (по вертикали или по горизонтали), подобно CSS Flexbox. Теперь Figma добавила новую опцию Grid, позволяющую создавать двумерные макеты по аналогии с CSS Grid. Это обновление обеспечивает больший контроль и гибкость, а также более точное соответствие тому, как лейауты строятся в коде.

Обновленное меню Auto Layout предлагает три варианта настройки: Freeform (по умолчанию), Horizontal / Vertical (одномерный режим, аналог Flexbox) и Grid (двумерный режим, аналог CSS Grid). Понимание разницы между этими типами лейаута очень важно. Но сначала давайте изучим новую функцию Grid:

Опция Grid находится в разделе Auto Layout на правой панели. Просто примените ее к своему фрейму, чтобы задать количество строк, столбцов, а также внутренние (gap) и внешние (padding) отступы. Как только все будет готово, разместите элементы внутри получившейся сетки. Они могут занимать несколько строк или столбцов и автоматически растягиваться или сжиматься при изменении размера фрейма.

✏️ Совет: Включите отображение подписей свойств (Property Labels) в выпадающем меню в правом верхнем углу. Так гораздо проще понять, для чего предназначено каждое поле, и избежать путаницы. Маленькая деталь, которая избавит вас от многих проблем.

Почему дизайнерам важно понимать CSS Grid

В основе новой функции Grid лежит реальный CSS-код, что делает ее максимально полезной и практически применимой. Несмотря на то, что она интуитивно понятна и с ней приятно экспериментировать, ее истинная сила проявляется, когда вы понимаете основные принципы разработки. 

Создатели инструментов проектирования делают все возможное, но эти инструменты никогда не будут полностью соответствовать рендерингу в браузере. Зная CSS Grid, вы научитесь выявлять те моменты, когда одной лишь Figma может оказаться недостаточно и будет целесообразнее переложить тяжелую работу на браузер.

То, как выглядит и работает новая опция Grid в Figma, не случайно. Как и большинство других функций, она берет свое начало в реальном коде, в данном случае CSS Grid, одном из ключевых методов верстки, используемых для структурирования контента в вебе.

Что такое CSS Grid

CSS Grid — это способ разметки для организации контента в строки и колонки. Он позволяет разработчикам размещать элементы именно там, где задумано — будь то хедер, боковая панель или карточки, аккуратно распределенные по странице. 

CSS Grid применим не только для создания полностраничных макетов. Вы также можете использовать его для небольших разделов, таких как галереи или формы, и даже отдельных UI-компонентов. Дизайнеры, понимающие, как работает этот инструмент, могут проектировать более чистые, последовательные лейауты, которые проще реализовать в коде.

Воспринимайте CSS Grid как бенто-бокс 🍱

Представьте, что ваш дизайн — это бенто-бокс: в нем есть секции — строки и столбцы — куда вы можете поместить ваши «ингредиенты» (текст, изображения, кнопки и т.д.). Как и в случае с разделителями в контейнерах для еды, которые могут иметь самое разное расположение, CSS Grid позволяет настраивать структуру макета под свои потребности, обеспечивая гибкость и точность результата.

Ориентируйтесь на линии сетки, а не колонки

Именно здесь между дизайнерами и разработчиками часто возникает недопонимание. Как дизайнеры, мы обычно мыслим колонками — мы видим лейаут как набор столбцов и размещаем элементы внутри них. Но в CSS Grid ориентирами служат линии. Сетка строится из линий, которые пересекают контейнер по горизонтали и вертикали, формируя ячейки, где размещается контент.

Мощная система координат

Это создает мощную систему координат. По умолчанию HTML-элементы располагаются один за другим, но с помощью Grid вы можете точно определить их позицию, например: [grid-column-start: 1; grid-column-end: 4] или [grid-column: 1 / 4]. Так идея «этот элемент занимает три колонки» трансформируется в «этот элемент начинается на линии 1 и заканчивается на линии 4». Это малозаметный сдвиг, но он полностью меняет подход к верстке. 

Вы можете точно задавать координаты элементов, присваивать имена отдельным областям сетки и даже накладывать элементы друг на друга, когда это необходимо. Вы также полностью контролируете поля вокруг сетки и промежутки между строками и столбцами. Гибкий и очень эффективный подход!

Примечание: Если вы перейдете в Figma в режим разработчика, вы увидите значения вроде [grid-column: 1 / 4].

Попробуйте сами (особенно если вы дизайнер!)

Если вы хотите лучше понять, как работает CSS Grid, вы можете поиграть с позиционированием здесь. Подробнее про размещение элементов читайте здесь.

FR или дробные единицы

Столбцы и ячейки сетки не обязательно должны быть одинакового размера. Вы можете установить фиксированную ширину или использовать дробные единицы fr для распределения свободного пространства. Так, если одна ячейка имеет ширину 2fr, а другая — 1fr, первая займет в два раза больше места по горизонтали. Это простой и гибкий способ контролировать пропорции разных элементов лейаута.

Вы можете поиграть с разными единицами измерения CSS здесь.

Сравнение CSS Grid и Figma Grid

✅ Строки, столбцы и свободное размещение

Наконец-то! CSS Grid и Figma теперь прекрасно дополняют друг друга, позволяя размещать элементы в системе координат с помощью линий сетки.

✅ Линии сетки

Как и CSS Grid, Figma строит сетки из столбцов и строк. Эти линии работают, даже когда они не видны.

✅ Внутренние и внешние отступы

Gap (пространство между ячейками) и padding (пространство вокруг сетки) работают в Figma так же, как и в CSS. Это обеспечивает поддержку согласованных отступов в дизайне и в коде.

✅ Вложенность 

Как и в CSS, в Figma вы можете поместить один Auto Layout внутрь другого, например, вертикальный Auto Layout внутрь Grid или Grid внутрь еще одного Grid. Это позволяет более гибко структурировать сложные макеты, сохраняя при этом их организованность и отзывчивость.

⚠️ Единицы измерения

В CSS Grid допустимы фиксированные размеры, проценты и дробные единицы (fr) для пропорционального распределения пространства. Figma не поддерживает последние (пока!). Вы можете задать фиксированные или автоматические размеры, но не получите такой же гибкости.

⚠️ Автоматическая высота/ширина

В отличие от CSS, Figma пока не поддерживает автоматическое изменение ширины или высоты строк в зависимости от содержимого. Имейте это в виду при настройке сетки.

Таким образом, браузер дает нам больше контроля над лейаутом, чем Figma. Чтобы дизайн вел себя точно так, как вы задумали, его необходимо правильно реализовать в CSS. Поэтому при проектировании оставьте место для гибкости и обсуждений с разработчиками.

А как насчет «старого» функционала Auto Layout? Разве он теперь лишний?

Конечно, нет! Одномерный Auto Layout по-прежнему актуален. Он является одним из наших основных инструментов, в первую очередь, как аналог Flexbox. И хотя CSS Grid и Flexbox служат разным целям — Grid двумерный лейаут, а Flexbox одномерный — они прекрасно дополняют друг друга.

Вертикальный/горизонтальный Auto Layout → Имитирует Flexbox (одномерный лейаут — строки ИЛИ столбцы)

Figma Grid → Имитирует CSS Grid (двумерный лейаут — строки И столбцы)

Как и CSS Grid, Flexbox является частью системы верстки CSS. Эти методы не конфликтуют, они работают вместе, и у каждого из них есть свои сильные стороны. То же самое относится и к режимам Auto Layout в Figma.

Знание обоих инструментов и того, когда следует использовать каждый из них, является ключом к созданию эффективных, отзывчивых дизайнов.

Одномерный vs двумерный лейаут

Давайте разберемся, как работают эти инструменты, чтобы понять разницу между одномерным и двумерным лейаутом.

Figma Grid и CSS Grid: Двумерный лейаут

Grid — это двумерная система, позволяющая  одновременно контролировать расположение элементов по вертикали и по горизонтали (в столбцах и строках).

Помните, мы сравнивали CSS Grid с бенто-боксом? В нем есть четкие секции, которые помогают вам организовать содержимое. Вы фактически работаете в системе координат, что значительно облегчает выравнивание элементов, создание последовательных отступов и сильного визуального ритма.

Эта система позволяет эффективно выстроить общую структуру страницы — дашборда, карточек товаров и любых других лейаутов, где нужен полный контроль над расположением элементов.

Вертикальный/горизонтальный Auto Layout в Figma и Flexbox: Одномерный лейаут

В этом случае элементы размещаются цепочкой, один за другим, в горизонтальном или вертикальном направлении. Вот почему такой лейаут называется одномерным.

Вы можете включить опцию переноса / wrap (как в CSS, так и в Figma), чтобы элементы перемещались на следующую строку, когда в предыдущей заканчивается место. Но помните, что в этом случае макет адаптируется с учетом содержимого, размера и поведения дочерних элементов, а не структуры сетки.

Такой лейаут достаточно пластичен и идеально подходит для проектирования элементов, которые должны быть отзывчивыми и подстраиваться под контент внутри них, например кнопок, меню, тегов или полей форм.

Одномерный лейаут идеален для расположения элементов в ряд по горизонтали или вертикали. Если вы хотите контролировать оба направления (строки и столбцы), логичнее выбрать Grid.

Вложенность разных инструментов 

И Figma, и CSS допускают вложенность различных систем верстки. Например, вы можете использовать CSS Grid для полностраничного лейаута, а конкретные секции оформить при помощи Flexbox или наоборот. Здесь нет жестких правил — вам просто нужно выбрать подходящий инструмент для решения конкретной задачи.

Важная деталь, которую многие упускают из виду: явные и неявные сетки

В Figma мы работаем с явными сетками, определяя каждую строку и столбец. Однако CSS Grid способен также создавать неявные сетки, автоматически генерируя строки и столбцы с учетом содержимого. Это особенно полезно для проектирования динамических лейаутов, таких как ленты блогов или списки товаров. 

Как дизайнеры, мы контролируем только явную сетку, но понимание неявной сетки поможет вам узнать, когда следует отойти в сторону и позволить браузеру заполнить пробелы, чтобы получить масштабируемый, жизнеспособный продукт.

Да, явный подход кажется более естественным — это то, что мы видим и контролируем. Но неявная сетка предлагает огромные возможности. Она приходит на помощь, когда в интерфейсе появляется дополнительный контент, позволяя лейауту на ходу адаптироваться к изменениям. Таким образом, ваш дизайн может выглядеть идеально в Figma, но вести себя иначе в браузере, потому что браузер заполняет пробелы за вас.

Вот почему так важно знать об этих особенностях. Дело не только в том, как выглядят элементы, но и в том, как они масштабируются и реагируют на реальные взаимодействия. Неявная сетка может влиять на отступы, выравнивание и общее поведение, что не всегда очевидно, пока вы не зайдете в браузер.

Запомните: проектирование лейаута — это не просто визуальная задача, это пространство между дизайном и разработкой. Общайтесь не только со своим Figma-файлом. Поговорите с разработчиками. Именно тогда произойдет настоящее волшебство. ✨