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

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

Почему ручная конвертация Figma в Bulma происходит медленно

Сетка Bulma на основе flexbox (columns, column, модификаторы размера is-*) читается просто, когда уже написана, но путь от фрейма Figma до этой разметки вручную включает ту же однообразную переводческую работу, что и для любого другого фреймворка:

• Сопоставление Auto Layout с колоночной системой Bulma. Ряд элементов с равномерными промежутками в Figma нужно превратить в правильную комбинацию columns, column is-half/is-one-third и обработки промежутков — определяемую на глаз, фрейм за фреймом.
• Выбор правильных классов-модификаторов. Bulma выражает большую часть стилей через модификаторы (is-primary, is-rounded, is-large), поэтому разработчику приходится переводить цвет заливки или радиус скругления в Figma в «ближайший подходящий модификатор Bulma», а это не всегда чистое однозначное соответствие.
• Восстановление типографики и отступов с использованием собственной шкалы Bulma (title, subtitle, хелперы mb-*/mt-*) вместо прямого копирования пиксельных значений.
• Повторение всего этого для каждого брейкпоинта, поскольку адаптивные хелперы Bulma (is-hidden-mobile, изменение ширины колонок) нужно добавлять вручную для каждого размера экрана в дизайне.

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

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

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

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

Во время экспорта значения Auto Layout и отступов из Figma сопоставляются с реальными классами сетки и хелперов Bulma, а не угадываются — ряд элементов Auto Layout превращается в структуру columns/column соответствующего размера, а настройки отступов, промежутков и выравнивания преобразуются в хелперы отступов Bulma вместо инлайновых стилей. Вывод остаётся полностью без JavaScript, соответствуя собственной философии Bulma без JS, так что для корректного отображения CSS ничего дополнительно подключать не нужно.

Место Bulma среди форматов вывода MarkupGen

Bulma — один из шести CSS-таргетов, поддерживаемых MarkupGen, наряду с Vanilla CSS, Tailwind, Bootstrap, Materialize и Pico — выбирается для каждого проекта в панели настроек, а не фиксируется заранее. Это фреймворк, к которому стоит обращаться, когда нужна современная, чистая эстетика по умолчанию без необходимости внедрять полноценную компонентную библиотеку, как того потребовали бы Bootstrap или Materialize. Для сравнения всех шести фреймворков в одном месте смотрите 6 CSS-фреймворков для Figma-to-Code.

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

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

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

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

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

Если вы сейчас вручную подбираете классы-модификаторы Bulma под файл Figma, стоит посмотреть, сколько этой работы исчезает, когда классы берутся из реальных значений дизайна. Попробуйте MarkupGen бесплатно на одном из своих фреймов, или посмотрите страницу конвертера Figma в Bulma, чтобы узнать, что вы получите из коробки.