Figma

공식

Figma MCP 서버는 Figma 디자인 파일에서 코드를 생성하는 AI 에이전트에게 중요한 디자인 정보와 컨텍스트를 제공하여 Figma를 워크플로우에 직접 통합합니다.

Figma MCP(으)로 무엇을 할 수 있나요?

선택한 프레임에서 코드 생성 — AI에게 Figma 프레임을 프로젝트에 맞는 프로덕션 준비 코드로 변환하도록 요청하세요.
디자인 컨텍스트 추출 — Figma에서 변수, 컴포넌트, 레이아웃 데이터를 IDE로 직접 가져와 디자인 시스템 워크플로우에 활용하세요.
캔버스에 쓰기 — 에이전트에게 프레임, 컴포넌트, 오토 레이아웃과 같은 네이티브 Figma 콘텐츠를 생성하거나 수정하도록 지시하세요.
플레이스홀더 이미지 생성 — AI가 generate_image로 플레이스홀더 이미지를 만들고 upload_assets를 통해 디자인에 적용하게 하세요.
Code Connect로 컴포넌트 재사용 — Figma 컴포넌트를 실제 코드에 연결하여 생성된 코드가 코드베이스와 일관성을 유지하도록 하세요.

호스팅형 MCP 서버

npx add-mcp 'https://mcp.figma.com/mcp'

Claude Code, Codex, Cursor 등에 설치됩니다

문서

Figma MCP 서버 가이드

[!NOTE] Figma에서 데이터를 읽는 Figma MCP 서버 도구에는 속도 제한이 적용됩니다. Figma 파일에 쓰는 도구와 같은 일부 도구는 속도 제한에서 제외됩니다.

Starter 플랜 사용자 또는 유료 플랜에서 View 또는 Collab 시트를 보유한 사용자는 월 최대 6회의 도구 호출로 제한됩니다.

Professional, Organization, 또는 Enterprise 플랜에서 Dev 또는 Full 시트를 보유한 사용자에게는 Tier 1 Figma REST API와 동일한 분당 속도 제한이 적용됩니다. Figma의 REST API와 마찬가지로 Figma는 속도 제한을 변경할 권리를 보유합니다.

Figma MCP 서버 문서 전체는 개발자 문서를 참조하세요. Figma MCP 서버와 관련 리소스(이러한 스킬 포함)를 사용함으로써 Figma 개발자 약관에 동의하게 됩니다. 이러한 스킬은 현재 베타 기능으로 제공됩니다.

기능

캔버스에 쓰기 (원격 서버 전용): MCP 클라이언트에서 직접 기본 Figma 콘텐츠를 생성하고 수정합니다. 적절한 스킬을 사용하면 에이전트가 디자인 시스템을 소스로 삼아 Figma 파일에서 프레임, 컴포넌트, 변수 및 오토 레이아웃을 구축하고 업데이트할 수 있습니다.

참고: Figma가 AI 에이전트 지원 방식을 빠르게 개선하고 있습니다. 캔버스에 쓰기 기능은 결국 사용량 기반 유료 기능이 될 예정이지만, 현재 베타 기간 동안에는 무료로 제공됩니다.
플레이스홀더 이미지 생성: 소스, 캡처 또는 라이브러리 이미지를 사용할 수 없는 경우, 에이전트는 권한을 요청하고 Figma AI 크레딧 사용을 공개한 후 generate_image를 사용할 수 있습니다. 생성된 이미지는 upload_assets로 업로드되어 디자인에 적용됩니다.
선택한 프레임에서 코드 생성

Figma 프레임을 선택하고 코드로 변환합니다. 새로운 플로우를 구축하거나 앱 기능을 반복하는 제품 팀에 유용합니다.
디자인 컨텍스트 추출

변수, 컴포넌트 및 레이아웃 데이터를 IDE에 직접 가져옵니다. 디자인 시스템 및 컴포넌트 기반 워크플로우에 특히 유용합니다.
Code Connect로 더 스마트한 코드 작성

실제 컴포넌트를 재사용하여 출력 품질을 향상시킵니다. Code Connect는 생성된 코드가 코드베이스와 일관성을 유지하도록 합니다.

Code Connect에 대해 자세히 알아보기 →
웹 페이지에서 Figma 디자인 생성 (점진적 출시 중)

AI 코딩 에이전트에서 직접 웹 페이지를 캡처, 가져오기 또는 Figma 디자인으로 변환합니다.

설치 및 설정

Figma MCP 서버에 연결

MCP 클라이언트마다 설정 방법이 약간씩 다릅니다. 특정 클라이언트에 대한 아래 지침을 따라 Figma MCP 서버에 연결하세요.

