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

Tailwind CSS — один из самых частых целевых форматов, который разработчики просят при передаче дизайна Figma, и в то же время один из самых трудоёмких для ручного получения. Каждое значение отступа, цвет и размер шрифта в дизайне приходится мысленно переводить в «правильный» утилитарный класс Tailwind — и именно на этом шаге перевода незаметно теряется много времени при передаче макета в разработку.

Почему ручная конвертация Figma в Tailwind настолько медленная

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

• Угадывание шага отступа. Дизайнер задал padding в 18px. Это p-4 (16px) или p-5 (20px), или нужно произвольное значение вроде p-[18px]? Умножьте это решение на каждый gap, margin и padding в файле.
• Сопоставление цветов с темой. Цветовая палитра Figma не знает о вашей палитре в tailwind.config. Значение hex нужно сверять с серыми, синими и брендовыми цветами вашей темы — иначе по кодовой базе разбросаются одноразовые классы вроде bg-[#f4f4f5] вместо bg-gray-100.
• Восстановление типографических шкал. Размеры шрифтов, межстрочные интервалы и начертания нужно последовательно сопоставлять с утилитами text-* и font-* — иначе заголовки, выглядящие одинаково в Figma, в коде окажутся собраны из трёх разных комбинаций классов.
• Повторение всего этого для каждой точки останова. Ничто из перечисленного не разовая работа — она повторяется для каждого адаптивного варианта, вручную, с добавлением префиксов sm:, md: и lg: поверх всего остального.

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

Как MarkupGen генерирует вывод в Tailwind из реального дизайна

MarkupGen создан для того, чтобы полностью убрать этот шаг перевода, а не просто ускорить его ручное выполнение. Рабочий процесс одинаков независимо от того, экспортируете ли вы в чистый CSS или в Tailwind:

1. Экспортируйте фрейм из Figma с помощью плагина MarkupGen. Он захватывает структуру, стили и изображения фрейма и отправляет их в ваше рабочее пространство.
2. ИИ строит разметку на основе реальной структуры и стиля дизайна, а не его грубого приближения.
3. Доработайте контент, шрифты и раскладку визуально во встроенном редакторе, прежде чем что-либо будет зафиксировано.
4. Экспортируйте итоговый пакет кода в выбранном вами формате.

Для этой статьи важнее всего шаг 4: когда в качестве формата вывода выбран Tailwind CSS, утилитарные классы генерируются на основе реальных токенов отступов, цвета и типографики дизайна, а не угадываются по скриншоту. Значение padding во фрейме Figma сопоставляется с ближайшей подходящей утилитой отступа Tailwind, цвет заливки сопоставляется с реальными цветовыми значениями дизайна, а размеры и начертания шрифтов переносятся в соответствующие классы text-* и font-*. Это тот же перевод, который разработчик выполнил бы вручную, только сделанный напрямую из данных дизайна, а не на глаз.

Обычные HTML/CSS и React — два других доступных формата вывода: Tailwind — лишь один из трёх вариантов, выбираемый для каждого экспорта в зависимости от того, что ожидает целевая кодовая база.

Auto Layout превращается в утилитарные классы Flexbox

В большинстве реальных файлов Figma для чего-либо похожего на компонент используется Auto Layout, поэтому то, как он переводится, важно не меньше, чем цвет и отступы. MarkupGen сопоставляет направление, gap, padding и настройки выравнивания Auto Layout с эквивалентной структурой CSS Flexbox, и в выводе Tailwind это выражается соответствующими утилитарными классами flex: направление становится подходящей утилитой flex-row / flex-col, gap становится утилитой gap-*, padding — p-* / px-* / py-*, а настройки выравнивания — утилитами items-* / justify-*. Адаптивные точки останова и гибкое поведение тоже генерируются автоматически, на основе уже заданных на фрейме ограничений масштабирования, а не добавляются отдельным ручным этапом. Подробный разбор того, как именно каждое свойство Auto Layout сопоставляется со своим эквивалентом во Flexbox, см. в статье Auto Layout в CSS.

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

Автоматическая конвертация верно подбирает утилитарные классы для подавляющего большинства дизайна, но перед слиянием всё же стоит пройтись по нему ещё раз:

• Ищите единичные, нестандартные значения. Если в дизайне использовалось значение отступа, немного отклоняющееся от шкалы Tailwind, проверьте, стоит ли подвести дизайн к стандартному шагу или сохранить точное значение.
• Проверьте согласованность цвета по всей странице, особенно там, где компонент встречается больше одного раза — один и тот же визуальный цвет везде должен приводить к одному и тому же утилитарному классу.
• Убедитесь, что иерархия заголовков и семантические теги в порядке, поскольку по умолчанию вывод генерируется как чистый, семантический HTML без лишних вложенных <div>.
• Используйте встроенный редактор, чтобы визуально скорректировать контент, шрифты или раскладку, а не редактировать экспортированные классы вручную, а затем экспортируйте заново, когда результат вас устроит.

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

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

Если вы сейчас вручную переводите значения Figma в классы Tailwind, стоит увидеть, сколько этой работы исчезает, когда классы берутся из реальных токенов дизайна, а не из догадки. Попробуйте MarkupGen бесплатно на одном из своих фреймов Figma или прочитайте общее руководство по Figma-to-HTML с полным описанием четырёхшаговой работы. Вопросы по ходу дела — на support@markupgen.com.

Хотите сначала краткий обзор, прежде чем погружаться? Загляните на страницу конвертера Figma в Tailwind CSS, чтобы узнать, что вы получаете «из коробки».