Figma MCP로 디자인-코드 격차 줄이기: CursorAI 연동
“Figma MCP가 필요했던 이유”
여러분은 디자인 시안이 막바지에 접어들 무렵 “이 버튼 높이 얼마였죠?” “마진 8px인가요 6px인가요?” 같은 얘기를 하루에도 몇 번씩 주고받으신 적이 있으신가요? 저 역시 15년간 프론트엔드와 백엔드를 오가며 수없이 경험했습니다. 이런 반복적인 질문은 프로젝트 속도를 떨어뜨리고, 나아가 개발자와 디자이너 모두에게 피로감을 줍니다.
그래서 최근 Cursor(AI 코딩 파트너)에 새로 추가된 MCP(Multi-Context Provider) 아키텍처가 무척 눈길을 끌었습니다. 특히 Figma MCP라는 오픈소스가 등장하면서, “로컬에 작은 서버 하나만 띄우면 Figma 디자인 정보가 VS Code처럼 자동 주입될 수 있겠구나!”라는 생각이 들었습니다.
저는 호기심 반, 필요 반으로 바로 실험에 돌입했습니다. 결론부터 말씀드리면 ‘첫 술에 배부르진 않았지만 충분히 실전 투입 가능성을 확인’했습니다. 지금부터 그 과정을 단계별로 자세히 공유합니다. 읽으시는 동안 “나도 한번 써볼까?” 하는 동기가 생기셨으면 좋겠습니다.
단계별 셋업 로그와 실전 삽질기
1. Figma API 토큰 발급
- Figma에 로그인하신 뒤 프로필 → Settings → Security로 이동해 주세요.
- Generate new token 버튼을 누르고, 예를 들어 figma-mcp-token 같은 라벨을 지정합니다.
- 생성된 토큰을 즉시 복사해 안전한 곳에 저장하세요. 토큰은 화면에 단 한 번만 노출됩니다.
참고로, 발급된 토큰의 기본 유효 기간은 30일입니다. 사내 자동화 파이프라인에 올리실 계획이라면 만료 주기에 맞춰 재발급 스크립트를 미리 준비하시길 권장드립니다.
2. MCP 서버 빌드 및 실행
- 저장소 복제
git clone git@github.com:GLips/Figma-Context-MCP.git
cd Figma-Context-MCP- 의존성 설치
처음 실행했을 때 pnpm: command not found라는 오류가 발생했습니다. 전역으로 pnpm이 없었기 때문인데요, 다음과 같이 해결했습니다.
npm install -g pnpm # pnpm 전역 설치
pnpm install # 의존성 설치- 환경 변수 설정
cp .env.example .env로 복사 후, FIGMA_API_KEY 항목에 1단계에서 받은 토큰을 넣어 주세요. 포트는 기본 3333을 유지했습니다.
# Your Figma API access token
# Get it from your Figma account settings: https://www.figma.com/developers/api#access-tokens
FIGMA_API_KEY=<your-figma-api-key>
# Server configuration
PORT=3333- 서버 실행
npx figma-developer-mcp --figma-api-key=<your-figma-api-key>정상적으로 기동되면 Listening on http://localhost:3333 메시지가 출력됩니다.
3. Cursor AI 설정
Cursor AI 메뉴 File → Preferences → Cursor Settings → MCP 메뉴에서 Add new global MCP Server를 선택하고, mcp.json 편집 창이 열립니다.
mcp.json 편집창에 type에 sse, url에 http://localhost:3333/sse 를 다음과 같이 입력합니다.
{
"mcpServers": {
"Figma MCP": {
"type": "sse",
"url": "http://localhost:3333/sse"
}
}
}4. Cursor AI Agent 실행 테스트
- 코드로 변경할 Figma 디자인 컴포넌트 URL 복사
Figma 컴포넌트 URL : 우클릭 → Copy/Paste as → Copy link to selection
- Cursor AI Agent 요청
Figma에서 복사한 URL 을 입력하고 코드로 구현 요청을 하면 해당 디자인에 대한 코드를 자동 생성할 수 있습니다.
- Figma → Code 자동 생성 결과
개발을 진행하다 보면 퍼블리셔와 일정 조율이 쉽지 않은 경우가 많은데요, 최근에는 Figma MCP를 활용해 코드를 생성해보니 기대 이상으로 퀄리티가 괜찮더라고요. 꽤 실용적이라 앞으로도 자주 활용하게 될 것 같은 느낌입니다.
5. 자주 마주치는 오류와 해결 팁
- 토큰 만료 오해
토큰이 발급 직후 곧바로 만료된다는 문의가 많았습니다. 실제로는 30일간 유효하며, 조직 플랜에 따라 범위 제한이 달라질 뿐입니다. - pnpm vs npm
pnpm은 하드 링크 방식이라 속도가 빠르고 디스크 사용량이 적습니다. 다만, 일부 CI 파이프라인에서는 라이선스 검증을 통과하지 못하는 사례가 있어 npm으로 fallback해야 하는 경우도 있었습니다. - 포트 충돌
로컬에서 3333 포트를 이미 다른 서비스가 사용 중이라면.env에서 포트를 바꾸고 Cursor 등록 주소도 함께 수정해 주세요.
“로컬 MCP는 협업 피로를 줄여 주는 생산성 점프대”
하루 동안의 테스트만으로도 팀 내 “사소한 질문 왕복”이 눈에 띄게 줄어드는 효과를 봤습니다. 물론 아직은 네이티브 통합 수준이 아니어서, 스니펫 매칭 정확도를 더 끌어올려야 하지만요.
다음 목표는 커스텀 MCP를 직접 제작해, Jira 이슈나 Notion 문서까지 한 번에 끌어오는 것입니다. 그렇게 되면 디자인·기획·개발 문맥을 전부 Cursor 한곳에서 호출할 수 있겠죠.
여러분도 Figma MCP를 한 번 시도해 보시길 권합니다. 토큰 하나, 서버 하나만으로 협업 난이도를 ‘한 단계’가 아니라 ‘한 계단’ 크게 낮춰 주니 말이죠. 사용 중 겪으신 궁금증이나 팁이 있으시면 댓글로 편하게 나눠 주세요. 함께 더 나은 워크플로를 찾아가면 좋겠습니다!