VS Code

단축키 ⌘ Shift P를 사용하여 MCP:Add Server를 검색합니다.
HTTP를 선택합니다.
검색 창에 서버 URL https://mcp.figma.com/mcp를 붙여넣습니다. 그런 다음 Enter를 누릅니다.
서버 ID를 묻는 메시지가 표시되면 figma를 입력합니다.
이 서버를 전역적으로 추가할지 현재 워크스페이스에만 추가할지 선택합니다. 확인되면 mcp.json 파일에 다음과 같은 구성이 표시됩니다:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

⌥⌘B 또는 ⌃⌘I를 사용하여 채팅 도구 모음을 열고 Agent 모드로 전환합니다.
채팅이 열린 상태에서 #get_design_context를 입력하여 Figma MCP 서버 도구를 사용할 수 있는지 확인합니다. 도구가 나열되지 않으면 VS Code를 다시 시작합니다.

[!NOTE] VS Code에서 MCP를 사용하려면 계정에 GitHub Copilot이 활성화되어 있어야 합니다.

자세한 내용은 VS Code 공식 문서를 참조하세요.

Cursor

Cursor에서 Figma MCP 서버를 설정하는 권장 방법은 MCP 서버 설정과 일반적인 워크플로우용 Agent Skills를 포함하는 Figma 플러그인을 설치하는 것입니다.

Cursor의 에이전트 채팅에 다음 명령을 입력하여 플러그인을 설치합니다:

/add-plugin figma

플러그인에는 다음이 포함됩니다:

Figma MCP 서버용 MCP 서버 구성
디자인 구현, Code Connect를 통한 컴포넌트 연결 및 디자인 시스템 규칙 생성을 위한 스킬
Figma MCP 서버의 적절한 에셋 처리를 위한 규칙

수동 설정

Cursor → 설정 → Cursor 설정을 엽니다.
MCP 탭으로 이동합니다.
+ 새 전역 MCP 서버 추가를 클릭합니다.
다음 구성을 입력하고 저장합니다:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

자세한 내용은 Cursor 공식 문서를 참조하세요.

Claude Code

Claude Code에서 Figma MCP 서버를 설정하는 권장 방법은 MCP 서버 설정과 일반적인 워크플로우용 Agent Skills를 포함하는 Figma 플러그인을 설치하는 것입니다.

Anthropic의 공식 플러그인 마켓플레이스에서 플러그인을 설치하려면 다음 명령을 실행합니다.

claude plugin install figma@claude-plugins-official

Anthropic의 Claude Code 플러그인 및 Agent Skills에 대해 자세히 알아보세요.

수동 설정

터미널을 열고 다음을 실행합니다:

claude mcp add --transport http figma https://mcp.figma.com/mcp

다음 명령을 사용하여 MCP 설정을 확인하고 서버를 관리합니다:

구성된 모든 서버 나열
```
claude mcp list
```
특정 서버에 대한 세부 정보 가져오기
```
claude mcp get my-server
```
서버 제거
```
claude mcp remove my-server
```

자세한 내용은 Anthropic 공식 문서를 참조하세요.

Gemini CLI

다음 명령을 실행하여 Gemini CLI용 Figma 확장 프로그램을 설치합니다:

gemini extensions install https://github.com/figma/mcp-server-guide

설치가 완료되면 gemini를 실행하여 Figma로 인증한 다음 CLI 내에서 다음 명령을 실행합니다:

/mcp auth figma

확장 프로그램을 제거하려면:

gemini extensions uninstall figma

기타 편집기

Streamable HTTP를 지원하는 다른 코드 편집기 및 도구도 Figma MCP 서버에 연결할 수 있습니다.

다른 편집기나 도구를 사용하는 경우 해당 문서를 확인하여 Streamable HTTP 기반 통신을 지원하는지 확인하세요. 지원하는 경우 다음 구성을 사용하여 Figma MCP 서버를 수동으로 추가할 수 있습니다:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

MCP 클라이언트에 프롬프트 지정

Figma MCP 서버는 LLM이 Figma의 디자인을 변환하는 데 도움이 되는 일련의 도구를 제공합니다. 연결되면 MCP 클라이언트에 특정 디자인 노드에 액세스하도록 프롬프트를 지정할 수 있습니다.

AI 클라이언트에 Figma 디자인 컨텍스트를 제공하려면:

Figma에서 프레임 또는 레이어에 대한 링크를 복사합니다.
선택한 URL에서 디자인 구현을 도와달라고 클라이언트에 프롬프트를 지정합니다.

[!NOTE] 클라이언트는 선택한 URL로 이동할 수 없지만, MCP 서버가 어떤 객체에 대한 정보를 반환할지 식별하는 데 필요한 node-id를 추출합니다.

