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

Лицензия

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

Gravity Global Figma MCP

Integrations