Брейкпоинты Figma в CSS-медиазапросы: как работает сопоставление

Короткий ответ: в Figma нет встроенного понятия брейкпоинтов в том виде, в каком оно есть в CSS. Дизайнеры имитируют адаптивность с помощью отдельных фреймов для каждого размера экрана либо с помощью гибкого изменения размера в Auto Layout (fill/hug), которое вообще не требует медиазапроса. То, какой подход использовался в дизайне, определяет, нужны ли выводимому CSS явные правила @media или нет.

В Figma на самом деле нет брейкпоинтов

Стоит сказать это прямо, потому что это распространённое заблуждение: в Figma нет встроенной функции «задать здесь брейкпоинт», сравнимой с CSS-медиазапросом. То, что дизайнеры на самом деле делают вместо этого, укладывается в два паттерна, и они конвертируются в CSS совершенно по-разному.

Паттерн 1: отдельные фреймы для каждого размера экрана

Традиционный подход — отдельный фрейм для десктопа, планшета и мобильного устройства, каждый свёрстан вручную под свою ширину. Это напрямую сопоставляется с явными CSS-брейкпоинтами: вёрстка каждого фрейма превращается в стили внутри соответствующего блока @media (min-width: ...), а задача разработчика — определить, где именно должны находиться значения брейкпоинтов (совпадающие с шириной фреймов или стандартные брейкпоинты вроде 768px/1024px), поскольку ширина фрейма в Figma — это округлённое дизайнерское решение, а не спецификация CSS.

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

Паттерн 2: гибкое изменение размера через Auto Layout — часто без медиазапросов

Второй паттерн опирается на поведение изменения размера в Auto Layout — «заполнить контейнер» и «обхватить содержимое» — заданное для одного фрейма, вместо перерисовки всей вёрстки под каждую ширину. Ряд карточек, настроенный на перенос строк и заполнение доступного пространства, боковая панель фиксированной ширины рядом с областью основного контента, настроенной на «заполнение», текст, естественно перетекающий внутри гибкого контейнера, — ничему из этого брейкпоинт не нужен. Это то же поведение CSS, которое дают flex-wrap, процентная ширина и min-width/max-width без единого правила @media.

Об этом стоит сказать отдельно, потому что это более ценное наблюдение при проверке сгенерированного CSS: не каждая адаптивная деталь должна становиться медиазапросом. Дизайн, опирающийся на гибкое изменение размера Auto Layout, конвертируется в CSS, который естественным образом остаётся гибким в диапазоне ширин, — добавление поверх этого явных брейкпоинтов обычно означает лишнюю работу по воспроизведению поведения, которое у вёрстки уже есть.

Где ручной перевод обычно даёт сбой

• Добавление брейкпоинтов там, где гибкий CSS уже всё покрывает, в результате чего правил @media получается больше, чем реально нужно дизайну, а таблица стилей становится сложнее поддерживать, чем того требует вёрстка.
• Пропуск реального брейкпоинта, когда у дизайна действительно есть структурно другой мобильный фрейм, и попытка заставить десктопную вёрстку перестроиться во что-то, для чего она никогда не проектировалась.
• Выбор произвольных пиксельных значений брейкпоинтов, которые не совпадают ни с шириной фреймов самого дизайна, ни с существующей шкалой брейкпоинтов проекта, создавая разовое значение, которое больше нигде в CSS проекта не используется.

Как это обрабатывает MarkupGen

Адаптивное поведение генерируется на основе реальных ограничений изменения размера фрейма, а не добавляется отдельным ручным проходом — настройки fill/hug из Auto Layout автоматически преобразуются в гибкий CSS, то же самое различие, что описано выше. Для дизайнов, где действительно существует другая мобильная вёрстка (или её нужно сгенерировать из одного десктопного фрейма), MarkupGen может создать отдельную сгенерированную ИИ мобильную или десктопную вёрстку — подробнее о том, как это работает, смотрите в статье Адаптивный дизайн в Figma: мобильные и десктопные макеты. О сопоставлении Auto Layout с Flexbox, которое лежит в основе всего этого, смотрите в статье Auto Layout в CSS.

Попробуйте на своём дизайне

Самый быстрый способ понять, какой паттерн действительно нужен вашему дизайну, — прогнать его через сервис и проверить сгенерированный CSS на наличие правил @media — или их отсутствие. Попробуйте MarkupGen бесплатно на своём файле Figma, или посмотрите страницу конвертера Figma в HTML, чтобы узнать, что в неё входит.