시작하기 전에
이 기능을 사용할 수 있는 사용자
원격 서버는 모든 시트 및 요금제에서 사용할 수 있습니다.
데스크톱 서버는 데브 또는 풀 시트에서 모든 유료 요금제에 사용할 수 있습니다.
MCP 서버를 지원하는 코드 편집기 또는 애플리케이션을 사용해야 합니다(예: VS Code, Cursor, Windsurf, Claude Code, Codex). 지원되는 클라이언트의 전체 목록은 MCP 카탈로그를 참조하세요.
Figma MCP 서버는 개발자가 디자인을 빠르고 정확하게 탐색하고 구현하도록 돕습니다.
- Figma Design, FigJam 및 Make 파일에서 디자인 맥락과 코드를 받으세요
- 라이브 UI를 디자인 레이어로 캡처하여 코드에서 렌더링된 인터페이스를 Figma Design 파일로 가져오세요
- 디자인 컴포넌트와 Code Connect를 활용해 작업 방식을 개선하세요
참고: 이 가이드는 Figma MCP 서버에서 제공되는 기능을 개략적으로 살펴보는 안내입니다. 서버 사용 방법과 예시 프롬프트에 대한 자세한 지침은 다음을 참조하세요.
추가로 자세한 문서는 Figma 개발자 문서에서 확인할 수 있습니다.
MCP 서버 내 도구는 Figma의 코드가 기존 시스템에만 맞지 않고 디자인에도 적절히 맞도록 Figma에서 업무 흐름으로 추가 컨텍스트를 가져옵니다.
MCP 서버는 AI 에이전트가 모델 컨텍스트 프로토콜을 사용하여 데이터 소스와 상호 작용할 수 있는 표준화된 인터페이스의 일부입니다.
MCP 서버 및 Figma를 업무 흐름에 통합하는 방법에 대한 자세한 내용은 Figma MCP 컬렉션을 참조하세요 →
참고: 이 페이지는 일반적인 Figma MCP 서버 개요입니다. 자세한 지침과 코드 샘플은 Figma MCP 서버 개발자 문서를 참조하세요.
서버가 활성화되면 다음을 수행할 수 있습니다.
-
웹 앱과 사이트의 라이브 UI에서 디자인을 생성하세요
브라우저의 라이브 UI(프로덕션, 스테이징 또는 localhost)를 Figma에서 편집 가능한 디자인 레이어로 변환하세요. 탐색, 정렬 및 개선 작업을 위해 페이지, 요소 또는 전체 흐름을 Figma Design으로 보내세요.
참고: 이 기능을 사용하려면 원격 Figma MCP 서버가 필요하며, 현재 Claude Code, Codex by OpenAI 및 VS Code에서만 지원됩니다.
이 기능은 지속적으로 개선되고 있습니다. 문제가 발생하면 Fig(저희 지원 챗봇)을 사용하거나 이메일로 지원팀에 문의하기(유료 요금제)를 통해 문제를 보고할 수 있습니다.
-
선택한 프레임에서 코드 생성
Figma 프레임을 선택하고 코드로 변환합니다. 새로운 흐름을 만들거나 앱 기능을 반복 작업으로 개선하는 제품 팀에게 적합합니다.
-
디자인 컨텍스트 추출
변수, 컴포넌트, 레이아웃 데이터를 직접 IDE로 가져옵니다. 디자인 시스템과 컴포넌트 기반 업무 흐름에 특히 유용합니다.
-
FigJam 리소스 가져오기
FigJam 다이어그램의 콘텐츠에 접근하여 코드 생성 업무 흐름에서 사용하세요. 초기 아이디어, 흐름 또는 아키텍처 맵을 직접 개발에 통합하세요.
-
Make 리소스 가져오기
Make 파일에서 코드 리소스를 수집하고 이를 LLM에 컨텍스트로 제공하세요. 이는 프로토타입에서 생산 애플리케이션으로 전환하는 데 도움이 될 수 있습니다.
-
Code Connect를 통해 디자인 시스템 컴포넌트를 일관적으로 유지하세요
실제 컴포넌트를 재사용하여 출력 품질을 향상시킵니다. Code Connect는 생성된 코드와 코드베이스를 일관성 있게 유지합니다.
MCP 서버 설정
Figma MCP 서버에 연결하는 두 가지 방법은 다음과 같습니다.
- 원격 MCP 서버: https://mcp.figma.com/mcp에 있는 Figma의 호스팅 엔드포인트에 직접 연결됩니다. 원격 MCP 서버를 설치하는 방법을 알아보세요.
- 데스크톱 MCP 서버: Figma 데스크톱 앱을 통해 로컬에서 실행됩니다. 데스크톱 MCP 서버 설치 방법을 알아보세요.
MCP 서버를 편집기에 연결
사용 중인 편집기에 맞는 지침을 따라 Figma MCP 서버에 로컬 또는 원격으로 연결하세요. 일부 클라이언트는 Skills도 지원하며, 이는 에이전트 수준의 지침을 추가해 AI 도구가 Figma Design과 더 효과적으로 작업할 수 있도록 합니다.
| 고객 | 데스크톱 서버 지원 | 원격 서버 지원 | Skills 지원 |
| Amazon Q | ✓ | ||
| Android Studio | ✓ | ✓ | |
| Claude Code | ✓ | ✓ | |
| Codex by OpenAI | ✓ | ✓ | |
| Cursor | ✓ | ✓ | |
| Gemini CLI | ✓ | ✓ |
|
| Kiro | ✓ | ✓ | |
| OpenHands | ✓ |
|
|
| Replit | ✓ |
|
|
| VS Code | ✓ | ✓ |
|
| Warp | ✓ | ✓ |
|
Skills 소개
Skills는 MCP 도구 호출과 자세한 지침을 조합해 에이전트가 특정 작업을 완료하는 방법에 대한 안내를 제공합니다.
Figma MCP 서버는 개별 도구를 제공하지만, Skills는 에이전트가 어떤 도구를 사용해야 하는지, 이를 어떤 순서로 사용할지 그리고 Figma Design 작업 시 결과를 어떻게 적용할지 이해하도록 돕습니다.
Skills는 다음과 같은 업무 흐름을 통해 에이전트를 안내할 수 있습니다.
- Code Connect를 사용해 Figma Design 컴포넌트를 코드 컴포넌트에 연결합니다
- 코드베이스에 맞춘 디자인 시스템 규칙을 생성하세요
- 디자인을 프로덕션 환경에서 바로 사용할 수 있는 코드로 변환하세요
Skills는 MCP 연결을 대체하거나 새로운 MCP 기능을 추가하지 않습니다. 권장 작업 흐름을 재사용 가능한 지침으로 구성해 설정 과정과 추측을 줄입니다.
팁: 지원되는 편집기 및 클라이언트의 최신 목록은 MCP 카탈로그를 확인하세요.
MCP 클라이언트 실행
Figma MCP 서버에는 LLM이 Figma에서 디자인을 번역하는 데 도움이 되는 도구 세트가 있습니다. 연결되면 MCP 클라이언트가 특정 디자인 노드에 액세스하도록 요청할 수 있습니다.
도구의 전체 목록과 예시는 도구 및 프롬프트를 참조하세요.
먼저, 선호하는 MCP 클라이언트용 Figma MCP 서버 설치 지침을 따르세요. 다음에 대한 지침을 제공합니다.
다른 MCP 클라이언트를 사용하는 경우, MCP 서버를 추가하려면 해당 클라이언트 문서의 지침을 따르세요. 링크는 편집기에 MCP 서버 연결하기 아래의 표에서 확인하세요.
예: 디자인 맥락 가져오기
파일에서 디자인 맥락과 코드를 가져오는 것은 링크 기반입니다. 디자인 맥락을 가져오려면:
- Figma Design에서 디자인 맥락을 가져오려는 레이어를 선택하세요.
- 브라우저 주소 표시줄에서 Figma의 프레임 또는 레이어에 대한 링크를 복사하세요.
-
MCP 클라이언트에서 URL을 붙여넣고 디자인 구현을 도와달라고 클라이언트에 프롬프트하세요.
클라이언트는 선택한 URL로 직접 이동할 수는 없지만, MCP 서버가 어떤 개체의 정보를 반환해야 하는지 식별하는 데 필요한 노드 ID를 추출합니다.
예: UI를 Figma로 보내기
참고: 현재는 원격 Figma MCP 서버를 Claude Code, Codex by OpenAI 및 VS Code에서만 사용할 수 있습니다.
웹 앱이나 사이트의 라이브 UI를 Figma로 보내는 작업은 MCP 클라이언트와의 대화를 통해 이루어집니다.
- MCP 클라이언트에 다음을 프롬프트하세요. "내 앱의 로컬 서버를 시작하고 UI를 새 Figma 파일에 캡처하세요."
- 클라이언트가 제공하는 단계를 따르세요. 클라이언트가 브라우저 창을 열어 주거나, 이동할 수 있는 링크를 제공합니다.
- 캡처 도구 모음을 사용해 웹 앱 또는 사이트의 페이지, 요소 및 상태를 캡처하세요.
- 작업을 마치면 클라이언트에 알려주세요. 클라이언트가 생성된 Figma 파일을 열 수 있는 링크를 제공합니다.
MCP 서버 출력을 개선하기
최상의 결과를 얻으려면 에이전트를 안내할 규칙을 설정하는 것이 좋습니다. 시작하는 데 도움이 되도록 몇 가지 유용한 예시 규칙을 제공합니다.