안녕하세요! 프레임아웃 AXC입니다.이번 글에서는 디자이너와 개발자 간 협업의 비효율을 해결할 수 있는 가능성을 보여주는 새로운 접근법,

'Talk To Figma MCP'를 소개드리도록 하겠습니다.

이 기술은 단순히 디자인을 미러링하는 수준이 아니라, Figma 디자인 데이터를 AI가 직접 읽고 분석한 뒤 HTML/CSS/JS 코드로 자동 변환해주는 전례 없는 자동화 흐름을 제시합니다.

특히, Claude와 같은 대형 언어모델(LLM), Cursor IDE, 그리고 MCP(Model Context Protocol)의 조합을 통해 디자이너의 의도를 실제 코드로 구현하는 데 큰 가능성을 보여주고 있습니다.

이번 실험에서는 설치 과정부터 실사용 테스트, 그리고 자동화의 한계와 가능성까지 자세히 분석해보았습니다.

간단한 명령어로 디자인하기

우선 Cursor에서 “Instagram의 프로필 페이지를 그려줘”라는 간단한 프롬프트를 입력해 테스트를 시작했습니다. Cursor는 명령어를 분석해 단계별 작업을 나눈 뒤 이를 Figma 프레임에 자동으로 반영했습니다.

기본적인 레이아웃과 섹션 구성이 자동 생성되었으며, 명령의 의미를 충분히 이해하고 동작하는 모습을 볼 수 있었습니다. 하지만, 디자인의 디테일이나 시각적 완성도 면에서는 다소 부족한 점이 느껴졌습니다.

참고 이미지와 함께 디자인 하기

같은 명령어에 참고 이미지를 첨부하여 다시 시도해보았습니다.결과적으로 정렬 상태와 화면 구성은 훨씬 정돈되었으며, 전보다 진일보한 결과를 확인할 수 있었습니다.

다만 여전히 정교한 타이포그래피나 레이아웃 등 시각적 세부 요소는 부족했습니다. 이는 AI가 이미지의 컨텍스트를 이해하긴 하지만, 디자인 감각이나 의도까지 완벽히 해석하기는 어려움을 보여줍니다.

기존 피그마 파일 수정하기

이번에는 사전에 작업된 Figma 디자인 파일을 대상으로 Dark Mode 적용 작업을 테스트했습니다.전체적인 톤은 잘 적용되었지만, 아이콘이나 특정 컴포넌트의 변경이 누락되는 등의 문제가 있었습니다.

이 결과는 AI가 Figma 파일 내의 모든 요소를 다 파악하지는 못할 수도 있다는 것을 알 수 있었습니다.

비개발자의 바이브코딩

이번에는 비개발자의 입장에서 구체적인 프롬프트 조건을 입력해 코딩 결과를 실험해보았습니다.

결과적으로 Auto Layout 설정과 컴포넌트 구조가 꽤 정확하게 반영되었고, HTML 구조 또한 깔끔하게 정리되어 있었습니다. 게다가 대체 텍스트나 중간중간의 코드 주석 등 사용자 친화적인 코드가 생성되었으며, 스크롤/고정 레이아웃 구현, 페이지 간 이동 처리, 인터렉션 구현 등도 제대로 작동했습니다.

프롬프트 예시:

- 작업 경로: C:\Users\Cursor_Plugin\cursor-talk-to-figma-mcp\ai_workflow\project6

- 참조용 피그마 링크 제공: @https://www.figma.com/design

- html, css, javascript로 구현 해주세요.

- 레이아웃 (App bar: fixed, Content: scroll 등)

- 작업 리소스 경로 명시 (icon, img)

사용 팁

1. Auto Layout 설정: Flexbox 전환 시 레이아웃 안정성이 높아집니다.
2. 레이어 구조 단순화: 클래스 네이밍과 구조가 간결해집니다.
3. 이미지/아이콘 별도 제공: SVG 활용으로 성능과 품질이 향상됩니다.
4. Claude 3.7 사용 추천: 응답 속도와 정확도가 눈에 띄게 개선됩니다.

결론

