오늘 figma mcp server를 ai agent와 연결해서 활용하는 방법에 대한 세미나를 들었다.
"이렇게나 간편하고 편하게 디자인을 코드로 구현할 수 있는 방법이 있다고?"
ai 사용에 대해 아직 좀 회의적이지만 이 기술은 너무나 인상적이어서 사용해보고 싶었다.
세미나가 종료된 후 바로 claude code에 figma mcp server를 연결해봤다.
claude cli를 활용하니 연결은 간단하게 됐다.
claude code와 figma mcp server 연결 방법
먼저 claude code에 figma mcp server를 등록해야 한다.
claude code에 figma mcp server 등록
터미널을 열고 다음 명령어를 입력하면 전체 프로젝트에서 사용할 수 있는 figma mcp server 등록이 된다. (claude cli가 깔려 있어야 한다.)
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp만약 현재 프로젝트에서만 figma mcp를 사용하고 싶다면 다음과 같이 입력하면 된다.
claude mcp add --transport http figma https://mcp.figma.com/mcp
이렇게 명령어를 작성하면 등록이 됐다는 메세지가 나올 것이다.
figma mcp server 인증
그 다음 figma mcp server 인증을 해야 한다. 인증은 claude code 통해 진행할 수 있다.
claude cli를 실행하고 /mcp 를 입력하면 현재 연결된 mcp 서버를 볼 수 있다.
필자는 이미 인증을 해서 connected라고 나오는데 인증을 안 했다면 아마 unauthenticated라고 나올 것이다. 그러면 figma 정보를 조회하고 인증을 진행하면 된다.
인증은 브라우저를 통해서 진행되기 때문에 간편했다.
동의 및 액세스 허용을 누르면 인증이 완료된다.
figma mcp로 figma 디자인을 코드로 구현하기
먼저 디자인을 구현하고 싶은 브라우저 figma 페이지에 접속해서 URL을 복사한다.
그리고 claude code에 그 디자인을 본인이 원하는 라이브러리 코드로 구현해달라고 말하면 된다.
위 사진은 figma에 간단하게 만들어봤던 경제 서비스 와이어프레임이다.
figma mcp server 테스트를 위해 이 figma 디자인을 활용했다.
claude code에게 "내가 보여준 figma 페이지의 디자인을 옮겨와서 next.js로 구현해줘 {figma 주소}" 라고 명령을 했더니 알아서 디자인을 가져오고 Next.js 코드로 구현해줬다.
현재 figma 무료 플랜이라 총 7개의 페이지인데 4개 밖에 가져오지 못했다.
하지만 claude code는 똑똑해서 나머지 3개 페이지는 메타데이터를 가져와 코드로 구현해준다고 했다.
그 결과 완전히 똑같진 않더라도 어느정도 비슷한 UI를 구현해냈다.
 |  |  |
|---|
와우. 디자인만 괜찮은 게 아니라 사용자와의 상호작용도 잘 구현해냈다.
그저 페이지 UI만 따라 구현한게 아니라 페이지 간의 연결성을 고려하고 상호작용 요소를 배치한 것이다.
간단하게 figma mcp server를 사용해봤는데 결과가 만족스러워서 claude code MAX 플랜을 구매하고 싶다는 충동이 마구 생겨났다. (현재 가장 싼 Pro 플랜을 사용 중이다😭)
ai를 잘만 사용하면 생산성을 말도 안 되게 높일 수 있을 것 같다는 걸 직접 체험한 순간이었다.
기술의 발전이 정말 무섭도록 빠른 것 같다.
