Последнее время из каждого утюга кричат по технологии будущего - что Chat GPT может писать код вместо программистов, а MidJourney создавать интерфейсы вместо дизайнеров. Мы полезли в Community фигмы, а там по запросу Figma to Code больше сотни плагинов, которые обещают сгенерировать чистый работающий код на основе ваших макетов и за пару кликов создать готовое web-приложение вместо ваших frontend-разработчиков. Все это звучит вдохновляюще, но так ли это на самом деле?
Аналитических материалов, сравнивающих наиболее удачные плагины или библиотеки, нам найти не удалось. Поэтому мы решили разобраться в этом вопросе самостоятельно и хотим поделиться результатами.
Возможно ли экспортировать макеты из Figma в готовое React приложение?
Чтобы разобраться на что реально способны инструменты для генерации кода из макетов, надо потратить кучу времени, сил и не сойти с ума. Поэтому давайте для начала разберемся, а что нам это даст, если отбросить хайп и всеобщее воодушевление:
Мы подумали, что если получится, можно прийти и сказать - теперь, друзья, мы будем отдавать в разработку не просто фигму, а готовые страницы интерфейса. Осталось подключить АПИ и можем отмечать сдачу проекта. Это конечно фантазии, но приятные.
Когда мы рисуем макеты мобилки, всегда смотрим их прямо на телефоне через Figma Mirror, потому что в реальной среде сразу понятно где у тебя проблемы. А вот десктопные версии можно полноценно оценить только после верстки, тогда уже бывает немного поздно вносить серьезные изменения.
Может другим так не везет, но нам иногда попадаются заказчики, которые говорят, что в фигме этот шрифт выглядит иначе, а вот этот ваш красный в браузере какой-то не красный. И они отчасти правы - реальные носители отображают иначе.
Иногда нужно быстренько собрать какой-то лендинг. Для этого раньше мы пользовались тильдой и к слову сказать, верстка в зеро-блоках и хитрые эффекты требуют там хорошей сноровки. Кроме того, основной наш инструмент все таки фигма - и если для сборки сайта оттуда никуда уходить не надо, то что может быть лучше.
С мотивацией разобрались. Теперь давайте сформулируем, каким требованиям должен соответствовать экспортируемый код, чтобы действительно помогать и упрощать этап разработки фронтенда.
Итак, внимание - Задача
Сформировать прямо из Figma код на React:
c использованием design tokens;
с использованием компонентов и nested структуры;
с учетом разных состояний и свойств компонентов (variants);
с учетом адаптивности;
в инструменте, который осилят обычные дизайнеры (без навыков программирования);
за адекватные деньги.
Спойлер: для тех, кому не хочется вникать в детали — выводы можно сразу почитать в конце статьи.
Исследование
Мы сравнивали наиболее популярные инструменты для генерации кода из Figma.
Все эти инструменты можно условно поделить на два типа:
Plugin only - запускается в Figma и прямо в окошке генерит код, который вы можете копировать или загрузить себе.
Plugin + Web app. Плагин экспортирует макеты в веб-приложение, где вы видите свои ожившие дизайны и сгенерированный код. Возможности веб-приложений и принципы работы разные, об этом поговорим ниже.
Что мы проверяли:
Экспортирует код в React.
Экспортирует design tokens (достаточно типографики и палитры).
Создает компоненты, которые есть в макетах и/или дает возможность создавать/редактировать их вручную в приложении после экспорта.
Поддерживает variants (множественные состояния) для компонентов.
Дает возможность настроить props и bindings, в том числе не только для слоев, а еще и для состояний.
Поддерживает переходы между страницами, ссылки, модальные окна.
Можно синхронизировать обновления из Figma.
Инструменты первого типа plugin only в основном генерят html+css, но есть и те, что умеют в React, Vue, Flutter, Swift и тд. Но конечно, речи в таких случаях не идет о компонентах, состояниях и всей прочей магии. Тем не менее мы попробовали сгенерить и проверить код в песочницах. Для простых формочек получается вполне похожая картинка. Нашу задачу это не решает, но кому-то может быть полезно.
С инструментами типа “Plugin + Web app” поинтереснее, тут мы встречаем большую вариативность по реализации:
Какая часть работы может выполняться в самом плагине на стороне Figma и какая часть в веб-приложении. Здесь можно встретить варианты с одной “зеленой кнопкой” Export и варианты, где адаптив, переходы, структура контейнеров, интерактивные компоненты, анимация, загрузка, превью и даже публикация на сайт выполняется в Figma.
Анализ экспортируемых макетов. Очевидно, что макеты должны удовлетворять некоторым условиям для того чтобы быть максимально эффективно интерпретированы в код. Интерпретатор как-то должен понять или додумать, где собрать flexbox, где stack, где grid, а где надо сделать абсолютное позиционирование или закрепить элемент. Некоторые пишут рекомендации в гайдах, некоторые не пустят тебя редактировать макет пока ты не разметишь все слои в понятные браузеру структуры. Кто-то правит(=ломает) твои макеты, кто-то обводит в твоих макетах непонятные слои красный рамочкой и пишет рекомендации - вот тут у тебя не хватает Autolayout, а здесь надо преобразовать группу во фрейм, а тут растрировать картинку (хотя это уже лишнее :)) Встречаются даже такие, которые применяют AI и сами, например, создают компоненты даже там, где дизайнер их не предусмотрел - круто конечно, но этот тот случай когда лучше не стоило так заморачиваться.
Гибкость и разнообразие настроек в веб-приложении тоже сильно разнится. Есть очень минималистичные, где ты вообще ничего не можешь уже поменять, даже если очень надо. А есть такие, где количество настроек просто зашкаливает и надо сильно постараться чтобы разобраться. Такие мы помечали как не User friendly, рассчитывая на то, что все таки ищем инструмент для дизайнера, а не для разработчика и хотелось бы чтобы ему не пришлось осваивать новую профессию.
Очень хромает везде работа с компонентами, они почти везде есть, но в очень упрощенном виде. Чего уж говорить про вариативность компонентов и попытки настроить props чтобы потом передавать в эти компоненты не только отображаемый контент, а еще и контекст типа статуса, типа - всего что мы бережно называем variants в фигме.
Результаты исследования мы собрали в сравнительную таблицу:
Останавливаться на конкретных инструментах здесь не будем, чтобы никого не обидеть и не рекламировать. Кроме того, информации очень много для статьи. Если Вам хочется обсудить конкретику - пишите в комментариях, мы с удовольствием поделимся своим мнением.
А теперь перейдем к выводам.
Выводы
Выгрузка макетов страниц из Figma целиком, с адаптивом, переходами между страницами и чтобы не нужно было тратить массу времени на настройку и выравнивание страниц возможна. Для этого не обязательно обладать знаниями frontend-разработки и ваши макеты за короткое время превратятся в живой сайт. НО! Это подойдет для интерактивных прототипов, тестирования интерфейса и несложных сайтов. С такими задачами легко и максимально просто справляться с помощью Anima, Framer, Builder.io. Неплохо получается у Teleport.HQ и PXCode - но с ними придется повозиться побольше и дизайнеру там понадобится разобраться в предметной области верстальщика.
Для разработки UI более сложных приложений и сервисов выгрузка страниц целиком лишена смысла, потому что генерируемый код, как говорят разработчики, проще выбросить и написать заново. Если посадить разработчиков в веб-приложение такого инструмента сразу после экспорта, где он сможет более менее настроить верстку и элементы, то будет чуть лучше. Но тогда получается мы имеем третий инструмент, в котором еще нужно научиться работать и не все гладко. Увы, пока это так, но мы верим, что в будущем ситуация поменяется.
В процессе изучения инструментов для экспорта из Figma в код мы пришли к тому, что наиболее перспективным для нас направлением является выгрузка отдельных компонентов из Figma в React Components. Затем донастройка props и bindings. Мы пока взяли в работу Quest - нам показался он наиболее продвинутым, гибким и там есть хорошая документация. Сейчас наша цель разобраться и научить дизайнеров работе с инструментом, чтобы мы могли выдавать в разработку набор реальных React-компонентов. Затем хотим организовать процесс автоматического обновления кода по изменениям в макетах: когда дизайнер меняет макеты, нажимает кнопку “сгенерить код” и у разработчиков появляется новая верстка, которая без доработок заливается в код приложения. Иными словами хотим разгрузить программистов в тех случаях, когда изменения касаются только дизайнов.
Если у нас все получится или мы разочаруемся и решим пилить свой инструмент, расскажем в следующих сериях.
PS ????????????
Друзья, открытый вопрос! А вы пользуетесь подобными инструментами, как и для чего?