Figma MCP 사용법과 코드 변환 테스트 후기
디자인만 했는데 코드가 나왔다
디자인을 코드화할 수 있다면?
최근 디자인 커뮤니티에서 ‘Figma MCP’라는 용어가 자주 언급되고 있습니다. MCP는 ‘Model Context Protocol’의 약자로, AI 코딩 에이전트가 Figma 디자인 데이터를 활용할 수 있도록 연결해주는 구조입니다. Cursor라는 개발 환경에서 Figma 링크를 입력하고 “이 화면을 구현해줘”라고 요청하면, MCP가 해당 Figma 파일 정보를 API로 읽어 Claude에게 전달하고, Claude는 이를 코드 형태로 해석해 Cursor에 작성합니다. 그 과정을 통해 디자이너가 만든 화면이 코드로 변환될 수 있으며, 디자이너와 개발자 사이의 협업 방식에도 점진적인 변화가 나타나고 있습니다.
기존에도 Anima, Zeplin 같은 도구들이 유사한 기능을 제공해왔지만 코드의 가독성이 낮거나 반복적인 수작업이 필요한 경우가 많았습니다. 디자인을 코드로 바꾸는 기능을 제공하지만 실제 프로젝트에서 바로 활용할 수 있을 정도의 품질은 아니었습니다. 저 역시 여러 도구를 테스트해보면서 비슷한 한계를 느낀 바 있습니다.
디자인 스튜디오를 운영하면서 제한된 리소스로 높은 품질의 결과물을 만들어야 하는 상황이 자주 발생합니다. 자연스럽게 ‘디자인 이후의 단계를 어떻게 디자인 과정 안으로 통합할 수 있을까’라는 고민으로 이어졌고, 디자인의 코드화는 그 과정에서 반복적으로 떠오르는 주제였습니다. 그런 맥락에서 Figma MCP는 한 번쯤 실험해볼 만한 도구처럼 보였고, 직접 테스트를 진행하게 되었습니다.
Figma MCP 사용 방법
Figma MCP를 사용하는 방법은 두 가지가 있는 것 같습니다. 하나는 Figma 플러그인인 Cursor Talk to Figma MCP를 사용하는 것이고, 다른 하나는 Framelink Figma MCP Server라는 라이브러리를 설치하는 방식입니다.
Cursor Talk to Figma MCP는 디자인을 열 때마다 플러그인을 실행해야 하는 번거로움이 있어, 이 글에서는 Framelink Figma MCP Server로 테스트를 진행했습니다. (※ 설정 방법은 아래 링크 참조)
https://github.com/GLips/Figma-Context-MCP
코드를 출력해보니
Figma로 디자인한 쇼핑몰의 모바일 웹 화면을 테스트에 사용했습니다.
Cursor에 Figma 링크를 붙여넣고 채팅창에 "Implement this"라고 입력하자 코드가 자동으로 생성되었습니다.
Cursor 채팅창에 명령어 입력하기출력된 코드는 HTML/CSS 기반이었고, Auto layout과 컴포넌트 구조가 비교적 정확하게 반영됐습니다. 기존의 Figma to HTML 플러그인들과 비교했을 때 MCP를 통해 생성된 코드는 구조가 정돈돼 있었고 불필요한 중첩이나 인라인 스타일이 줄어들어 있다는 점이 인상적이었습니다.
무엇보다 기대 이상이었던 점은 코드가 사람이 직접 작성한 것처럼 깔끔했다는 점입니다.
화면과 같이 내비게이션 UI를 인식해 <nav> 시맨틱 태그를 달아주었을 뿐 아니라,
아이콘 버튼은 svg이미지로 추출한 뒤, 한글로 "검색" 이라는 대체 텍스트까지 자동으로 넣어주었습니다.
자동으로 생성된 코드이다 보니 어느 정도 수정이 필요하겠지만, 이 정도로 결과물이 나온다면 수정 작업이 훨씬 수월할 것 같다는 생각이 들었습니다.
좌 : 피그마 레이어 구조 / 우 : AI가 작성한 HTML 태그 구조디자인 vs 코드 비교
다음은 코드 피그마 디자인과 코드 변환 결과물입니다.
BEST ITEM 항목 일부가 누락된 것을 제외하면, 디자인 시안과 거의 일치하는 것을 확인할 수 있습니다.
(좌 : Figma 디자인 시안 / 우 : Figma MCP를 활용하여 만든 퍼블리싱 결과물)
(좌 : Figma 디자인 시안 / 우 : Figma MCP를 활용하여 만든 퍼블리싱 결과물)한계도 분명했습니다
복잡한 구현에는 아쉬운 부분이 있었습니다. 스타일 팔레트를 변수로 구성하는 처리나, 반응형 레이아웃을 위한 미디어 쿼리 적용은 정확하게 반영되지 않았습니다. 여전히 수작업이 필요한 영역이며, 코드 품질이 일정 수준 이상 나오기 위해서는 세부 조정이 필요합니다.
레이어 구조가 복잡하거나 설정이 중첩된 경우에도 코드 결과가 원하는 방식과 다르게 출력되는 경우가 있었습니다. 디자인 자체가 얼마나 정리되어 있는지에 따라 결과의 완성도는 달라졌고, 이 흐름은 디자인 시스템이 잘 정립된 팀에서 더 안정적으로 작동할 수 있을 것으로 보였습니다. 그럼에도 불구하고, 프론트엔드 초기 구조를 빠르게 구성하거나 개발 커뮤니케이션을 위한 코드 기반 시안을 만드는 데에는 충분히 활용 가능한 수준이었습니다.
코드를 잘 뽑기 위한 설정 팁
실제로 테스트하면서 유효했던 설정 기준은 다음과 같았습니다.
Auto layout은 필수입니다. Flexbox 형태로 구조화되기 때문에 정렬이나 간격 반영 정확도에 큰 영향을 줍니다.
레이어 그룹은 단순하게 구성해야 합니다. 불필요한 그룹이 많아질수록 class 이름이 복잡해지고 구조 파악이 어려워집니다.
색상은 단일 값으로 지정하는 것이 좋습니다. 여러 색상이 혼합된 경우나 블렌드 모드가 적용된 경우 정확하게 추출되지 않았습니다.
이미지는 반드시 이미지 레이어로 지정해야 합니다. 프레임의 배경으로 설정된 이미지는 코드에 반영되지 않았습니다.
특별한 기능이 아닌 기본적인 정리만으로도 코드 품질은 상당히 달라졌습니다.
마치며
Figma MCP는 디자인 파일을 기반으로 개발 단계에서 참고 가능한 코드 형태의 결과를 만들어볼 수 있는 훌륭한 도구라고 생각합니다. 일정 수준의 구조를 갖춘 디자인이라면 코드로 변환해 확인하는 데 무리가 없었고, 초기 기획 검토나 개발 커뮤니케이션 자료로 활용하기에 유용했습니다.
아직 복잡한 기능 구현에는 여전히 한계가 있었지만 지금까지의 발전 속도로 본다면 더 복잡한 구현도 조만간 가능해지지 않을까 싶습니다. AI를 활용한 구현이 보편화 된다면 디자이너가 구현 흐름을 이해하고 의도를 코드에 반영할 수 있는 역량은 앞으로 더 중요해질 것으로 보입니다.
※ MCP는 AI와 외부 데이터를 연결하는 중개 도구로, Figma MCP 외에도 다양한 유형의 MCP가 존재합니다. (Google Drive, Notion 등 ..) 다음 링크에서 더 많은 MCP를 탐색해볼 수 있습니다.
Find the best cursor rules for your framework and language
https://cursor.directory
