Figma MCP
Figma 공식 MCP 서버. AI 에이전트가 디자인을 읽고 프로덕션 코드로 변환합니다.
설치
전송 방식: http
claude mcp add --transport http figma https://mcp.figma.com/mcp
도구 목록 (32)
get_design_context
Gets design context and code for a layer or selection (default output React + Tailwind).
get_metadata
Gets a lightweight XML outline of a selection (IDs, names, types, positions, sizes).
get_screenshot
Takes a screenshot of a selection so the agent can see the design.
get_variable_defs
Lists variables and styles used in a selection (colors, spacing, typography).
get_code_connect_map
Gets Code Connect mappings for selected instances.
get_code_connect_suggestions
Suggests Code Connect mappings (Figma-prompted workflow tool).
get_context_for_code_connect
Gets component metadata for Code Connect templates (remote only, Figma-prompted).
get_figjam
Converts FigJam diagrams to XML.
get_libraries
Lists subscribed and available libraries (remote only).
search_design_system
Searches libraries for components, variables, and styles (remote only).
download_assets
Downloads exports and original source images for up to 20 nodes (remote only).
get_motion_context
Gets keyframe animation data and CSS/Motion code snippets for an animated node.
get_shader
Reads a shader's source.
list_shaders
Lists shader effects and fills in your library.
list_file_shaders
Lists shaders used in a specific file (remote only).
get_generative_plugin
Reads a generative plugin's source (remote only).
list_generative_plugins
Lists generative plugins in your library (remote only).
whoami
Gets your identity, plans, and seats (remote only).
use_figma
General-purpose tool to create, edit, delete, or inspect content in Figma files (remote only).
create_new_file
Creates a blank Figma Design, FigJam, or Figma Slides file (remote only).
generate_figma_design
Turns live web UI into design layers (remote only).
generate_diagram
Generates a FigJam diagram from a description or Mermaid syntax (remote only).
generate_image
Generates and places an image in a Figma file (remote only).
html_to_figma
Converts an HTML document into design layers (remote only).
upload_assets
Uploads images and SVGs into a Figma file (remote only).
send_code_to_figma
Imports a local project into Figma as a Make file or code layer (remote only).
add_code_connect_map
Maps a Figma component to a code component.
send_code_connect_mappings
Confirms suggested Code Connect mappings (Figma-prompted).
create_shader
Creates a shader effect or fill starter (remote only).
update_shader
Updates a shader's source (remote only).
create_generative_plugin
Creates a generative plugin starter (remote only).
update_generative_plugin
Updates a generative plugin's source (remote only).
품질 및 보안 점수
가격
Free to connect; requires a Figma account. The remote server authenticates with your Figma login.
Figma MCP 리뷰: 디자인 파일을 프로덕션 코드로 바꾸기
디자인에서 코드로의 인계는 항상 같은 지점에서 막힙니다. 디자인은 Figma에, 코드는 에디터에 있고, 그 사이에 사람이 앉아 픽셀을 컴포넌트로 번역하며 간격, 색상, 동작을 추측합니다. 결과는 느리고, 정보가 손실되며, 작은 불일치는 리뷰에서야 드러납니다.
Figma MCP는 그 중간에서 사람을 빼냅니다. Figma 공식 MCP 서버로, Figma가 호스팅하는 원격 엔드포인트에 있으며, AI 에이전트가 디자인 파일에 직접 구조화된 방식으로 접근할 수 있습니다. 프레임, 컴포넌트, 변수, 코드 레이어를 Figma가 저장하는 그대로 읽고 구현을 작성합니다. 디자인에서 코드로의 변환은 MCP의 대표적인 사용 사례이며, 이것이 공식적인 방법입니다.
Figma MCP란?
Figma MCP는 Figma가 운영하는 원격 MCP 서버입니다. 클라이언트를 Figma 엔드포인트에 하나의 명령어나 짧은 JSON으로 연결하고 Figma 계정으로 로그인하면, 에이전트는 디자인을 가져오고, 변수를 확인하고, 코드를 생성할 수 있습니다. 로컬에서 서버를 실행하거나 패키지를 설치할 필요가 없습니다. 서버는 Figma 쪽에 있고 클라이언트는 HTTP로 통신합니다.
서버는 읽기 18개, 쓰기 14개, 총 32개의 도구를 제공합니다. 읽기 도구는 디자인, 프레임, 특정 노드를 가져오고, 변수와 컴포넌트를 나열하고, 스크린샷을 찍습니다. 쓰기 도구는 프레임을 만들고 편집하며, 텍스트와 레이아웃을 설정하고, 변수를 적용합니다. 공식 가이드 저장소에는 에이전트의 사용법을 가르치는 플러그인과 스킬이 있으며, 깔끔한 컴포넌트 기반 출력을 만드는 디자인에서 코드로의 워크플로가 포함되어 있습니다.
주요 기능
1. 모든 디자인을 구조화된 데이터로 읽기
에이전트는 디자인, 프레임, 노드를 스크린샷 추측이 아니라 구조화된 데이터로 가져옵니다. 레이아웃, 텍스트, 색상, 간격, 컴포넌트 구조가 모두 데이터로 전달되어 에이전트가 추론하고 충실히 재현할 수 있습니다.
2. 픽셀이 아닌 변수와 디자인 시스템
색상, 서체, 간격 변수가 직접 공개되므로 생성된 코드는 값을 하드코딩하는 대신 디자인 토큰을 사용합니다. 출력은 디자인 시스템과 일치한 상태를 유지하며 일회성 스타일로 흐트러지지 않습니다.
3. Figma에 다시 쓰기
쓰기 도구를 사용하면 에이전트가 Figma 안에서 프레임을 만들고, 텍스트를 편집하고, 레이아웃을 조정할 수 있습니다. 루프는 양방향입니다. 디자인에서 코드로, 그리고 코드 주도의 편집이 디자인 파일로 돌아갑니다.
4. 시각 확인용 스크린샷
에이전트는 프레임이나 파일 전체의 스크린샷을 가져와 자신의 출력을 디자인과 대조하고, 시각적 차이를 스스로 수정할 수 있습니다. 눈을 감고 납품하는 일이 없습니다.
5. 공식 스킬과 플러그인
공식 가이드 저장소에는 Figma 플러그인과 기성 스킬이 있어 에이전트에게 디자인에서 코드로의 워크플로를 가르칩니다. 프레임 선택법, 컴포넌트 다루는 법, 생성 코드 구성법 등이 포함됩니다.
작동 방식
MCP 클라이언트를 Figma 원격 엔드포인트에 연결하고 Figma 계정으로 인증합니다. Claude Code에서는 하나의 명령어, Cursor와 VS Code에서는 짧은 JSON입니다. 연결되면 에이전트에게 Figma 파일이나 특정 프레임을 지정해 구현하게 합니다. 에이전트는 디자인 데이터를 읽고 프로젝트에 코드를 생성하며, 스크린샷으로 결과가 디자인과 일치하는지 확인할 수 있습니다.
서버는 Figma가 호스팅하는 원격 서비스이므로 직접 유지하거나 계속 실행할 필요가 없습니다. 접근은 Figma 계정으로 관리되며 에이전트는 허용한 파일만 볼 수 있습니다.
누가 사용하면 좋을까
Figma 디자인을 구현하는 프론트엔드 개발자, 디자인 시스템을 유지하는 디자인 엔지니어, 인계를 병목으로 만들고 싶지 않은 프로덕트 팀입니다. 워크플로가 이미 Figma와 코딩 에이전트로 돌아가고 있다면, 이 연결이 둘을 직접 대화하게 합니다.
가격
연결은 무료이며 Figma 계정이 필요합니다. 원격 서버는 Figma 로그인으로 인증하고 사용량은 Figma 플랜을 따릅니다.
장점과 단점
장점
- 공식 서버: 디자인 데이터는 권위 있는 출처이며 스크래핑이나 추측이 아님
- 원격 호스팅: 로컬 설치, 실행, 업데이트가 필요 없음
- 변수와 디자인 토큰이 데이터로 전달되어 출력이 체계 안에 머묾
- 읽기와 쓰기 양방향, 스크린샷 검증 가능
단점
- 독점 약관: 서버와 데이터는 Figma 개발자 약관을 따르며 오픈 라이선스가 아님
- Figma 계정과 Figma 호스팅 엔드포인트에 대한 네트워크 접근이 필요
- Claude Desktop에는 공개된 JSON 설정이 없어 Figma 커넥터를 통해 연결해야 함
최종 평가
제품이 Figma에서 디자인되고 AI 에이전트가 구축한다면, 이것이 가장 먼저 설치해야 할 MCP 서버입니다. 공식이며 호스팅되고, 소프트웨어 개발에서 가장 흔한 인계를 디자인과 코드 사이의 직접 대화로 바꿉니다. 하나의 프레임부터 시작해 출력과 디자인을 비교하고 에이전트 스스로 격차를 메우게 하세요.