현 시점에서 MCP의 디자인 생성 능력은 분명한 한계를 보였습니다.정교한 디자인 시스템이나 프롬프트가 함께 사용된다면 개선될 여지는 보이지만, 새로운 창작 디자인을 생성하는 데는 아직 어려움이 많습니다.

하지만 디자인을 기반으로 하는 퍼블리싱 코드 자동화 도구로는 매우 높은 가능성을 보여주었습니다.

물론 복잡한 기능 구현이나 실무 적용에는 아직 한계가 있으나, 반복적인 UI 제작, 팀플릿 수정, 퍼블리싱 보조 역할로는 충분히 의미 있는 도구입니다. 특히 비개발자 입장에서도 진입장벽이 낮고, 결과물의 퀄리티도 만족스러운 수준이라는 점에서 앞으로의 발전이 더욱 기대됩니다.

* Appendix (설치 방법)

아래 주소에서 프로젝트를 다운로드 합니다.

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

1. macOS 사용자 설치 가이드

macOS 사용자는 다음 단계에 따라 설치를 진행합니다.

가. 사전 준비: Bun 설치

• 터미널 실행: Spotlight 검색(Cmd + Space)에서 "Terminal"을 검색하여 실행합니다.
• Bun 설치 명령어 입력: 터미널에 다음 명령어를 복사하여 붙여넣고 Enter 키를 누릅니다.Bashcurl -fsSL https://bun.sh/install | bash 설치가 완료될 때까지 잠시 기다립니다. 터미널에 나오는 안내에 따라 추가 설정이 필요할 수 있습니다 (예: 환경 변수 설정).

나. Cursor Talk to Figma MCP 설치 및 실행

1. 프로젝트 설정: 터미널에 다음 명령어를 입력하여 프로젝트 설정을 진행합니다. 이 과정에서 Cursor의 현재 프로젝트에 MCP가 설치됩니다.Bashbun setup
2. WebSocket 서버 시작: Figma 플러그인과 MCP 서버 간의 통신을 위해 WebSocket 서버를 시작해야 합니다. 터미널에 다음 명령어를 입력합니다.Bashbun socket 이 터미널 창은 계속 실행 상태로 두어야 합니다.
3. MCP 서버 시작: 새로운 터미널 창을 열고 다음 명령어를 입력하여 MCP 서버를 실행합니다.Bashbunx cursor-talk-to-figma-mcp 이 터미널 창도 계속 실행 상태로 두어야 합니다.

다. Figma 플러그인 설치

• 방법 1: Figma 커뮤니티 페이지에서 설치 (가장 쉬운 방법)
• 1. 웹 브라우저에서 Figma 커뮤니티 플러그인 페이지로 이동합니다.
  2. "Install" 또는 "Try it out" 버튼을 클릭하여 플러그인을 Figma 계정에 추가합니다.
• 방법 2: 로컬 파일로 설치 (고급 사용자용)
• 1. Figma 앱을 엽니다.
  2. 메뉴에서 Plugins > Development > Import plugin from manifest… (플러그인 > 개발 > manifest에서 플러그인 가져오기...)를 선택합니다.
  3. "Cursor Talk to Figma MCP" 프로젝트 파일을 다운로드했다면, 해당 폴더 내의 src/cursor_mcp_plugin/manifest.json 파일을 선택하여 가져옵니다.

2. Windows 사용자 설치 가이드

Windows 사용자는 다음 단계에 따라 설치를 진행합니다. WSL(Windows Subsystem for Linux) 환경 사용 여부에 따라 일부 단계가 다를 수 있습니다.

가. 사전 준비: Bun 설치

• PowerShell 실행: 시작 메뉴에서 "PowerShell"을 검색하여 관리자 권한으로 실행합니다.
• Bun 설치 명령어 입력: PowerShell 창에 다음 명령어를 복사하여 붙여넣고 Enter 키를 누릅니다.PowerShellpowershell -c "irm bun.sh/install.ps1|iex" 설치가 완료될 때까지 잠시 기다립니다. PowerShell 창에 나오는 안내에 따라 추가 설정이 필요할 수 있습니다.