도구 및 스킬

Figma는 개발자 문서에서 Figma MCP 서버가 제공하는 도구 목록을 유지 관리합니다.

지원되는 에이전트용 Figma 플러그인에 포함된 스킬에 대해 Figma 도움말 센터에서 자세히 알아볼 수도 있습니다. 에이전트에 따라 connector, extension 또는 power라는 용어가 표시될 수 있습니다. 여기에는 동일한 스킬 세트가 포함됩니다.

이 저장소에는 Figma 플러그인에 번들되지 않은 독립형 워크플로우 스킬도 포함되어 있습니다:

workflow-skills/video-interaction-mapper: UI 녹화를 주석이 달린 Figma 스토리보드로 변환
workflow-skills/generate-project-plan: PRD(선택적으로 코드베이스 근거 포함)를 FigJam 프로젝트 계획 보드로 변환

MCP 모범 사례

생성된 코드의 품질은 여러 요인에 따라 달라집니다. 일부는 사용자가 제어하고 일부는 사용 중인 도구에 의해 제어됩니다. 깔끔하고 일관된 출력을 위한 몇 가지 제안 사항은 다음과 같습니다.

더 나은 코드를 위해 Figma 파일 구성

디자인 의도에 대한 최상의 컨텍스트를 제공하여 MCP와 AI 어시스턴트가 시스템과 명확하고 일관되며 정렬된 코드를 생성할 수 있도록 합니다.

컴포넌트 사용: 재사용되는 모든 것(버튼, 카드, 입력 등)에 사용
Code Connect를 통해 컴포넌트를 코드베이스에 연결: 코드에서 일관된 컴포넌트 재사용을 위한 최선의 방법입니다. 이 기능이 없으면 모델이 추측하게 됩니다.
변수 사용: 간격, 색상, 반경 및 타이포그래피에 사용
레이어 이름을 의미론적으로 지정 (예: CardContainer, Group 5 아님)
오토 레이아웃 사용: 반응형 의도를 전달합니다.

[!TIP] 코드를 생성하기 전에 Figma에서 프레임 크기를 조정하여 예상대로 동작하는지 확인하세요.

주석 및 개발 리소스 사용: 시각적으로만 포착하기 어려운 디자인 의도(예: 동작, 정렬 또는 응답 방식)를 전달합니다.

AI를 안내하는 효과적인 프롬프트 작성

MCP는 AI 어시스턴트에게 구조화된 Figma 데이터를 제공하지만 프롬프트가 결과를 좌우합니다. 좋은 프롬프트는 다음을 수행할 수 있습니다:

결과를 프레임워크 또는 스타일링 시스템에 맞춤
파일 구조 및 명명 규칙을 따름
특정 경로에 코드 추가 (예: src/components/ui)
새 파일을 만드는 대신 기존 파일에 코드 추가 또는 수정
특정 레이아웃 시스템(예: 그리드, 플렉스박스, 절대 위치)을 따름

예시:

"이 프레임에서 iOS SwiftUI 코드 생성"
"이 레이아웃에 Chakra UI 사용"
"src/components/ui 컴포넌트 사용"
"이것을 src/components/marketing/PricingCard.tsx에 추가"
"우리의 Stack 레이아웃 컴포넌트 사용"

프롬프트를 팀원에게 보내는 브리핑처럼 생각하세요. 명확한 의도는 더 나은 결과로 이어집니다.

필요할 때 특정 도구 트리거

MCP는 다양한 도구를 지원하며 각 도구는 AI 어시스턴트에게 다른 종류의 구조화된 컨텍스트를 제공합니다. 때로는 더 많은 도구를 사용할 수 있게 됨에 따라 어시스턴트가 올바른 도구를 자동으로 선택하지 못할 수 있습니다. 결과가 잘못된 경우 프롬프트에서 명시적으로 지정해 보세요.

get_design_context는 Figma 선택 항목의 구조화된 React + Tailwind 표현을 제공합니다. 이는 프롬프트에 따라 AI 어시스턴트가 모든 프레임워크 또는 코드 스타일로 변환할 수 있는 시작점입니다.
get_variable_defs는 선택 항목에 사용된 변수와 스타일(색상, 간격, 타이포그래피 등)을 추출합니다. 이는 모델이 생성된 코드에서 토큰을 직접 참조하는 데 도움이 됩니다.

예를 들어 토큰 대신 원시 코드를 얻는 경우 다음과 같이 시도해 보세요:

"이 프레임에 사용된 변수 이름과 값을 가져와."

사용자 지정 규칙 추가

