Gravity Global Figma MCP는 Model Context Protocol(MCP)을 통해 Figma와 Cursor를 통합하는 도구로, Figma에서 디자인 데이터를 검색하고 최적화하여 코드 변환을 수행할 수 있습니다.
Figma 데이터 검색 : URL 또는 파일 ID를 사용하여 Figma 파일에서 디자인 정보 가져오기
데이터 최적화 : 불필요한 속성을 제거하여 JSON 크기 줄이기
CSS 변환 : 스타일을 자동으로 그룹(타이포그래피, 색상, 레이아웃 등)으로 구분하고 구성합니다.
CSS 클래스 이름 생성 : 속성을 기반으로 의미 있는 클래스 이름을 자동으로 생성합니다.
디자인 토큰 추출 : Figma 디자인에서 타이포그래피 및 색상 토큰 추출
Related MCP server: Talk to Figma MCP
저장소를 복제합니다.
지엑스피1
종속성 설치:
npm install.env 파일을 만들고 Figma API 토큰을 추가하세요.
FIGMA_API_KEY=your_figma_api_token_hereMCP 서버를 실행합니다.
node index.js커서 채팅을 통해 다음 도구를 사용할 수 있습니다.
Get data from Figma URL https://www.figma.com/file/abc123/my-design?node-id=123-456결과: MCP는 최적화된 Figma 데이터를 반환합니다.
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"
}
}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 REST API를 사용하여 디자인 데이터를 가져옵니다. 일반 파일과 새 디자인 URL 모두 지원합니다. node-id 사용하여 특정 노드를 지정할 수 있습니다.
최적화 프로세스에는 다음 단계가 포함됩니다.
불필요한 속성 제거
스타일을 그룹으로 나누기(타이포그래피, 색상, 레이아웃 등)
중복을 줄이기 위해 유사한 스타일 병합
CSS 클래스 이름 자동 생성
토큰 추출 프로세스:
디자인에 사용된 타이포그래피와 색상 스타일을 식별합니다.
각 토큰에 대한 표준화된 명명 규칙을 만듭니다.
유형(타이포그래피 또는 색상)별로 토큰을 그룹화합니다.
중복 항목을 제거하고 디자인 시스템과 쉽게 통합할 수 있도록 구성합니다.
MCP에는 반환되는 데이터의 크기에 제한이 있습니다. 큰 파일은 figma_data 디렉토리에 저장됩니다.
복잡한 벡터 속성은 완전히 보존되지 않습니다.
복잡한 그라디언트 및 효과에는 추가 처리가 필요할 수 있습니다.
MIT 라이센스
| Name | Required | Description | Default |
|---|---|---|---|
| figmaUrl | Yes | Figma URL or file ID | |
| fullJson | No | If true, returns full uncompressed JSON data | |
| cleanData | No | If true, removes unnecessary properties for HTML/CSS rendering |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Tool has no description.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Tool has no description.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Tool has no description.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Tool has no description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Tool has no description.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Tool has no description.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.0figmaDesignScored across 1 tool
With only one tool, there is no possibility of confusion between tools.
A single tool trivially follows a consistent naming pattern with itself.
One tool for a Figma MCP is extremely limited; a typical Figma integration would require many more operations, making this an extreme mismatch.
The tool has no description, and a single tool cannot cover the expected domain of Figma operations (e.g., fetching designs, components, etc.), indicating severe incompleteness.
The Figma MCP server brings Figma design context directly into your AI workflow.
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