나. Cursor Talk to Figma MCP 설치 및 실행

1. 프로젝트 설정: PowerShell (또는 WSL을 사용한다면 WSL 터미널)에 다음 명령어를 입력하여 프로젝트 설정을 진행합니다.Bashbun setup
2. WebSocket 서버 시작:
3. • WSL 사용자 특별 참고 사항:
   • • "Cursor Talk to Figma MCP" 프로젝트 폴더 내의 src/socket.ts 파일을 텍스트 편집기(예: 메모장, VS Code 등)로 엽니다.
     • 다음과 같이 hostname: "0.0.0.0", 라인을 찾아 맨 앞의 // (주석 표시)를 삭제하여 주석 처리를 해제합니다.TypeScript// uncomment this to allow connections in windows wsl hostname: "0.0.0.0",
     • 파일을 저장합니다.
   • PowerShell (또는 WSL 터미널)에 다음 명령어를 입력하여 WebSocket 서버를 시작합니다.Bashbun socket 이 터미널/PowerShell 창은 계속 실행 상태로 두어야 합니다.
4. MCP 서버 시작: 새로운 PowerShell 창 (또는 새로운 WSL 터미널 창)을 열고 다음 명령어를 입력하여 MCP 서버를 실행합니다.Bashbunx cursor-talk-to-figma-mcp 이 창도 계속 실행 상태로 두어야 합니다.

다. Figma 플러그인 설치

• 방법 1: Figma 커뮤니티 페이지에서 설치 (가장 쉬운 방법)
• 1. 웹 브라우저에서 Figma 커뮤니티 플러그인 페이지로 이동합니다.
  2. "Install" 또는 "Try it out" 버튼을 클릭하여 플러그인을 Figma 계정에 추가합니다.
• 방법 2: 로컬 파일로 설치 (고급 사용자용)
• 1. Figma 앱을 엽니다.
  2. 메뉴에서 Plugins > Development > Import plugin from manifest… (플러그인 > 개발 > manifest에서 플러그인 가져오기...)를 선택합니다.
  3. "Cursor Talk to Figma MCP" 프로젝트 파일을 다운로드했다면, 해당 폴더 내의 src/cursor_mcp_plugin/manifest.json 파일을 선택하여 가져옵니다.

3. 도구 사용 방법 (모든 OS 공통)

모든 설치 및 서버 실행이 완료되었다면, 다음과 같이 도구를 사용합니다.

1. WebSocket 서버가 실행 중인지 확인합니다. (위의 OS별 '나-2' 단계)
2. MCP 서버가 실행 중인지 확인합니다. (위의 OS별 '나-3' 단계)
3. Figma를 열고 설치한 Cursor MCP 플러그인을 실행합니다. (Figma 내 플러그인 메뉴에서 찾을 수 있습니다.)
4. 플러그인 인터페이스에서 WebSocket 서버에 연결하기 위해 채널에 참여합니다 (예: join_channel 명령 사용). 일반적으로 플러그인이 자동으로 연결을 시도하거나, 연결 버튼/입력란이 있을 수 있습니다.
5. 이제 Cursor AI 인터페이스에서 Figma와 관련된 명령을 사용하여 디자인 정보를 읽거나 수정할 수 있습니다.

추가 정보 및 팁

• 동영상 튜토리얼: 설치 및 사용에 대한 간략한 동영상 튜토리얼을 참고하시면 도움이 될 수 있습니다. https://www.linkedin.com/posts/sonnylazuardi_just-wanted-to-share-my-latest-experiment-activity-7307821553654657024-yrh8
• 오류 발생 시:
• • 각 서버(WebSocket, MCP)가 실행 중인 터미널/PowerShell 창에 오류 메시지가 없는지 확인합니다.
  • Bun이 올바르게 설치되었는지, 환경 변수 설정이 필요한 경우 제대로 되었는지 확인합니다.
  • Figma 플러그인이 최신 버전인지, Figma 앱 자체가 최신 버전인지 확인합니다.

AXC(AI & Experience Center), 유옥수

‍