Figma Context MCP
피그마 레이아웃을 텍스트로 넘기는 MCP 서버
npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio피그마 파일 링크를 주면 레이아웃과 스타일 정보를 코딩 에이전트에 넘기는 MCP 서버입니다. 스크린샷을 붙여넣는 방식과 달리 피그마 API 응답에서 필요한 부분만 추려 전달하므로 모델에 들어가는 컨텍스트가 줄어듭니다. 피그마 개인 액세스 토큰이 필요합니다.
판단
이럴 때 씁니다
- 피그마 시안을 코드로 옮기는 작업을 에이전트에 맡길 때
- 스크린샷을 붙여넣는 방식으로는 간격과 색이 자꾸 틀릴 때
- 특정 프레임이나 그룹만 지정해 구현시키고 싶을 때
- 커서 같은 에이전트 모드 IDE 를 이미 쓰고 있을 때
이럴 땐 쓰지 마세요
- 피그마 액세스 토큰을 발급할 수 없는 환경일 때
- 디자인이 피그마가 아닌 다른 도구에 있을 때
- 시안이 아니라 실제 렌더된 화면을 봐야 할 때는 브라우저 MCP 가 맞습니다
차별점
- 피그마 API 응답을 그대로 넘기지 않고 레이아웃과 스타일만 추려 컨텍스트를 줄입니다.
- 링크 하나로 파일·프레임·그룹 단위를 골라 지정합니다.
- 스크린샷 판독에 기대지 않아 수치가 정확합니다.
- 설정 파일 한 줄로 붙습니다.
워크플로
- 01피그마에서 개인 액세스 토큰을 만듭니다.
- 02MCP 클라이언트 설정에 figma-developer-mcp 를 등록하고 토큰을 인자로 넘깁니다.
- 03IDE 채팅에 피그마 파일·프레임·그룹 링크를 붙여넣습니다.
- 04구현을 지시하면 에이전트가 필요한 레이아웃 정보를 받아 코드를 씁니다.
주요 명령
| 명령 | 설명 |
|---|---|
npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio | stdio 전송으로 서버를 실행합니다. 클라이언트 설정의 command 에 넣습니다. |
함정
설치 전에 확인하세요
- 피그마 개인 액세스 토큰이 반드시 필요하며 설정 파일에 그대로 들어가므로 저장소에 커밋하지 않도록 주의해야 합니다.
- 커서를 염두에 두고 만들어졌습니다. 다른 클라이언트에서는 동작이 다를 수 있습니다.
- 패키지 이름이 저장소 이름과 다릅니다. npm 에서는 figma-developer-mcp 입니다.
- 마지막 커밋이 2026-06-24 로 최근 두 달 조용하지만, 그 직전 6개월간 81건이 들어온 프로젝트입니다.
비교
스크린샷을 붙여넣는 방식은 모델이 픽셀을 보고 값을 추측하므로 간격과 색이 어긋나기 쉽습니다. 이쪽은 피그마가 가진 실제 수치를 넘깁니다. 다만 시안이 아니라 브라우저에 렌더된 결과를 확인해야 하는 단계라면 Playwright MCP 쪽이 맞습니다.
최근 변경
2026-06-18 v0.13.2 에서 그라디언트 채우기에 페인트 단위 불투명도를 적용하고, 스타일 비교를 정규화된 형태로 바꿨습니다. 이후 커밋은 종횡비 처리 보정에 머물러 있습니다.