Гайд

Figma в HTML: какие есть способы и как обойтись без конвертации

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

Baurice Ley · 6 мин чтения

Почему Figma в HTML никогда не делается в один клик

Фрейм в Figma это векторный рисунок. Текст, отступы и раскладку рассчитывает Figma, а не браузер. Чтобы получить веб-страницу, кто-то должен перевести этот рисунок в HTML-элементы и правила CSS, а при любом переводе принимаются решения, которых вы не принимали.

Auto layout близок к flexbox, но не совпадает с ним один в один. Constraints превращаются в правила позиционирования. Шрифты отрисовываются иначе. Поэтому результат обычно приходится дорабатывать перед релизом.

Способ 1: плагин для Figma

В Figma Community есть несколько плагинов для перевода Figma в HTML, а инструменты вроде Anima превращают фреймы в HTML, React или Tailwind. У Framer есть плагин, который вставляет фреймы из Figma во Framer и публикует их там.

  • Подходит для: быстрого первого черновика статичной страницы.
  • Обратите внимание: сгенерированные имена классов, абсолютное позиционирование и разметка, которую придётся переписать под вашу кодовую базу.

Способ 2: ИИ-инструмент «из дизайна в код»

Figma Make генерирует HTML, CSS и JavaScript из фреймов, и всё больше ИИ-инструментов читают дизайн и пишут компоненты под ваш стек.

  • Подходит для: быстрого получения компонентов в вашем фреймворке.
  • Обратите внимание: дизайн и код расходятся, как только меняется что-то одно.

Способ 3: сверстать вручную

До сих пор самый распространённый вариант. Разработчик изучает дизайн, снимает размеры и пишет HTML и CSS. Результат чистый, но это второй проект, и каждое изменение дизайна означает, что часть работы придётся делать заново.

Способ 4: проектировать в HTML с самого начала

Проблема конвертации исчезает, когда холст уже является веб-страницей. В Kalka каждый фрейм это HTML-элемент, а каждое свойство в панели дизайна это объявление CSS. Экспортировать нечего, потому что нечего переводить.

Auto layoutdisplay: flex
Заливкаbackground
Теньbox-shadow
Обрезка содержимогоoverflow: hidden

На выходе вы получаете папку: pages/home.html, styles.css и дизайн-токены в design-system/tokens.json. Разработчик может открыть её в любом редакторе, посмотреть изменения в Git и подключить к настоящему сайту.

Какой способ подходит вам

  • Один лендинг, один раз: хватит плагина.
  • Продукт с компонентами на React или Vue: ИИ-инструмент «из дизайна в код» плюс ревью.
  • Сайты, которые вы проектируете и запускаете снова и снова: проектируйте в HTML и полностью пропустите этап конвертации.

Kalka в разработке, код открыт. Если четвёртый способ похож на ваш рабочий процесс, запишитесь в лист ожидания, чтобы получить первые сборки.