설치방법

Figma 플러그인 설치

먼저, figma@claude-plugins-official 플러그인을 설치한다. 아래와 같이 공식 플러그인을 설치하면 MCP 서버 세팅과 일반적인 상황에서 필요한 에이전트 스킬이 자동으로 추가된다.

claude plugin install figma@claude-plugins-official 

Figma MCP 인증

Claude Code에서 /mcp 명령어를 입력한 후, figma를 선택해서 계정을 인증한다.

Figma 링크 복사

예시로 "봉달차"라는 디자인 파일을 만들어서 구인구직 사이트 메인화면을 구현해달라고 해볼 거다.

피그마에서 디자인 파일 생성 후 페이지 혹은 프레임을 선택해서 링크를 복사해준다.

• 페이지 링크 복사: 페이지 우클릭 > Copy link to page
• 프레임 링크 복사: 프레임 클릭 > Cmd + L

이제 Claude Code에서 아래와 같이 전달해준다.

/figma-use [피그마 페이지/프레임 링크] 구인구직 사이트 메인화면 디자인해줘 

💡 참고: 이후 같은 링크에서 수정할때는 따로 링크를 전달해주지 않아도 된다.

⚠️ 요금제 주의: Figma Starter 플랜 또는 View/Collab 시트 사용자는 월 6회의 MCP 도구 호출 제한이 있다. 충분히 테스트하려면 Dev/Full 시트가 필요하다. 또한 캔버스에 직접 쓰는 기능(Write to Canvas)은 현재 베타 기간 동안 무료로 제공되지만, 추후 유료 기능으로 전환될 예정이라고 함.

결과물 & 후기

테스트만 해보려고 CLAUDE.md 파일 없이 바로 요청해서 만든 거 치고는 퀄리티가 괜찮은 것 같다. 물론 바로 이런 모습은 아니었고, 처음 명령했을 때는 버튼의 Fill 속성이 부모 프레임 높이에 맞춰지거나 프레임 높이가 고정값으로 잘못 설정돼서 내부 요소가 잘리는 문제는 있었다.
그래도 간단하게 몇가지 요소들의 크기만 지정해서 수정 요청했더니 결과물이 나쁘지 않았다. CLAUDE.md로 기획 내용을 자세하게 작성하고 기본 디자인 시스템만 적용해두면 더욱 좋은 퀄리티가 나올 것 같아 기대된다 😎

참고사이트

Figma Developer - Installation&setup Figma Blog - Agents, meet the Figma canvas