Figma Context MCP
MCP-сервер для связи Claude с Figma: передаёт дизайн-контекст в LLM, позволяет генерировать код компонентов напрямую из макетов без copy-paste.
Требуется Figma API Key: Figma → Settings → Account → Access tokens.
# Claude Desktop — claude_desktop_config.json:
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=ВАШ_КЛЮЧ", "--stdio"]
}
}
}
# Claude Code (CLI):
claude mcp add figma -- npx -y figma-developer-mcp --figma-api-key=ВАШ_КЛЮЧ --stdio
# OpenCode — ~/.config/opencode/opencode.json:
{
"mcp": {
"figma": {
"type": "local",
"command": ["npx", "-y", "figma-developer-mcp", "--figma-api-key=ВАШ_КЛЮЧ", "--stdio"]
}
}
}
Framelink MCP для Figma
Дайте своему кодирующему агенту доступ к вашим данным Figma.
Воплощайте дизайны в любом фреймворке за один раз.
Предоставьте Cursor и другим ИИ-инструментам для кодирования доступ к вашим файлам Figma с помощью этого сервера Model Context Protocol.
Когда Cursor имеет доступ к данным дизайна Figma, он намного лучше справляется с точным одноразовым воплощением дизайна по сравнению с альтернативными подходами, такими как вставка скриншотов.
Посмотрите инструкции по быстрому старту →
Демо
Посмотрите демонстрацию создания интерфейса в Cursor с использованием данных дизайна Figma
Как это работает
- Откройте чат в вашей IDE (например, режим агента в Cursor).
- Вставьте ссылку на файл, фрейм или группу в Figma.
- Попросите Cursor сделать что-нибудь с файлом Figma — например, воплотить дизайн.
- Cursor получит соответствующие метаданные из Figma и использует их для написания вашего кода.
Этот MCP-сервер специально разработан для использования с Cursor. Прежде чем отвечать контекстом из API Figma, он упрощает и транслирует ответ, чтобы модели предоставлялась только самая релевантная информация о макете и стиле.
Уменьшение объема контекста, предоставляемого модели, помогает сделать ИИ более точным, а ответы — более релевантными.
Начало работы
Многие кодовые редакторы и другие ИИ-клиенты используют файл конфигурации для управления MCP-серверами.
Сервер figma-developer-mcp может быть настроен путем добавления следующего в ваш файл конфигурации.
ПРИМЕЧАНИЕ: вам понадобится маркер доступа Figma для использования этого сервера. Инструкции по созданию маркера доступа к API Figma можно найти здесь.
MacOS / Linux
{
"mcpServers": {
"Framelink MCP для Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
Windows
{
"mcpServers": {
"Framelink MCP для Figma": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
Или вы можете установить FIGMA_API_KEY и PORT в поле env.
Если вам нужна дополнительная информация о настройке Framelink MCP для Figma, обратитесь к документации Framelink.
История звезд
Узнайте больше
Framelink MCP для Figma прост, но эффективен. Извлеките из него максимум, узнав больше на сайте Framelink.