디자인 있을 때마다 Figma 캡처 찍어서 Claude한테 붙여넣고 '이거 구현해줘' 하는 게 루틴이었다.

퇴근하고 만지는 사이드 프로젝트라 빠르게 가고 싶었던 거긴 한데, 이 방식이 얼마나 비효율이었는지 Figma-Context-MCP 써보고 처음으로 알았다. Figma에서 레이아웃 잡고 → 스크린샷 → Claude Code에 이미지 첨부 → '이 느낌으로 컴포넌트 만들어줘'. 전형적인 바보짓이었던 거다.

Figma-Context-MCP(Framelink MCP라고도 함)는 Figma 파일 레이아웃 데이터를 AI 코딩 에이전트한테 직접 넘겨주는 MCP 서버다. GitHub 별 15,000개 넘음.

작동은 단순해. IDE 채팅 열고 Figma 링크 붙여넣고 '이 디자인 구현해줘' 하면, AI가 Figma API 직접 쿼리해서 레이아웃 메타데이터 읽어오고 코드 짠다. 이미지 보고 수치 추측하는 게 아니라 실제 설계 데이터 기반으로 짜는 거라, 정확도가 다를 수밖에.

README에 직접 명시된 내용이기도 한데, 스크린샷보다 one-shot 디자인 구현 정확도가 훨씬 높다고. 써보면 진짜 차이 난다. 특히 패딩값이나 폰트 크기, 색상 코드 같은 수치. 캡처로 '이 파란색이요' 하면 Claude가 어림잡아 비슷한 값 넣어주는데, Figma 데이터로 넘기면 정확한 hex값이 바로 나온다. 이게 쌓이면 'UI 뭔가 어색한데' 수정하는 횟수가 눈에 띄게 줄어듦.

원래 Cursor 기준으로 만들어진 도구인데, MCP 프로토콜 기반이라 Claude Code에도 붙일 수 있다. npm으로 설치하고 Claude Code MCP 설정에 등록하면 됨. Figma 링크 하나 던지는 것만으로 Claude가 레이아웃 구조를 읽어온다. 프레임이든 컴포넌트 단위든 링크만 있으면 됨.

내 패턴은 이렇다. Figma에서 특정 섹션 링크 복사 → Claude Code 채팅에 던지고 'React 컴포넌트로 만들어줘' → 바로 구현. 캡처 찍는 단계 없어짐. '대략 이런 느낌' 설명하는 단계도 없어진다. Figma 링크 하나가 설계도 역할을 다 하는 거다.

'Figma 안 쓰고 Claude한테 디자인까지 다 시키는 게 더 편하다'는 사람도 분명 있을 거다. 그게 틀린 말도 아니고. 근데 디자인 퀄리티 제대로 잡고 싶을 때는 이 조합이 맞는 것 같다. 별 15,000개가 이유 없이 달리진 않더라.

출처: GitHub — GLips/Figma-Context-MCP