💁♂️ 들어가기 전
필자는 프로젝트하면서 항상 생각했던 것이 '디자인은 AI가 자동으로 못해주나?'였다. 하지만 MCP라는 것이 나오고 나서 말이 달라졌다. MCP 중에서 Figma MCP는 AI가 디자인을 자동으로 해주는 친구이다. 그니까 Figma MCP에 쓰기/읽기 등 이런 권한들을 주고 프롬포트를 작성하면 알아서 디자인을 해준다는 말이다. 이번 포스팅에서는 Cursor를 사용할건데 Claude도 사용 가능하다. 난 이상하게 Claude에서 에러나서 Cursor로 진행했다. 그래서 오늘은 Figma MCP를 활용해서 디자인을 해볼려고 한다.
📋 준비
본격적으로 시작하기 전에 준비해야할 것들이 있어요! 커서(Cursor)와 피그마(Figma)가 필요합니다. 검색하셔서 다운로드 받으시면 되고 계정도 꼭 생성해주세요.
🔮 실습하기
Cursor와 Figma를 다운로드 받으셨다면 이제는 진짜 실습할 단계입니다. 먼저 Cursor에 들어와 아래 GitHub 저장소의 코드를 chone 해줄게요.
구글에 cursor-talk-to-figma-mcp라고 검색하면 나와요. 거기서 코드 누르시고 아래와 같이 링크 복사해주세요.
Chone repo를 눌러 복사한 링크를 위와 같이 붙여넣기 하고 해당 프로젝트로 들어갑니다.
이게 초기 세팅이에요.
이제 아까 Github로 돌아가서 위와 같은 방법으로 터미널에 입력해줄게요.
그리고 피그마에 들어가서 mcp를 위한 토큰을 발급해줄게요.
권한은 모두 Read-only라는 권한을 줄게요. ai가 만드는 것이기 때문에 일단 쓰기/읽기 권한 둘 다 줘요. 생성하기 버튼을 누르면 발급이 될건데 복사하세요.
위 명령어를 커서에 입력해주세요. 토큰은 아까 복사한 토큰으로 넣어주시고 엔터치시면 됩니다.
그리고 Cursor 설정으로 가서 TalkToFigma가 초록색으로 표시되는지 보세요. 빨간색이면 오류난 겁니다.
이제 피그마로 다시 가서 플러그인에 위와 같은 플러그인을 선택해주시면 아래와 같이 뜰건데
위와 같이 복사해주시고 커서로 가줍니다.
프로젝트 최상단 폴더 .cursor에 mcp.json 파일이 있을건데 거기에 붙여엏기 해주고 S 눌러서 저장해주세요!
그러고 피그마에서 채널 ID 복사해서 커서에 위와 같이 프롬포트를 작성하면
성공적으로 연결되었다고 나옵니다!
그러고 웹사이트나 앱 디자인 해달라고 프롬포트를 작성하면 아래와 같이 저는 만들지도 않은 디자인이 보일겁니다.
ㅎㅎ 신기하죠ㅎㅎ 저도 엄청 신기합니다! 이제 이 디자인한 레이어를 html 코드로 바꿔보겠습니다.
프롬포트에 위와 같이 입력하고 엔터를 치면
짜잔!! Figma MCP가 디자인한걸 Cursor가 html 파일로 바꿔줬어요!
🧩 결과
뭐 아직 세세하게 입력하진 않아서 좀 밋밋하지만 그래도 이런게 가능하다는 자체가 너무 놀랍네요. 앞으로 1인 개발할 때 많이 사용해야겠어요.
오늘은 여기까지이며 모르겠는 부분이나 헷갈리는 부분이 있으시면 댓글로 남겨주세요! 친절히 답변드리겠습니다. 😊