Макет Figma в код

Framelink MCP for Figma

Сервер забирает данные макета через API Figma и упрощает их перед передачей модели, оставляя только разметку и стили. Можно скачивать и картинки из макета.

Как подключитьОткрыть на GitHub (откроется в новой вкладке)

Что умеет

Действия, которые сервер открывает для ИИ. Моноширинным шрифтом — их технические названия.

  • Читает макет, кадр или группу по ссылке из Figmaget_figma_data
  • Отдаёт размеры, отступы, цвета и тексты в компактном видеget_figma_data
  • Скачивает картинки и иконки из макета в папку проектаdownload_figma_images

Примеры запросов

Скопируйте и отправьте в чат после подключения.

Вот ссылка на кадр в Figma — свёрстай эту секцию на React и Tailwind.

Сравни макет по ссылке с нашей страницей и перечисли отличия в отступах и цветах.

Скачай иконки из этого кадра в папку public/icons.

Как подключить

Выберите приложение, в котором работаете с ИИ.

  1. Понадобится: Node.js 20.20 или новее, Аккаунт Figma, Личный токен доступа Figma.
  2. Создайте личный токен доступа в настройках Figma: Settings → Security → Personal access tokens.
  3. Откройте Claude → Настройки → Разработчик → «Изменить конфиг».
  4. Вставьте блок ниже в файл. Если в файле уже есть «mcpServers», добавьте внутрь только ваш сервер.
  5. Замените значения-заглушки на свои: ключи, токены, пути.
  6. Сохраните файл и перезапустите Claude — в чате появится значок подключённых инструментов.
claude_desktop_config.json
{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "ваш-токен-figma"
      }
    }
  }
}

Вместо переменной окружения токен можно передать аргументом --figma-api-key=ваш-токен. На Windows авторы предлагают запускать команду через cmd /c.

Безопасность

Токен открывает доступ ко всем макетам вашего аккаунта. Выдавайте ему минимальные права на чтение и не публикуйте конфиг с токеном.

Похожие серверы

Даёт ИИ доступ к одной выбранной папке: найти документ, переименовать файлы пачкой, разложить загрузки по местам.

ФайлыБез ключаОфициальный

ИИ смотрит историю проекта в Git, показывает, что поменялось в файлах, создаёт ветки и сохраняет изменения коммитом с понятным описанием.

КодБез ключаОфициальный

Строит карту вашего проекта: где какие функции и кто кого вызывает. ИИ отвечает на вопросы о коде быстрее и тратит меньше токенов на поиск.

КодНужна настройкаЗвёзд на GitHub: 71 641