Гравитация Глобальная Figma MCP

Gravity Global Figma MCP — это инструмент, который интегрирует Figma с Cursor через протокол контекста модели (MCP), позволяя извлекать и оптимизировать проектные данные из Figma для преобразования кода.

Основные характеристики

Извлечение данных из Figma : получение информации о дизайне из файлов Figma с использованием URL-адресов или идентификаторов файлов.
Оптимизация данных : уменьшение размера JSON путем удаления ненужных свойств.
Преобразование CSS : автоматическое разделение и организация стилей по группам (типографика, цвета, макеты...)
Генерация имен классов CSS : автоматическое создание осмысленных имен классов на основе свойств.
Извлечение токенов дизайна : извлечение типографики и цветовых токенов из дизайнов Figma

Установка

Клонируйте репозиторий:

git clone <repository-url>

Установить зависимости:

npm install

Создайте файл .env и добавьте свой токен API Figma:

FIGMA_API_KEY=your_figma_api_token_here

Запустите MCP-сервер:

node index.js

Использование

В курсорном чате

Через Cursor Chat вы можете использовать следующие инструменты:

1. Извлечение данных из Figma

Get data from Figma URL https://www.figma.com/file/abc123/my-design?node-id=123-456

Результат: MCP вернет оптимизированные данные Figma.

2. Извлечение токенов дизайна

Extract typography and color tokens from Figma URL https://www.figma.com/file/abc123/my-design

Результат: MCP вернет объект JSON, содержащий типографику и цветовые маркеры, извлеченные из дизайна Figma.

Пример ответа:

{
  "typography": {
    "opensans-600-32": {
      "fontFamily": "Open Sans",
      "fontSize": "32px",
      "fontWeight": 600,
      "lineHeight": "48px"
    },
    "avenirnext-400-16": {
      "fontFamily": "Avenir Next",
      "fontSize": "16px",
      "fontWeight": 400,
      "lineHeight": "24px"
    }
  },
  "colors": {
    "bg-ffffff": "#ffffff",
    "text-030e12": "#030e12"
  }
}

3. Варианты

Инструмент figmaDesign :
- fullJson=true : возвращает полные несжатые данные JSON
- cleanData=true : удаляет ненужные свойства для рендеринга HTML/CSS
Инструмент figmaTokens :
- tokenTypes=["typography"] : извлекать только типографские токены
- tokenTypes=["colors"] : извлекать только цветовые токены
- tokenTypes=["typography", "colors"] : извлечь оба (по умолчанию)

Пример:

Extract only color tokens from Figma URL https://www.figma.com/file/abc123/my-design

Структура данных

Преобразованные данные Figma имеют следующую структуру:

{
  "nodes": {
    "nodeId": {
      "id": "nodeId",
      "name": "Node Name",
      "type": "FRAME",
      "fillStyleId": "style123",
      "layoutStyleId": "style456",
      "children": [...]
    }
  },
  "styles": {
    "style123": {
      "backgroundColor": "#ffffff",
      "opacity": 1,
      "categories": { "colors": "color1" }
    }
  },
  "optimizedStyles": {
    "typography": {...},
    "colors": {...},
    "layout": {...},
    "spacing": {...},
    "sizing": {...}
  },
  "classNames": {
    "style123": "bg-1",
    "style456": "flex-row-1"
  }
}

Технические подробности

Извлечение данных Figma

Инструмент использует Figma REST API для извлечения данных дизайна. Он поддерживает URL-адреса как обычных файлов, так и новых URL-адресов дизайна. Вы можете указать конкретный узел с помощью node-id .

Оптимизация данных

Процесс оптимизации включает в себя следующие этапы:

Удаление ненужных свойств
Разделение стилей на группы (типографика, цвета, макет...)
Объединение похожих стилей для уменьшения дублирования
Автоматическая генерация имен классов CSS

Извлечение токенов

Процесс извлечения токена:

Определяет типографику и цветовые стили, используемые в дизайне
Создает стандартизированные соглашения об именовании для каждого токена
Группирует токены по типу (типографика или цвета)
Удаляет дубликаты и организует их для легкой интеграции с системами проектирования.

Ограничения

MCP имеет ограничения на размер возвращаемых данных; большие файлы будут сохранены в каталоге figma_data
Свойства сложных векторов сохраняются не полностью
Сложные градиенты и эффекты могут потребовать дополнительной обработки.

Лицензия

Лицензия Массачусетского технологического института

Install Server

HTTP connection URL

security – no known vulnerabilities

license - not found

quality - confirmed to work

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Инструмент, который интегрирует Figma с Cursor через протокол контекста модели, позволяя пользователям извлекать, оптимизировать и преобразовывать данные дизайна из файлов Figma в структурированный CSS и токены дизайна.

Related MCP Servers

Figma MCP Server
GLips
-
security
A
license
-
quality
Enables Cursor to access Figma files through the Model Context Protocol, enhancing its ability to accurately interpret and utilize design data for code generation.
Last updated -
5
44,047
8,336
TypeScript
MIT License
Talk to Figma MCP
sonnylazuardi
A
security
A
license
A
quality
An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
Last updated -
19
2,514
3,528
JavaScript
MIT License
Figma MCP Server
1yhy
-
security
A
license
-
quality
A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
Last updated -
124
6
TypeScript
MIT License
Cursor Talk to Figma MCP
paragdesai1
-
security
-
license
-
quality
Implements a Model Context Protocol integration between Cursor AI and Figma, allowing Cursor to programmatically read and modify Figma designs.
Last updated -
JavaScript
MIT License

View all related MCP servers

Gravity Global Figma MCP