Figma

Figma MCP 서버 가이드

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

[!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 프레임을 선택하고 코드로 변환합니다. 새로운 플로우를 구축하거나 앱 기능을 반복 개선하는 제품 팀에 유용합니다.

• 디자인 컨텍스트 추출

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

• Code Connect로 더 스마트한 코드 작성

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

  Code Connect 자세히 알아보기 →

• 웹 페이지에서 Figma 디자인 생성 (점진적 출시 중)

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

설치 및 설정

Figma MCP 서버에 연결

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

VS Code

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

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

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

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

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

Cursor

Cursor에서 Figma MCP 서버를 설정하는 권장 방법은 Figma 플러그인을 설치하는 것입니다. 이 플러그인에는 MCP 서버 설정과 일반적인 워크플로우를 위한 에이전트 스킬이 포함되어 있습니다.

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

/add-plugin figma

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

• Figma MCP 서버용 MCP 서버 구성
• 디자인 구현, Code Connect를 통한 컴포넌트 연결, 디자인 시스템 규칙 생성을 위한 스킬
• Figma MCP 서버에서 자산을 올바르게 처리하기 위한 규칙

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

Claude Code

Claude Code에서 Figma MCP 서버를 설정하는 권장 방법은 Figma 플러그인을 설치하는 것입니다. 이 플러그인에는 MCP 서버 설정과 일반적인 워크플로우를 위한 에이전트 스킬이 포함되어 있습니다.

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

claude plugin install figma@claude-plugins-official

Anthropic의 Claude Code 플러그인 및 에이전트 스킬에 대해 자세히 알아보세요.

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

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 디자인 컨텍스트를 제공하려면:

1. Figma에서 프레임 또는 레이어에 대한 링크를 복사합니다.
2. 선택한 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)
• 새 파일을 생성하는 대신 기존 파일에 코드 추가 또는 수정
• 특정 레이아웃 시스템을 따름 (예: 그리드, flexbox, absolute)

예시:

• "이 프레임에서 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 클라이언트의 문서에서 규칙 구성 방법을 확인하고 팀에 가장 적합한 방법을 실험해 보세요. 명확하고 일관된 지침은 더 나은 재사용 가능한 코드와 더 적은 왕복으로 이어지는 경우가 많습니다.

큰 선택 항목 분할

화면을 더 작은 부분(컴포넌트 또는 논리적 청크)으로 나누면 더 빠르고 안정적인 결과를 얻을 수 있습니다.

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

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

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

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

에이전트에 Make 컨텍스트 가져오기

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

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

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

작동 방식

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

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

1. 에이전트에 컨텍스트 가져오기를 프롬프트 — 유효한 Make 링크를 제공
2. 사용 가능한 파일 목록 수신 — Make 프로젝트에서
3. 가져올 파일 다운로드 — 프롬프트 시

예시 워크플로우

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

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

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

아이콘 가이드라인

이 저장소에 포함된 아이콘을 표시하려면 Figma Brand Usage Guidelines을 참조하세요.