Figma MCP로 디자인 해보기

최근 개발자 사이에서 MCP가 핫한 주제라서 조금 알아보다가 Figma MCP를 활용해서 디자인을 생성하는 걸 테스트해 보았다. MCP를 간단하게 설명하면 Model Context Protocol의 약자로 AI 모델이 다른 어플리케이션과 상호작용하는데 필요한 개념이라고 생각하면 된다.

 

평소에도 디자인을 AI를 활용해 코드로 변경하는건 자주 사용하였고 퀄리티도 완벽은 아니지만 조금의 수정을 거치면 실무에서도 사용이 가능한 정도로 결과가 나오게 된다. 하지만 이번에 해본 것은 디자인을 코드로 변경하는 게 아니라 디자인을 토대로 프롬프트를 작성하면 Figma MCP를 통해 AI가 디자인 작업을 수행하는 테스트를 해보았다.

 

https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

GitHub - sonnylazuardi/cursor-talk-to-figma-mcp: Cursor Talk To Figma MCP

 

위의 링크를 참고하면 되는데 아래는 간단한 순서이다

1. Cursor에서 MCP 서버를 설정
2. 제공된 피그마 플러그인을 로컬에 설치
3. Cursor에서 프롬프트를 통해 채널에 접속
4. 프롬프트를 통해 디자인 생성

아래 이미지는 테스트 결과인데 좌측 와이어 프레임을 디자인 해달라고 요청하였고 결과는 만족할 수준이 아니었다. 먼저 소셜 로그인 버튼이지만 인식을 못했는지 이메일 로그인 화면으로 디자인을 하였다. 게다가 인풋 및 버튼은 프레임 단위로 묶여있지 않고 개별 레이어로 전부 분리되어 있었다. 자세히 보면 중앙에 정렬되어 있지도 않다.

테스트 결과

 

결과가 만족스럽지 않아서 연구를 좀 하다가 제공되는 Tools을 보았는데 어느 정도 납득이 되었다. 아래 Tools의 목록을 보면 피그마에서 굉장히 기초적인 기능 밖에 있지않다. 예를 들면 피그마 전체 기능이 대학생 전공 과정이라면 여기서 활용하는 기능은 초등학생 과정 수준밖에 되지 않는다. 쉽게 설명하면 AI가 똑똑하지만 도구가 부족해서 퍼포먼스가 만족스럽지 못하다고 생각하면 된다.

제공되는 Tools 목록

 

디자이너 입장에서는 일단 요소들을 정렬하는 기능, 컴포넌트 Props, Variants 기능이 지원된다면 훨씬 퀄리티가 올라갈거라고 생각한다. 이번에 활용한 MCP의 경우 크게 만족스럽지는 않지만 꾸준히 팔로우 업하여 써먹기 쉬운 상태가 되면 다시 소개해보도록 하겠다.