Figma Make наконец стал настоящим инструментом дизайн-в-код

Коротко: Figma Make теперь выдаёт код, который фронтенд-инженер не выбросит с первого взгляда. Именно поэтому дизайнеры и говорят о нём, и это куда весомее очередного точечного ускорения.

18 июня Figma выпустила обновление Make production-уровня. Главное не в том, что оно быстрее. Главное — точность. Make теперь экспортирует компоненты, привязанные к реальным дизайн-токенам и маппингам Code Connect, а не разрозненную одноразовую разметку, которую выдавал раньше.

Разница между трюком и инструментом именно в этом. Код, который выбрасывают, выбрасывают. Код, который ссылается на вашу систему, мерджат.

Диффы, которые постят все

Посмотреть на figma.com

Обновление вырвалось из-под контроля, потому что люди начали показывать доказательства. Ветка анонса @figma набрала около 9,2 тыс. репостов за считанные дни, а в ответах появились сравнительные Figma-to-React диффы от команд, запустивших его на своих системах.

Вот что действительно важно заметить. Самый громкий сигнал — не маркетинговые тексты Figma, а инженеры, постящие диффы до и после и не проклинающие результат. Когда скептики замолкают, что-то изменилось.

Дизайнеры слышат обещания «дизайн в код» уже десять лет. Обещание всегда разбивалось о реальную кодовую базу, потому что результат игнорировал систему, на которой эта база построена. На этот раз диффы выживают при встрече с реальностью.

Что реально изменилось (токены и Code Connect, а не сырой hex и разметка)

Посмотреть на figma.com/make

Старый Make читал фрейм и описывал то, что видел. Видел синюю кнопку — писал #2D7FF9. Видел отступ — писал пиксельное значение. Результат выглядел правильно и ни к чему не был подключён.

Новый Make читает тот же фрейм и разрешает его относительно вашей системы. Синяя кнопка компилируется в ссылку на токен, а не в замороженное hex-значение. Компонент компилируется в ваш реальный маппинг Code Connect, поэтому указывает на настоящий компонент в кодовой базе, а не изобретает новый.

Весь сдвиг — в одном предложении. Экспорт перестал описывать пиксели и начал ссылаться на ваш источник истины.

Почему это важно на практике: ссылки на токены означают, что ваш код наследует изменения темы автоматически. Измените токен — каждый экспорт подтянется. Маппинги Code Connect означают, что экспорт переиспользует Button, которую ваша команда уже поддерживает, вместо того чтобы порождать почти-дубликат, который поплывёт, как только кто-то его тронет.

Вывод старого Make против обновления от 18 июня

Вот сравнение, потому что сравнение — это и есть аргумент.

Правый столбец — единственный, который заслуживает место в pull request. Левый столбец — причина, по которой никто не доверял «дизайн в код» до сих пор.

Где всё ещё нужен человек

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

Вёрстка, токены и статические заготовки компонентов выходят чистыми. Всё, что требует решения, по-прежнему требует вас. Экспорт не знает, как должно ощущаться состояние загрузки, что происходит при ошибке и должен ли пустой экран подталкивать или извиняться.

Доступность заслуживает отдельной строки. Make может проставить атрибуты alt и псевдосемантические теги, но не может решить порядок фокуса, объявить живой регион или понять, что вашему модальному окну нужно захватить фокус и вернуть его. Это решения о том, как человек перемещается по вашему интерфейсу, а суждение не включено в экспорт.

Реальные данные — другой тихий убийца. Фрейм показывает одну идеальную строку. Прод показывает пользователя с именем в 40 символов, цену, равную null, и список, пустой в первый день.

Make делает каркас для счастливого пути. Реальность обрабатываете вы.

Разумный рабочий процесс с Figma Make на этой неделе

Не нужно перестраивать весь процесс. Нужно вставить Make в нужное место и оставить человека на стыках. Вот версия, которую можно запустить на реальном компоненте уже на этой неделе.

