← Назад

Cursor + Figma: настройка окружения для дизайнера

cursor figma mcp

Вы дизайнер, который хочет превращать макеты в код. Не учить React с нуля, не становиться фронтендером, а скинуть ссылку на Figma-нод и получить рабочий компонент. Cursor + Figma MCP делают это возможным. Эта статья: пошаговая настройка от нуля до работающего флоу.

Почему Cursor, а не VS Code

VS Code: отличный редактор. Cursor: это VS Code с AI внутри. Разница принципиальная: в VS Code вы ставите расширение-копайлот и получаете подсказки. В Cursor AI полноценный агент, который читает ваш проект, создаёт файлы, запускает команды и подключается к внешним сервисам через MCP.

Для дизайнера это означает: вы общаетесь с IDE на русском языке, кидаете ссылку на Figma, и AI сам достаёт макет, анализирует структуру, генерирует код в стиле вашего проекта. Не автокомплит, а полноценный рабочий процесс.

Шаг 1. Установка

Скачайте Cursor с cursor.com. Установка стандартная: dmg на Mac, exe на Windows. При первом запуске Cursor предложит импортировать настройки из VS Code, соглашайтесь, если пользовались.

После установки откройте настройки (Cmd + ,) и проверьте три вещи:

Шаг 2. Терминал и базовые инструменты

Терминал: текстовый интерфейс к вашему компьютеру. Звучит страшно, но для нашего флоу вам нужно знать буквально пять команд. В Cursor терминал открывается через Ctrl + `.

Node.js

Node.js: среда для запуска JavaScript вне браузера. Многие инструменты разработчика работают на нём. Установите LTS-версию с nodejs.org. После установки проверьте в терминале:

node --version
npm --version

Если обе команды вернули номер версии, всё работает.

Git

Git: система контроля версий. Для дизайнера это как «история версий» в Figma, только для кода. На Mac Git уже предустановлен. На Windows установите с git-scm.com.

Минимальный набор команд, которые вам пригодятся:

git clone <url>        # скачать проект
git add .              # подготовить все изменения
git commit -m "текст"  # сохранить снимок
git push               # отправить на GitHub

Но даже эти команды Cursor может выполнять за вас, достаточно попросить «закоммить и запуши изменения».

Шаг 3. Cursor Rules: память проекта

Cursor Rules: файлы в папке .cursor/rules/, которые AI читает в начале каждой сессии. Это контекст вашего проекта: какие технологии используются, какие компоненты есть, какие паттерны соблюдать.

Если вы читали мою предыдущую статью Design.md, это именно то место, где живёт спецификация дизайн-системы. Создайте файл .cursor/rules/design-system.md:

# Дизайн-система

## Стек
- HTML, CSS (без фреймворков)
- CSS-переменные для токенов
- Vanilla JavaScript

## Токены
- Основной текст: var(--text) — #0a0a0a / #f5f5f5
- Вторичный: var(--text-muted) — #737373 / #8f8e8d
- Фон: var(--bg) — #fafafa / #0c0c0c

## Правила
- Максимальная ширина контента: 592px
- Шрифт: Inter
- Отступы кратны 4px

Теперь каждый раз, когда вы просите Cursor написать код, он знает ваши токены, ваш стек и ваши правила. Не догадывается, а читает.

Шаг 4. Подключение Figma через MCP

MCP (Model Context Protocol): протокол, через который AI-агент подключается к внешним сервисам. Figma выпустила официальный MCP-сервер, и это меняет всё: Cursor получает прямой доступ к вашим макетам.

Настройка

Откройте настройки Cursor: Cmd + Shift + P → «Cursor Settings» → вкладка MCP. Нажмите «Add new global MCP server» и добавьте конфигурацию:

{
  "mcpServers": {
    "Figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY"
      ]
    }
  }
}

Где взять API-ключ: откройте Figma → Settings → Personal Access Tokens. Создайте токен с доступом к файлам. Скопируйте и вставьте вместо YOUR_KEY.

После сохранения Cursor перезапустит MCP-сервер. В списке серверов напротив Figma должен появиться зелёный индикатор.

Что это даёт

Теперь вы можете скинуть Cursor ссылку на любой нод в Figma, и он получит:

Шаг 5. Первый запрос

Всё настроено. Откройте Figma, выберите нод (фрейм, компонент, секцию), скопируйте ссылку на него: правый клик → «Copy link to selection». Откройте чат в Cursor (Cmd + L) и напишите:

Сверстай этот компонент
https://figma.com/design/xxx/yyy?node-id=123-456

Cursor через MCP заберёт из Figma всю информацию о ноде, посмотрит ваши Cursor Rules, увидит стек и токены, и сгенерирует код, который вписывается в ваш проект.

Не понравился результат? Продолжайте разговор: «сделай отступ больше», «поменяй шрифт на Inter», «добавь тёмную тему». AI помнит контекст в рамках сессии и вносит правки инкрементально.

Деплой в один клик

Код написан, как показать миру? Самый простой путь: GitHub Pages. Если ваш проект на GitHub, просто попросите Cursor:

Закоммить и запуши все изменения

Зайдите в настройки репозитория на GitHub → Pages → выберите ветку main. Через минуту ваш сайт будет доступен по адресу username.github.io/repo.

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

Что дальше

У вас готово рабочее окружение: IDE с AI-агентом, который знает вашу дизайн-систему и имеет прямой доступ к Figma. Это не замена разработчику. Это инструмент, который позволяет дизайнеру проверять идеи в коде, собирать прототипы из реальных компонентов и деплоить их самостоятельно.

Три вещи, которые стоит попробовать первыми:

Разрыв между дизайном и кодом сокращается. Cursor + Figma MCP: один из самых коротких мостов.