GeekyAnts представила плагин на базе React Fiber, который позволяет разработчикам переносить живые React-компоненты напрямую в редактируемые файлы Figma, обещая полноценный двусторонний процесс (round-trip) между кодом и дизайном. Инструмент решает проблему растущего «разрыва между дизайном и кодом» (design-code drift), который заставляет команды переделывать работу каждый раз, когда изменения UI пересекают границу между дизайнером и разработчиком.

Почему старый подход, ориентированный на DOM, не справляется

Традиционные инструменты импорта извлекают отрендеренный HTML Document Object Model (DOM) — плоский список тегов <div, <span и других, используемый браузером. DOM сообщает инструменту о существовании кнопки, но не может «увидеть», что эта кнопка является экземпляром общего компонента в дизайн-системе. Экспортируйте десять кнопок — и вы получите десять независимых слоев в Figma, каждый из которых оторван от мастер-компонента. Дизайнерам приходится заново создавать варианты, заново применять ограничения (constraints) и, по сути, перестраивать то, что код уже знает.

Эта потеря «интеллектуальности» компонентов создает технический долг в дизайне (design debt). Каждый раз, когда элемент UI меняется в коде, соответствующий файл Figma должен обновляться вручную, иначе два представления начинают расходиться. Это расхождение увеличивает затраты на поддержку.

React Fiber как недостающее звено

React Fiber — это внутренний движок согласования (reconciliation engine), который отслеживает имена компонентов, иерархию и состояние при рендеринге. В отличие от DOM, Fiber сохраняет семантическое значение каждого элемента UI. Читая дерево Fiber вместо HTML-вывода, инструмент может напрямую сопоставить компонент <Button> с компонентом Figma, сохраняя связь с исходным дизайн-токеном.

Плагин от GeekyAnts использует это преимущество. Он считывает React Fiber, чтобы перенести живой код в редактируемые файлы Figma. Результатом становится набор слоев, которые сохраняют свои исходные связи между вариантами.

Как работает конвейер

Процесс импорта проходит три различных этапа:

  • Variant Expander (Расширитель вариантов) — сканирует код компонента на наличие определений состояний (hover, disabled, active) и генерирует полный набор визуальных вариантов. Они объединяются в наборы компонентов Figma (Component Sets), чтобы дизайнеры могли переключать состояния, не покидая файл.
  • Layout Mapping (Маппинг макета) — переводит правила CSS Flexbox в ограничения Figma Auto Layout. Это сохраняет адаптивное поведение и позволяет дизайнерам настраивать отступы прямо в редакторе интерфейса.
  • State Triggering (Триггеры состояний) — выполняет пути кода, которые открывают модальные окна, выпадающие списки или другие динамические элементы UI, гарантируя, что плагин захватит все возможные представления.

В совокупности эти этапы создают точную, редактируемую копию живого интерфейса, а не статичный скриншот.

Формирующаяся экосистема

GeekyAnts не одинока в попытках замкнуть цикл между дизайном и кодом:

  • Anima фокусируется на обратном направлении, конвертируя дизайны Figma в код React или Vue.
  • Locofy.ai добавляет генерацию адаптивного кода из файлов дизайна с помощью ИИ.
  • Builder.io предлагает импорт HTML-в-Figma, который все еще опирается на DOM, наследуя его ограничения.
  • Codia AI преобразует веб-элементы в структурированные файлы Figma.

Что отличает подход на базе Fiber, так это понимание семантики компонентов, которого не хватает инструментам, ориентированным на DOM.

Кто выигрывает, а кто проигрывает

Автоматизированный подход, учитывающий компоненты, снижает технический долг в дизайне.

За чем следить дальше

Основное обещание очевидно: смещая фокус импорта с DOM на React Fiber, такие инструменты, как плагин GeekyAnts, дают дизайнерам живое, учитывающее компоненты представление рабочего UI. Этот сдвиг может, наконец, устранить давний разрыв между дизайном и кодом, превратив то, что раньше было дорогостоящей и подверженной ошибкам передачей макетов (hand-off), в плавный двусторонний рабочий процесс.