새 개발자를 위한 온보딩 노트처럼 프로젝트 수준 지침을 설정하여 출력을 일관되게 유지합니다. 예를 들면:

선호하는 레이아웃 기본 요소
파일 구성
명명 패턴
하드코딩하지 말아야 할 것

MCP 클라이언트가 지침 파일에 사용하는 형식으로 제공할 수 있습니다.

예시:

일관된 우수 출력 보장

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework.  Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
- Validate the final UI against the Figma screenshot for both look and behavior.

Cursor

---
description: Figma MCP server rules
globs:
alwaysApply: true
---
- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Claude Code

# MCP Servers

## Figma MCP server rules

- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

일반 품질 규칙

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

이를 한 번 추가하면 반복적인 프롬프트의 필요성이 크게 줄어들고 팀원이나 에이전트가 동일한 기대치를 일관되게 따르도록 보장할 수 있습니다.

IDE 또는 MCP 클라이언트의 문서에서 규칙 구성 방법을 확인하고 팀에 가장 적합한 방법을 실험해 보세요. 명확하고 일관된 지침은 더 나은 재사용 가능한 코드와 더 적은 왕복으로 이어지는 경우가 많습니다.

큰 선택 항목 분할

더 빠르고 안정적인 결과를 위해 화면을 더 작은 부분(컴포넌트 또는 논리적 청크)으로 분할하세요.

큰 선택 항목은 도구 속도를 저하시키거나 오류를 유발하거나 불완전한 응답을 초래할 수 있습니다. 특히 모델이 처리하기에 너무 많은 컨텍스트가 있을 때 그렇습니다. 대신:

더 작은 섹션이나 개별 컴포넌트(예: 카드, 헤더, 사이드바)에 대한 코드를 생성합니다.
느리거나 멈춘 것 같으면 선택 항목 크기를 줄입니다.

이렇게 하면 사용자와 모델 모두에게 컨텍스트를 관리 가능하게 유지하고 결과를 더 예측 가능하게 만드는 데 도움이 됩니다.

출력에서 무언가가 올바르지 않아 보이면 기본 사항을 다시 검토하는 것이 도움이 되는 경우가 많습니다: Figma 파일 구성 방식, 프롬프트 작성 방식, 전송되는 컨텍스트. 위의 모범 사례를 따르면 큰 차이를 만들 수 있으며 더 일관되고 재사용 가능한 코드로 이어지는 경우가 많습니다.

에이전트에 컨텍스트 제공

Make + MCP 통합을 사용하면 프로토타입을 디자인에서 프로덕션으로 전환하는 과정이 더 쉬워집니다. Make 프로젝트를 MCP를 통해 에이전트에 직접 연결하면 리소스를 추출하여 코드베이스에서 재사용할 수 있습니다. 이는 프로토타입을 실제 애플리케이션으로 확장할 때 발생하는 마찰을 줄이고, 디자인 의도가 구현 단계까지 충실히 전달되도록 보장합니다.

이 통합을 통해 다음을 수행할 수 있습니다:

프로젝트 컨텍스트 가져오기: Make에서 직접(개별 파일 또는 전체 프로젝트)
기존 코드 컴포넌트 사용 프롬프트: 처음부터 시작하는 대신 기존 컴포넌트를 활용
실제 데이터로 프로토타입 확장: 디자인 검증 및 프로덕션 준비를 더 빠르게

작동 방식

[!NOTE] 이 통합은 MCP 리소스 기능을 활용하며, 에이전트가 Make 프로젝트에서 직접 컨텍스트를 가져올 수 있게 합니다. MCP 리소스를 지원하는 클라이언트에서만 사용할 수 있습니다.

Make에서 리소스를 가져오는 단계

에이전트에 컨텍스트 가져오기를 프롬프트: 유효한 Make 링크를 제공
사용 가능한 파일 목록 수신: Make 프로젝트에서 파일 목록을 받기
원하는 파일 다운로드: 프롬프트에 따라 파일을 가져오기

예시 워크플로우

목표: Make에서 정의된 디자인과 동작에 맞는 팝업 컴포넌트를 프로덕션 코드베이스에 구현합니다.

에이전트와 Make 프로젝트 링크를 공유합니다.
에이전트에게 프롬프트: "이 Make 파일에서 팝업 컴포넌트의 동작과 스타일을 가져와서 내 팝업 컴포넌트로 구현하고 싶습니다."

에이전트는 Make에서 관련 컨텍스트를 가져와 프로토타입의 기능과 스타일로 기존 팝업 컴포넌트를 확장하는 방법을 안내합니다.

아이콘 가이드라인

이 저장소에 포함된 아이콘을 표시하려면 Figma 브랜드 사용 가이드라인을 참조하세요.