Framelink MCP for Figma
MCP-сервер, который передает агенту упрощенные данные макета Figma по ссылке, чтобы тот сверстал экран точнее, чем по скриншоту
Установка
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}Для macOS и Linux. На Windows команда cmd с аргументами /c npx и далее те же.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Сервер получает данные файла, фрейма или группы через API Figma по ссылке, которую вы вставляете в чат агента. Перед передачей модели он отбрасывает лишнее и оставляет только сведения о раскладке и стилях. Меньший объем контекста помогает агенту точнее воспроизвести макет в коде на любом фреймворке. Сервер изначально сделан под Cursor, но подключается к любому клиенту с поддержкой MCP.
Для кого. Для фронтенд-разработчиков и дизайнеров, которые верстают интерфейсы по макетам Figma с помощью агента.
Подходит, если
- Нужно сверстать экран или компонент по ссылке на фрейм Figma
- Скриншоты дают неточные отступы и размеры
- Нет доступа к официальному Dev Mode MCP от Figma
Не подходит, если
- Нужно менять сами макеты в Figma, сервер только читает
- Дизайн хранится не в Figma
Пример запроса к агенту
Сверстай этот экран на React и Tailwind по макету: https://www.figma.com/design/...Ограничения
Нужен персональный токен доступа Figma. Работа Figma и его API из России ограничена, возможны проблемы без VPN. Сервер отдает упрощенные данные, поэтому сложные эффекты и нестандартные слои могут потеряться.
Как отключить. Удалите запись Framelink MCP for Figma из конфигурации MCP клиента и отзовите токен в настройках Figma.
MCP
- Транспорт
- stdio
- Авторизация
- API-ключ
| Переменные окружения | |
|---|---|
| FIGMA_API_KEY обязательная, секрет | Персональный токен доступа Figma, можно передать и флагом --figma-api-key |
| PORT | Порт при запуске не в режиме stdio |
Проверка безопасности
- Использует токен Figma с доступом к вашим файлам
- Обращается к внешнему API
Коротко о README
README кратко объясняет сценарий: вставить ссылку на Figma в чат агента и попросить реализовать дизайн. Сервер упрощает ответ API Figma, чтобы модель получала только важное. Даны JSON-конфигурации для macOS, Linux и Windows через npx, подробности вынесены на сайт Framelink. Лицензия MIT.
Частые вопросы
Где взять ключ?
Создайте персональный токен доступа в настройках аккаунта Figma, ссылка на инструкцию есть в README.
Можно ли не хранить ключ в аргументах?
Да, README разрешает передать FIGMA_API_KEY через поле env в конфигурации.
Похожие
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов
Скиллы Vercel для агентов
Agent Skills
Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой
Три плагина со скиллами для Google Stitch: генерация экранов, перенос кода в дизайн и сборка React из макетов