개구리··3분 읽기
디자이너를 위한 피그마 MCP 가이드
MCP에 대한 개념을 몰라도 됩니다. MCP가 뭔가 좋다는 정도만 알고 있어도 시작할 수 있는 가이드입니다.
Figma MCP의 새로운 기능
Figma MCP를 이용하면 Figma에 있는 디자인을 코드로 가져올 수 있다는 것을 들어보셨을텐데요. 사실 이게 연결하기도 귀찮고, 바이브 코딩을 하다보면 코드에서 조금씩 디자인을 수정하다보니 Figma와 괴리가 커지게 됩니다. 그래서 바이브 코딩을 하다보면 오히려 코드에 디자인이 담겨 있는 경우가 많이 생깁니다.
최근 Figma 업데이트로 이런 상황에서 아주 유용한 기능이 추가되었는데요. 바로 Code To Canvas입니다. 클로드 코드에서 Figma MCP를 활용하면 우리의 코드를 피그마로 보낼 수 있습니다. 단순히 스크린샷을 찍어서 올리는 것이 아니라, 편집 가능한 피그마 레이어로 구성을 합니다.
이를 통해 다음과 같은 무한 요리 지옥이 가능해졌습니다. “Figma에서 UI 디자인 → 코드로 가져와서 테스트 → 코드에서 세부 디테일 수정 → Figma에 다시 반영”
Code To Canvas 설정 가이드
Figma MCP 설정 가이드를 알려드리겠습니다. 해당 글은 26.03.30 기준으로 작성되었으며 버전에 따라 적용 방법이 다를 수 있습니다.
1. 준비물
Claude Code Desktop 앱이 아닌 터미널에서 /claude 명령어로 실행되는 Claude Code CLI가 필요합니다.
Full Seat 권한이 필요합니다.
2. MCP 설정
Claude Code Desktop에서 설정을 하게 되면 인증이 쉽게 진행되지 않는 경우가 발생합니다. 본 글은 터미널에서 실행되는 Claude Code CLI를 이용해서 MCP를 설정합니다.
터미널에서 명령어 입력하기
터미널을 실행하고 아래의 명령어를 복사하고 엔터를 누르세요. 위와 같이 “File modified...”라고 나오면 성공입니다.
claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp인증 진행하기
Claude CLI에서 프롬프트를 입력하는 곳에 /mcp 명령어를 입력하면 사용 가능한 mcp 목록에 figma가 보입니다.
아직 needs authentication 로 표시되어 있습니다. Figma에 로그인이 되지 않은 상태를 의미합니다. figma-remote-mcp를 체크하고 엔터를 누르면 웹으로 이동되고 간편하게 인증을 진행하면 됩니다.
성공적으로 인증이 되었다면 다시 /mcp를 입력하고 Figma를 선택하면 위와 같이 피그마에서 사용 가능한 도구들을 확인할 수 있습니다.
3. Claude에게 명령하기
Claude CLI에 내 프로젝트를 피그마로 보내달라고 명령합니다. 이 때, 클로드가 generate_figma_design 도구를 사용하면 성공입니다. 만약 제대로 실행해주지 않는다면 “generate_figma_design를 이용해서 Figma로 보내줘”라고 명령해도 됩니다.
Claude가 로컬 서버를 실행하고 작업을 진행합니다.
내 코드를 편집 가능한 피그마 컴포넌트로 생성을 완료했습니다.
글을 마치며
Claude Code Desktop만 사용해봤다면 어려울 수도 있습니다. 하지만 Claude CLI를 이용해 한 번 제대로 설정을 해둔다면 Figma MCP가 제공하는 모든 기능들을 사용할 수 있게 됩니다. 게다가 대부분의 MCP의 설정이 유사하기 때문에 필요에 따라 여러 서비스들을 Claude에 붙여서 더욱 생산적으로 일을 할 수 있게 됩니다.
더 유용한 MCP 정보는 https://code.claude.com/docs/ko/mcp 에 있습니다.
더 유용한 바이브 코딩 정보는 작당 블로그에 있습니다. 감사합니다.