Как я пытаюсь выстроить связку Figma + Claude (часть 1)
Мечта любой команды разработки сейчас — автоматизировать сборку дизайна с помощью LLM, чтобы ускорить delivery-процесс. Я видел несколько разных подходов, но в итоге пришёл к чему-то, что, как мне кажется, должно сработать удобно
Рассказываю на примере проекта, где я на фрилансе (oversecured.com)
Дано:
- legacy-архитектура фронта, которую сложно масштабировать с LLM-кой
- отсутствие части макетов в Figma + неактуальность макетов
Что хотим:
- заиметь макеты в Figma, которые выступают как источник правды
- можно дать ссылку на макет, и LLM (Codex/Claude) его соберёт
- UI-kit/дизайн-система, которая полностью совпадает в Figma/code
Как мы решили это сделать:
1. Подключаем для кода open-source библиотеку компонентов shadcn (
https://ui.shadcn.com/create). Компонентов там достаточно много + они гибкие (можно внутрь прокидывать много свойств). Это наша база, из которой мы будем собирать весь фронт
2. Берём для этой же библиотеки какой-то из Figma-файлов (вот здесь (
https://ui.shadcn.com/docs/figma) есть несколько ссылок на файлы community, на них ссылается сам shadcn). Это наша вторая база, из которой мы будем собирать все макеты в Figma
Мы пока не придумываем дизайн и не собираем компоненты с нуля, чтобы ускориться на старте, — просто берём готовое решение.
3. Начинаем собирать макеты в Figma из компонентов, которые мы взяли в community. На скрине — дизайн
4. Дальше через Figma MCP мы можем отдавать нашему AI-агенту ссылку на макет и просить собрать дизайн с помощью компонентов shadcn (можно также использовать shadcn MCP (
https://ui.shadcn.com/docs/mcp))
Для тех, кто еще не знает: MCP — это протокол, через который LLM общается с внешними тулами вроде Figma. Важно здесь отловить одну вещь: AI-агент должен вытаскивать из Figma не скриншот макета, а структуру страницы (для этого используются разные методы).
И всё — это работает. Простые страницы уже собираются верно на 95–100%, страницы посложнее пока тестируем
Первая задача — актуализировать весь фронт на новых гибких компонентах. Во второй части (когда я к ней подойду) я хочу иметь возможность стилизовать компонент в Figma и стащить дизайн на фронт, чтобы в коде он тоже стилизовался
В теории, проблемы тут быть не должно, потому что мы взяли в коде и в Figma одинаковую семантику токенов (и там и там shadcn) — то есть цвет в коде и цвет в Figma называются одинаково, например surface-default-100
Я уже предвижу некоторую сложность со стилизацией и со сборкой сложных экранов, так как в Figma компонент не всегда соответствует по пропсам тому, что есть на фронте в библиотеке shadcn (часть свойств может отсутствовать, часть — называться иначе). Тут потребуется немного ручной настройки и тюнинга компонентов в Figma
Часть 2 напишу, когда подойду к ней!