1. Сначала по-настоящему замапьте токены и Code Connect. Это неблагодарная, но обязательная предпосылка. Make настолько хорош, насколько хороша система, на которую он ссылается. Если ваши токены наполовину без названий, а покрытие Code Connect скудное, исправьте это, прежде чем винить экспорт.
2. Запустите Make на одном хорошо построенном компоненте, а не на целом экране. Выберите что-то с чёткой структурой и чистой токен-историей. Вы тестируете точность, а не просите о чуде.
3. Читайте дифф как code reviewer, а не как фанат. Убедитесь, что он разрешился в ссылки на токены и замапился на ваш реальный компонент. Если он придумал hex-значение или дубликат компонента, этот фрейм не был системно чистым. Исправьте источник.
4. Передайте каркас инженеру, чётко отметив, что работа с состояниями, данными и доступностью — его. Экспорт — это начальная структура. Решения — это работа.
5. Верните то, что узнали, обратно в систему. Каждое место, где Make угадывал, — это место, где ваши токены или маппинги Code Connect были неоднозначны. Уточнение их делает следующий экспорт лучше. Система накапливает эффект.

Шаблон — человек в контуре, а не человек вне работы. Make убирает утомительный этап перевода. Мышление он не убирает.

Как это меняет ваш результат

Посмотреть на atlassian.design

Это тихо меняет то, что значит «готово» для дизайнера. Годами результатом был попиксельно точный фрейм и вежливая надежда, что разработка его повторит. Соответствие всегда было с потерями.

Теперь фрейм ближе к контракту. Если ваш дизайн ссылается на реальные токены и компоненты маппируются через Code Connect, экспорт переносит ваш замысел в код с меньшим отклонением. Передача перестаёт быть переводом и становится переносом.

Это повышает ценность системной работы и снижает ценность красивых скриншотов. Выиграют в следующем году те дизайнеры, чьи файлы достаточно структурированы, чтобы Make давал чистый вывод. Беспорядочный файл быстрее производит беспорядочный код, тогда как дисциплинированная система производит наследуемый код.

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

Часто задаваемые вопросы

Обновление от 18 июня меняет реальные ответы на вопросы, которые дизайнеры чаще всего задают о Figma Make.

Пишет ли Figma Make готовый к продакшну React сейчас?

Ближе, но не самостоятельно. Обновление производит React, подключённый к реальным токенам и маппингам Code Connect, что надёжно и стоит сохранять. Состояния, доступность и реальные данные всё равно остаются на вас. Относитесь к нему как к сильному черновику, а не к готовой фиче.

Что такое Code Connect и почему это важно для экспорта?

Code Connect маппирует компонент в вашем файле Figma на реальный в кодовой базе. Разница между тем, чтобы Make изобрёл новую кнопку, и тем, чтобы Make переиспользовал Button, которую ваша команда уже поддерживает: экспорт указывает на ваш источник истины вместо того, чтобы порождать дубликат.

Использует ли Make мои дизайн-токены или изобретает свои значения?

Он использует ваши токены — это суть изменений от 18 июня. Старые экспорты зашивали сырой hex прямо в разметку. Обновление разрешает значения в ссылки на токены, поэтому ваш код наследует изменения темы вместо того, чтобы замораживать снимок. Сырой hex в выводе означает, что этот фрейм никогда не был привязан к токену.

Где Make всё ещё не хватает?

Пять мест по-прежнему требуют человека — те же, что и в таблице выше:

• Логика состояний: загрузка, ошибка, пустой экран, успех
• Поведение взаимодействий и анимации
• Доступность за пределами очевидного
• Реальные данные, граничные случаи и длинные строки
• Когда переиспользовать компонент, а когда создавать новый

Make берёт на себя вёрстку, стилизацию на токенах и статические каркасы. Там, где нужны суждения, живёт настоящая работа.

Стоит ли менять рабочий процесс на этой неделе?

Да, в одном небольшом месте. Запустите Make на одном чистом компоненте, просмотрите дифф как инженер и используйте то, что он показывает, чтобы уточнить токены и покрытие Code Connect. Не переводите всю команду на передачу через ИИ за одну ночь.

Итог

Figma Make пересёк черту от демо к инструменту 18 июня. Доказательство — не около 9,2 тыс. репостов в ветке анонса @figma, а продакшн-диффы, которые инженеры опубликовали под ним и не удалили.

Механизм прост. Make перестал описывать пиксели сырым hex и одноразовой разметкой и начал ссылаться на реальные токены и маппинги Code Connect. Это разница между кодом, который выбрасывают, и кодом, который мерджат.

Не преувеличивайте для своей команды. Make строит скелет. Состояния, взаимодействия, доступность и граничные случаи по-прежнему ваша работа, и всегда будут. Умнейший шаг на этой неделе — использовать обновление как повод наконец привести в порядок токены и Code Connect, потому что именно чистая система превращает эту фичу из игрушки в инструмент, с которым можно реально поставлять.