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

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

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

• Извлечение данных из Figma : получение информации о дизайне из файлов Figma с использованием URL-адресов или идентификаторов файлов.

• Оптимизация данных : уменьшение размера JSON путем удаления ненужных свойств.

• Преобразование CSS : автоматическое разделение и организация стилей по группам (типографика, цвета, макеты...)

• Генерация имен классов CSS : автоматическое создание осмысленных имен классов на основе свойств.

• Извлечение токенов дизайна : извлечение типографики и цветовых токенов из дизайнов Figma

Related MCP server: Talk to Figma MCP

Установка

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

git clone <repository-url>

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

npm install

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

FIGMA_API_KEY=your_figma_api_token_here

4. Запустите 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 .

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

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

1. Удаление ненужных свойств

2. Разделение стилей на группы (типографика, цвета, макет...)

3. Объединение похожих стилей для уменьшения дублирования

4. Автоматическая генерация имен классов CSS

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

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

1. Определяет типографику и цветовые стили, используемые в дизайне

2. Создает стандартизированные соглашения об именовании для каждого токена

3. Группирует токены по типу (типографика или цвета)

4. Удаляет дубликаты и организует их для легкой интеграции с системами проектирования.

Ограничения

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

• Свойства сложных векторов сохраняются не полностью

• Сложные градиенты и эффекты могут потребовать дополнительной обработки.

Лицензия

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