Figma в CSS: практическое руководство по конвертации

Короткий ответ: конвертация Figma в чистый CSS означает перевод Auto Layout во Flexbox, преобразование каждого значения заливки/отступа/типографики в его реальное число вместо приближения через утилитарный класс, а также сохранение результата без каких-либо зависимостей. Это правильный выбор, если вам нужен полный контроль над каждым правилом и вы не хотите изучать, устанавливать или переопределять фреймворк.

Почему выбирают чистый CSS вместо фреймворка

Каждый формат вывода, который поддерживает MarkupGen — обычный CSS, Tailwind, Bootstrap, Bulma — берёт начало из одного и того же источника: реальной структуры и значений фрейма Figma. Чистый CSS — это просто формат, между которым и браузером нет ничего лишнего:

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

Компромисс — это как раз то, для решения чего существует Tailwind: без фреймворка, навязывающего единую шкалу, значения отступов и цветов могут разъезжаться по мере роста кодовой базы, если никто не следит за повторным использованием одних и тех же чисел. Для одной посадочной страницы или небольшого сайта это редко становится проблемой. Для крупного продукта с большим количеством участников стоит прочитать Vanilla CSS против Bootstrap и Tailwind, прежде чем принимать решение.

Что на самом деле нужно конвертировать

Фрейм Figma несёт больше структуры, чем кажется на первый взгляд, и каждая её часть соответствует конкретному элементу CSS:

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

Как MarkupGen генерирует CSS

Рабочий процесс одинаков для всех форматов вывода и состоит из четырёх шагов: экспортируйте фрейм из Figma с помощью плагина MarkupGen, который захватывает структуру, стили и изображения вместе; ИИ строит разметку на основе этой реальной структуры, а не приближения по изображению; при необходимости доработайте контент, шрифты или раскладку во встроенном редакторе; экспортируйте итоговый пакет.

Применительно к чистому CSS это означает, что сгенерированная таблица стилей использует реальные значения цвета и отступов фрейма, а не привязывает их к предопределённой шкале фреймворка — заливка со значением #3B82F6 выйдет именно такой, а не ближайшим синим цветом из палитры Tailwind. Auto Layout автоматически преобразуется в структуру Flexbox (полный разбор соответствия свойств см. в статье Auto Layout в CSS), а адаптивное поведение генерируется на основе ограничений масштабирования фрейма, а не добавляется отдельным ручным этапом. По умолчанию выходной HTML отдаёт предпочтение семантическим элементам, а не вложенным <div>, что важно не только для доступности и SEO, но и для удобства последующей поддержки кода.

Превращение переменных Figma в CSS custom properties

Переменные Figma (цвета, типографика, отступы, радиусы, эффекты) — это самое близкое, что есть в файле дизайна к дизайн-системе, и концептуально они соответствуют CSS custom properties — блоку :root с парами --имя: значение, на которые может ссылаться любое правило в таблице стилей. Как отмечено выше, сегодня вывод CSS в MarkupGen разрешает каждое свойство в буквальное значение для конкретного элемента, а не автоматически создаёт этот слой переменных :root, поэтому построение такого соответствия — ручной шаг. Впрочем, он механический, если знать паттерн:

Соглашение об именовании, которого стоит придерживаться: отражайте собственную структуру группа/имя переменной Figma (color/primary → --color-primary), а не изобретайте параллельную, чтобы обе оставались легко сопоставимыми по мере развития дизайна. Как только переменные существуют в виде custom properties, замените сгенерированные буквальные значения в экспортированном CSS на ссылки var(--color-primary).

Два ограничения, о которых стоит знать перед тем, как полагаться на этот подход: не каждая переменная Figma чисто соответствует одному свойству CSS — переменная, используемая и для цвета границы, и для цвета текста в разных местах дизайна, не обязательно должна оставаться связанной в коде, если их назначения на самом деле различаются. И адаптивные переменные (значение отступа, меняющееся между точками останова) нужно переобъявлять внутри каждого соответствующего media query, поскольку одно custom property в :root не может одновременно хранить более одного значения — пофреймовые макеты Figma для разных брейкпоинтов не разрешаются автоматически в адаптивные переопределения CSS, основанные на каскаде.

Проверка сгенерированного CSS перед публикацией

• Проверьте на расхождения значений. Без утилитарной шкалы, обеспечивающей единообразие, ищите почти одинаковые значения (padding: 15px рядом с padding: 16px в другом месте), которые, вероятно, должны быть одним и тем же числом.
• Подтвердите адаптивное поведение на реальных точках останова, а не только при размере фрейма по умолчанию — измените размер окна браузера, а не полагайтесь на один скриншот.
• Посмотрите на имена классов/селекторов, если в проекте есть собственное соглашение об именовании (BEM, CSS Modules и т. д.), и скорректируйте их перед слиянием.
• Используйте встроенный редактор для правок контента или раскладки, а не редактируйте экспорт вручную, а затем экспортируйте заново, чтобы всё оставалось синхронизированным.

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

Часто задаваемые вопросы

Использует ли вывод CSS custom properties (переменные)? Вывод сфокусирован на стандартных, напрямую редактируемых правилах для каждого элемента, а не на слое темы, управляемом переменными — если в вашем проекте используется система custom properties, запланируйте перенос сгенерированных значений в неё как отдельный ручной шаг.

Адаптивна ли раскладка по умолчанию? Да — точки останова генерируются на основе ограничений масштабирования Auto Layout фрейма, а не добавляются постфактум. О том, как это работает для отдельных мобильных/десктопных макетов, см. Адаптивный дизайн в Figma: мобильные и десктопные макеты.

Чем это отличается от вывода в Tailwind? Исходные данные одни и те же, различается только результат: вывод Tailwind сопоставляет значения с ближайшим подходящим утилитарным классом (с запасным вариантом произвольного значения для всего, что выходит за пределы шкалы); вывод в чистый CSS сохраняет точные значения дизайна как стандартные объявления. Выбирайте, исходя из того, стандартизирован ли ваш проект уже на утилитарном фреймворке.

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

Если вы выбираете между экспортом в чистый CSS и вариантом на основе фреймворка, быстрее всего понять, что подходит, увидев оба варианта на одном и том же дизайне. Попробуйте MarkupGen бесплатно или получите полное пошаговое руководство в статье Руководство по конвертации Figma в HTML. Хотите сначала краткий обзор? Загляните на страницу конвертера Figma в CSS.