Дизайн-токены Figma в Tailwind: цвета, типографика и отступы

Короткий ответ: значение цвета, текста или отступа из Figma сопоставляется с Tailwind путём сравнения с собственной шкалой утилит Tailwind — ближайшим шагом отступа, ближайшим цветом, подходящим размером текста. Когда значение не попадает в эту шкалу, вывод переходит на класс с произвольным значением вроде bg-[#f4f4f5], вместо того чтобы изобретать новый цвет темы, которого нет в вашей конфигурации.

Что такое «дизайн-токены» в файле Figma, конкретно

Прежде чем сопоставление обретёт смысл, полезно чётко определить, что считается токеном, а что — разовым значением в Figma:

• Цветовые стили — сохранённая, именованная заливка (например, «Gray/100»), применяемая последовательно по всему файлу, в отличие от исходного hex-значения, выбранного один раз и больше нигде не используемого.
• Текстовые стили — сохранённая комбинация шрифта, размера, начертания и межстрочного интервала, последовательно применяемая к заголовкам или основному тексту.
• Значения отступов — обычно не «сохраняются» как стиль тем же образом, но представляют собой согласованные числа промежутков/отступов Auto Layout, повторяющиеся во фреймах.

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

Как значения приводятся к шкале Tailwind

Ценностное предложение Tailwind — это ограниченная, заранее заданная шкала для отступов, цвета и типографики, а не открытая палитра. Приведение к этой шкале означает сопоставление, а не изобретение:

Это осознанное решение: вывод Tailwind от MarkupGen сопоставляется с реальной стандартной шкалой Tailwind, а не генерирует кастомную тему tailwind.config, чтобы насильно «подогнать» каждое значение. Это делает вывод честным по отношению к реальным значениям дизайна — цвет вне шкалы отображается как класс с произвольным значением, что является заметным сигналом о том, что стоит уточнить у дизайнера, не нужно ли сдвинуть его на общую палитру, а не тихой ошибкой округления.

Что это значит при проверке экспорта

• Классы с произвольными значениями — это сигнал, а не баг. Скопление классов bg-[#...] в выводе обычно означает, что в самом дизайне есть почти одинаковые разовые цвета, которые стоит объединить в общие стили — об этом стоит сообщить дизайнеру, а не «исправлять» только в коде.
• Проверьте согласованность отступов в повторяющихся компонентах, поскольку шкала Tailwind округляет каждое значение независимо — один и тот же визуальный промежуток в двух разных фреймах должен приводиться к одному и тому же классу, если в дизайне использовалось одно и то же число.
• Если в проекте уже есть тема tailwind.config, сверьте сгенерированные произвольные значения с ней — цвет, который кажется вне шкалы стандартной палитры Tailwind, может уже быть именованным цветом в вашей собственной конфигурации, который стоит подставить вручную.

Полный рабочий процесс — экспорт из плагина, генерация ИИ, редактирование, выбор формата вывода — описан в статье Figma в Tailwind CSS: практическое руководство по конвертации.

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

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