Skip to main content
Glama
Sign In
deenesjakoruzh

Gravity Global Figma MCP

by nguyenlegravityglobal
GitHub
JavaScript
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Integrations

  • Enables configuration of the MCP server using environment variables stored in a .env file, particularly for storing the Figma API token.

  • Converts Figma design elements into organized CSS styles, automatically divides styles into logical groups (typography, colors, layouts), and generates meaningful class names based on properties.

  • Retrieves and optimizes design data from Figma files, extracts design tokens (typography and colors), converts design elements to CSS, and generates CSS class names based on design properties.

Gravity Global Figma MCP

Gravity Global Figma MCP는 Model Context Protocol(MCP)을 통해 Figma와 Cursor를 통합하는 도구로, Figma에서 디자인 데이터를 검색하고 최적화하여 코드 변환을 수행할 수 있습니다.

주요 특징

  • Figma 데이터 검색 : URL 또는 파일 ID를 사용하여 Figma 파일에서 디자인 정보 가져오기
  • 데이터 최적화 : 불필요한 속성을 제거하여 JSON 크기 줄이기
  • CSS 변환 : 스타일을 자동으로 그룹(타이포그래피, 색상, 레이아웃 등)으로 구분하고 구성합니다.
  • CSS 클래스 이름 생성 : 속성을 기반으로 의미 있는 클래스 이름을 자동으로 생성합니다.
  • 디자인 토큰 추출 : Figma 디자인에서 타이포그래피 및 색상 토큰 추출

설치

  1. 저장소를 복제합니다.

지엑스피1

  1. 종속성 설치:
npm install
  1. .env 파일을 만들고 Figma API 토큰을 추가하세요.
FIGMA_API_KEY=your_figma_api_token_here
  1. MCP 서버를 실행합니다.
node index.js

용법

커서 채팅에서

커서 채팅을 통해 다음 도구를 사용할 수 있습니다.

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는 Figma 디자인에서 추출한 타이포그래피와 색상 토큰을 포함하는 JSON 객체를 반환합니다.

응답 예시:

{ "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 모두 지원합니다. node-id 사용하여 특정 노드를 지정할 수 있습니다.

데이터 최적화

최적화 프로세스에는 다음 단계가 포함됩니다.

  1. 불필요한 속성 제거
  2. 스타일을 그룹으로 나누기(타이포그래피, 색상, 레이아웃 등)
  3. 중복을 줄이기 위해 유사한 스타일 병합
  4. CSS 클래스 이름 자동 생성

토큰 추출

토큰 추출 프로세스:

  1. 디자인에 사용된 타이포그래피와 색상 스타일을 식별합니다.
  2. 각 토큰에 대한 표준화된 명명 규칙을 만듭니다.
  3. 유형(타이포그래피 또는 색상)별로 토큰을 그룹화합니다.
  4. 중복 항목을 제거하고 디자인 시스템과 쉽게 통합할 수 있도록 구성합니다.

제한 사항

  • MCP에는 반환되는 데이터의 크기에 제한이 있습니다. 큰 파일은 figma_data 디렉토리에 저장됩니다.
  • 복잡한 벡터 속성은 완전히 보존되지 않습니다.
  • 복잡한 그라디언트 및 효과에는 추가 처리가 필요할 수 있습니다.

특허

MIT 라이센스

You must be authenticated.

A
security – no known vulnerabilities
F
license - not found
A
quality - confirmed to work

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.

Model Context Protocol을 통해 Figma와 Cursor를 통합하는 도구로, 사용자는 Figma 파일에서 디자인 데이터를 검색하고 최적화하고 구조화된 CSS와 디자인 토큰으로 변환할 수 있습니다.

  1. 주요 특징
    1. 설치
      1. 용법
        1. 커서 채팅에서
      2. 데이터 구조
        1. 기술적 세부 사항
          1. Figma 데이터 검색
          2. 데이터 최적화
          3. 토큰 추출
          4. 제한 사항
        2. 특허

          Related MCP Servers

          • Figma MCP Server

            TimHolden
            A
            security
            F
            license
            A
            quality
            Enables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.
            Last updated 2 months ago
            2
            106
            TypeScript
            • Apple

          • 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 6 days ago
            5
            14,596
            6,386
            TypeScript
            MIT License
            • Linux
            • Apple

          • Talk to Figma MCP

            yhc984
            -
            security
            F
            license
            -
            quality
            Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
            Last updated 2 months ago
            TypeScript

          • 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 a month ago
            124
            6
            TypeScript
            MIT License
            • Linux
            • Apple

          View all related MCP servers

          Appeared in Searches

          New MCP Servers

          ID: gvrboik59v