Иллюстрация 1 Збільшити

Иллюстрация 1

1. Что понадобится для работы

Claude Code можно подключить напрямую к Figma и с его помощью собрать полноценную дизайн-систему с нуля: переменные, токены, компоненты и готовые экраны. В этом гайде разберём весь процесс пошагово — от установки до финального экрана логина.

Перед началом убедитесь, что у вас есть:

Claude Code desktop app — приложение с тремя режимами: Chat, Code и Agentic.
Активная подписка Claude — бесплатный аккаунт для этого workflow не подходит.
Аккаунт Figma — с хотя бы одним открытым рабочим файлом.
Время — 30–45 минут без отвлечений для прохождения полного цикла.

Внимание

Этот workflow расходует лимиты использования Claude. Сборка сложного компонента вроде кнопки со 120+ вариантами может съесть значительную часть вашего часового лимита. Начните с более простых задач, чтобы освоиться, прежде чем браться за масштабные проекты.

Что понадобится для работы — иллюстрация 2 Збільшити

Что понадобится для работы — иллюстрация 2

2. Устанавливаем Claude Code

Перейдите на claude.ai/download и скачайте Claude Code desktop app для вашей ОС (macOS или Windows).

После установки приложение попросит пройти аутентификацию — войдите с данными вашей подписки Claude. После этого откроется интерфейс с тремя режимами:

Chat — стандартный разговорный Claude.
Code — для задач по написанию кода.
Agentic — здесь происходит основная работа с Figma.

Для работы с Figma используется режим Agentic: именно он позволяет Claude выполнять автономные действия, включая прямое взаимодействие с вашим Figma-холстом.

Что понадобится для работы — иллюстрация 3 Збільшити

Что понадобится для работы — иллюстрация 3

3. Подключаем Claude к Figma через MCP

Это ключевой шаг, который делает весь workflow возможным. Claude подключается к Figma через сервер MCP (Model Context Protocol).

Порядок подключения:

В приложении Claude Code перейдите в Settings.
Откройте раздел MCP Servers.
Нажмите «Add MCP Server».
Выберите Figma из списка доступных интеграций.
Пройдите аутентификацию через Figma-аккаунт (OAuth-флоу).
После подключения Figma появится в списке активных MCP-серверов.

Как проверить, что всё работает:

Откройте любой Figma-файл в браузере и задайте Claude простой вопрос:

text

Can you see my current Figma file? What's on the canvas?

Если Claude описывает содержимое вашего файла — соединение установлено. Если нет — проверьте конфигурацию MCP-сервера и убедитесь, что Figma-файл открыт.

Совет

Перед началом работы создайте отдельный Figma-файл или выделенную страницу внутри существующего. Это изолирует эксперименты от рабочих материалов.

Шаг 3 — Создаём полную систему переменных с помощью AI — иллюстрация 4 Збільшити

Шаг 3 — Создаём полную систему переменных с помощью AI — иллюстрация 4

4. Создаём полную систему переменных с помощью AI

Вместо того чтобы вручную создавать десятки переменных цвета, типографики и отступов, Claude собирает всю токен-архитектуру самостоятельно.

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

text

In my Figma file, create a complete design token system with the following structure: 1. Primitive Colors — create a full range of colours: grays (50–900), primary blue (50–900), secondary green (50–900), error red (50–900), warning amber (50–900), and success green (50–900). Use industry-standard hex values. 2. Semantic Colors — create a semantic layer that references the primitive colours: background-primary, background-secondary, text-primary, text-secondary, text-disabled, icon-primary, icon-secondary, border-default, border-strong. Also add hover and active state variants for interactive elements. 3. Primitive Dimensions — create a spacing scale: 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80. And a radius scale: 0, 2, 4, 8, 12, 16, 9999 (full round). 4. Semantic Typography — create a typography token system for: display-large, display-medium, heading-1 through heading-4, body-large, body-medium, body-small, caption, and overline. Include font family, font size, line height, and font weight as separate tokens. Also create Figma text styles and map the typography variables to them.

Что Claude создаёт в результате:

Claude начинает автономно работать в Figma-файле. Через несколько минут в панели Variables появляется:

Primitive Colors — полный набор цветовых шкал, правильно организованных по коллекциям.
Semantic Colors — все ссылки на primitive-коллекцию корректны (не захардкоженные hex-значения, а реальные связи).
Токены интерфейса — фон, текст, иконки и границы с hover и active состояниями.
Типографическая система — текстовые стили, привязанные к соответствующим переменным.
Токены размеров — шкалы отступов и скруглений, готовые к использованию.

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

Совет

После генерации проверьте значения цветов по гайдлайнам вашего бренда. AI выбирает разумные дефолты, но точный оттенок вашего бренда может отличаться. Измените примитивы — и весь семантический слой обновится автоматически.

5. Создаём сложный компонент кнопки: 120+ вариантов

Настоящий стресс-тест workflow — компонент кнопки со всей строгостью дизайн-системы.

Промпт для создания компонента:

text

Create a button component in my Figma file with the following specifications: Variants: - Type: Primary, Secondary, Tertiary, Danger - Size: Small (32px height), Medium (40px height), Large (48px height) - State: Default, Hover, Active, Disabled - Layout: Label only, Label + Leading icon, Label + Trailing icon, Icon only, Label + Leading icon + Trailing icon Requirements: - Use the variable tokens we just created for all colours, spacing, and radius - Apply proper auto-layout with appropriate padding and gap values from our dimension tokens - Use the correct text styles from our typography system - For icons, use a simple placeholder icon (16x16 for small, 20x20 for medium, 24x24 for large) - Make sure component properties are properly set up for easy variant switching - Add proper naming convention: Button/[Type]/[Size]/[State]/[Layout]

