Смотреть урок
Figma + Claude Code — это полноценная дизайн-система с переменными, токенами и 120+ вариантами компонентов собирается за один рабочий сеанс.
Что внутри:
🔷 Как подключить Claude Code к Figma через MCP — пошаговая настройка с нуля
🔷 Готовые промпты для создания системы переменных: primitive colors, semantic tokens, типографика и отступы
🔷 Как сгенерировать сложный компонент кнопки с 120+ вариантами — и что придётся доделать вручную
🔷 Сборка полноценного экрана на основе готовой дизайн-системы: layout, токены, auto-layout
💡 AI берёт на себя 70-85% механической работы. Остальное — ваши решения по стратегии, сценариям и визуальной полировке.
Claude Code можно подключить напрямую к Figma и с его помощью собрать полноценную дизайн-систему с нуля: переменные, токены, компоненты и готовые экраны. В этом гайде разберём весь процесс пошагово от установки до финального экрана логина.
Что понадобится для работы
Перед началом убедитесь, что у вас есть:
Claude Code desktop app — приложение с тремя режимами: Chat, Code и Agentic.
Активная подписка Claude — бесплатный аккаунт для этого workflow не подходит.
Аккаунт Figma с хотя бы одним открытым файлом.
30-45 минут без отвлечений для прохождения полного workflow.
Важно учитывать: этот workflow расходует лимиты использования Claude. Сборка сложного компонента вроде кнопки с 120+ вариантами может съесть значительную часть вашего часового лимита. Начните с более простых задач, чтобы почувствовать процесс, прежде чем браться за амбициозные проекты.
5 шагов: от нуля до дизайн-системы
Общее время: ~45 минут | Вручную: 3+ часа.
Установить Claude Code.
Подключить Figma MCP.
Токены и Переменные.
Собрать Компоненты.
Дизайн и Экраны.
Шаг 1 — Устанавливаем Claude Code
Перейдите на claude.ai/download и скачайте Claude Code desktop app для вашей ОС (Mac или Windows).
После установки приложение попросит пройти аутентификацию — войдите с данными вашей подписки Claude.
После этого откроется интерфейс с тремя режимами:
Chat — стандартный разговорный Claude.
Code — для задач по написанию кода.
Agentic — здесь происходит основная работа с Figma.
Для работы с Figma используется режим Agentic: именно он позволяет Claude выполнять автономные действия, включая прямую работу с вашим Figma-канвасом.
Шаг 2 — Подключаем Claude к Figma через MCP
…