초간단한 Figma MCP 사용 방법

Claude Code에서 Figma MCP 를 간단하게 사용해보자. 회사에서 디자인팀이 figma를 사용하거나, 진행중인 프로젝트에 피그마를 통해 디자인 한다면 시도할 수 있다.

피그마 공식문서에서 피그마 MCP를 사용하는 방법을 쉽게 설명하고 있다. 

사실 위 내용이 끝이다.. 피그마 데스크탑 앱이 설치되어 있어야 한다. Dev Mode 접근이 유료 기능이긴 한데, 이미 사용 중이라면 피그마 공식 가이드를 따라 MCP를 설정할 수 있다.

설정 자체는 간단하다. 공식 문서대로 진행하면 Claude MCP 목록에 figma-desktop이 나타난다. 연결에 성공하면 상태가 활성화되고, 피그마 Dev Mode에서 원하는 UI를 선택한 뒤 Claude에게 질문하면 해당 요소에 대해 잘 답해주는 걸 확인할 수 있다.

디자인과 프론트엔드 사이의 간극이 확 줄어든 느낌이다. 예전에는 피그마에서 수치를 일일이 확인하고 코드로 옮기는 과정이 번거로웠는데, 이제는 UI를 선택하고 바로 질문하면 된다. "이 버튼 스타일 Tailwind로 만들어줘" 같은 요청에 바로 코드가 나온다. 디자인을 보면서 코드를 작성하는 게 아니라, 디자인에게 코드를 물어보는 느낌이랄까. 단순 반복 작업이 줄어드니 실제 구현 로직에 더 집중할 수 있게 됐다.