На генерацию уходит заметно больше времени и ощутимая часть лимита запросов. В итоге получается полноценный сет компонентов из более чем 120 вариантов.

Что работает отлично:

Структура авто-раскладки: правильные padding и gap, взятые из токенов размеров.
Назначение цветов: primary-кнопки используют primary-цвета, danger — error-reds, всё из семантических токенов.
Текстовые стили: применены корректно ко всем размерам.
Свойства компонента: настроены для бесшовного переключения состояний.
Конвенция нейминга: полностью соблюдена.

Что потребует ручной доработки:

Иконки: Claude с трудом создаёт качественные иконки. Генерируются заглушки, но не всегда точные. Лучше указать простую форму («use a star shape» или «use an arrow») либо вставить вектор вручную.
Состояние загрузки (Loading state): позиционирование спиннера может сбиться из-за абсолютного позиционирования — потребуется быстрая ручная правка.
Небольшие расхождения в padding: у нескольких вариантов могут слегка отличаться отступы (исправление занимает 2–3 минуты).

Для компонента, на ручную сборку которого с нуля обычно уходит 2–3 часа — со всеми вариантами, токенами и auto-layout — Claude выполняет около 85% работы корректно. Оставшиеся 15% — быстрая ручная доводка.

6. Верстаем экран на основе дизайн-системы

Финальный тест: сможет ли Claude собрать полноценный экран, используя только что созданную дизайн-систему? Ключевое условие — не генерировать всё заново, а использовать созданные компоненты и переменные.

Промпт для создания экрана логина:

text

Design a login screen in my Figma file using the design system we've created. Use the following specifications: - Frame: 1440x900 desktop size - Layout: Split screen — left side with a branded visual/illustration area, right side with the login form - Right side form includes: Logo placeholder at top, "Welcome back" heading (use heading-2 text style), email input field, password input field with show/hide toggle, "Forgot password?" text link, primary login button (use our button component — large size, primary type), "Or continue with" divider, social login buttons (Google, Apple), "Don't have an account? Sign up" text at bottom - Use our variable tokens for all colours, spacing, and typography - Apply proper auto-layout throughout - Left side: Use background-secondary colour with a centered placeholder for illustration

Что Claude собирает в результате:

Готовый экран логина с правильной структурой. Общий лейаут выдержан — split-screen, форма логично сгруппирована, дизайн-токены применены по всему макету.

Что впечатляет:

Переиспользование компонентов: Claude использует именно созданный компонент кнопки, а не рисует новый стилизованный прямоугольник.
Типографическая иерархия: heading styles, body text, caption — всё взято из системы токенов.
Последовательные отступы: строго по шкале размеров.
Общая композиция: профессиональная и готовая к верстке.
Авто-раскладка: применена корректно, что делает экран адаптивным.

Что потребует доработки:

Визуальная полировка социальных кнопок авторизации.
Заглушка иллюстрации на левой панели базовая (ожидаемо).
Небольшие выравнивания во внутренних отступах формы.

Результат — не прототип на выброс, а добротная основа, которую можно развивать дальше.

7. Честный разбор: где AI справляется, а где нет

Где Claude + Figma работает исключительно хорошо:

Системы переменных и токенов: здесь AI раскрывается лучше всего. Полная токен-архитектура собирается за минуты вместо часов ручного труда.
Скаффолдинг компонентов: генерация скелета сложных компонентов со 120+ вариантами, настроенными свойствами и токенами экономит массу времени.
Компоновка экранов: создание структурированных лейаутов на основе созданных токенов и компонентов даёт отличный рабочий результат.
Консистентность дизайн-системы: правила соблюдаются строже, чем многими дизайнерами вручную.

Где AI пока не дотягивает:

Тонкие визуальные нюансы: у AI нет вкуса. Результаты структурно верны, но лишены тонких деталей, делающих дизайн изысканным.
Иконки и графика: Claude плохо рисует векторные иконки. Всегда используйте референсы или проверенные плагины.
Лимиты использования: сложные компоненты быстро расходуют квоты Claude. Планируйте работу сессиями.
Позиционирование: абсолютное позиционирование и overflow иногда требуют ручной очистки.

Примечание

Итог: этот workflow не заменяет продуктовое мышление, но радикально ускоряет фазу реализации. Claude берёт на себя 70–85% рутинной механической работы, освобождая время для ключевых решений: стратегии, сценариев пользователя, edge cases и финальной полировки.

8. Советы по промптам: паттерны, которые работают

Практика показала паттерны, дающие стабильно лучший результат:

Явно требуйте использовать токены: всегда пишите «use the variable tokens we created», иначе Claude может захардкодить значения напрямую.
Задавайте конвенцию нейминга: Claude следует любому указанному паттерну. Будьте точны, чтобы избежать путаницы в названиях.
Разбивайте задачи на этапы: не просите создать токены, компоненты и экраны в одном промпте. Делайте это пошагово.
Ссылайтесь на существующие элементы: пишите «use our button component» вместо абстрактного «create a button».
Задавайте размеры явно: «40px height with 12px vertical padding and 16px horizontal padding» работает в разы точнее, чем «medium size».
Всегда проверяйте результат: сверяйте панели Variables и Layers — AI выстраивает логику, но финальный контроль остаётся за человеком.