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

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

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

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

Related MCP server: Talk to Figma MCP

Установка

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

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
Свойства сложных векторов сохраняются не полностью
Сложные градиенты и эффекты могут потребовать дополнительной обработки.