도구별 실전 가이드 · 공식 정보 확인 2026-08-20
figma-ui-mcp MIT 오픈소스 조건과 시작 절차
작성: gentive · 편집·검수 책임: 신유빈 · 지원 환경: Extension · 페이지 갱신: · 운영·편집 기준
Claude Code, Cursor, VS Code, Windsurf에서 기존 Figma 구조를 읽거나 도형·텍스트·컴포넌트를 직접 생성한다.
Claude Code, Cursor, VS Code, Windsurf에서 기존 Figma 구조를 읽거나 도형·텍스트·컴포넌트를 직접 생성한다. figma-ui-mcp의 첫 실전 과제는 “빈 테스트 페이지에 제목과 버튼으로 된 작은 카드 한 개를 그린다”이며, 이 흐름을 직접 통제할 사람에게 맞습니다.
이럴 때 맞습니다
- “320x160 카드, 제목 알림 설정, 파란색 저장 버튼, Auto Layout 사용” 같은 입력으로 figma-ui-mcp의 핵심 기능을 시험하려는 사람
- 새 카드가 지정 페이지 안에만 생성되고 기존 컴포넌트·스타일·변수는 바뀌지 않는다. 기준으로 figma-ui-mcp 결과를 직접 검수할 수 있는 경우
- Extension 환경에서 MIT 코드를 직접 설치·관리하려는 작업
이럴 때는 멈추세요
- AI가 Figma 캔버스를 JavaScript로 읽고 그리는 MCP 플러그인 설치·모델 준비·업데이트를 관리하지 않고 즉시 완성된 서비스를 원하는 경우
- 다음 위험을 사람이 확인할 수 없는 작업: 플러그인이 전달받은 JavaScript를 문서에 적용하므로 잘못된 명령이 많은 레이어를 이동·삭제할 수 있어 복제본과 버전 이력을 준비해야 한다.
참고 시작점
팩트시트 · 작업 근거 확인 필요: 아래 문구는 공식 제품 사실을 정리한 참고 시작점이며, 성공 결과를 보장하는 검증 절차가 아닙니다.
JavaScript로 카드 한 장을 캔버스에 그리기
AI가 Figma canvas에 제한된 UI를 직접 생성하는 경로를 확인한다.
참고 시작점: Figma plugin에서 JavaScript를 이용해 320×160 카드와 제목·버튼만 그려 달라.
- 빈 Figma canvas의 테스트 페이지를 열고 기존 레이어 수를 기록한다.
- JavaScript 명령으로 카드 배경, 제목 텍스트, 버튼을 지정 좌표에 생성한다.
- Figma plugin 레이어 트리에서 새 요소만 생겼는지 확인하고 화면을 캡처한다.
기존 화면을 구조화 데이터로 되읽기
read existing designs 기능으로 선택 프레임의 계층을 structured data로 얻는다.
참고 시작점: 선택한 카드 프레임 하나만 read existing designs 대상으로 삼아 structured data를 반환해 달라.
- 읽을 프레임을 하나 선택하고 자식 레이어 이름을 Figma에서 미리 확인한다.
- MCP 읽기 요청에 선택 범위를 명시해 structured data를 가져온다.
- 반환된 노드 수·타입·텍스트가 read existing designs 결과와 실제 레이어 트리에 맞는지 대조한다.
지원 에디터마다 같은 작은 수정 재현하기
Claude Code와 Cursor 연결이 같은 Figma 결과를 만드는지 비교한다.
참고 시작점: Claude Code에서 텍스트를 하나 바꾸고 Cursor에서는 되돌리되 Windsurf는 연결 확인만 해 달라.
- Claude Code 연결로 테스트 버튼의 라벨만 변경하고 반환 노드 ID를 적는다.
- Cursor 연결에서 같은 노드 ID의 라벨을 원래 값으로 되돌린다.
- Windsurf 세션은 읽기 요청만 보내 최종 라벨과 기존 스타일이 유지되는지 확인한다.
무료 조건과 주의점
MIT 오픈소스 소프트웨어로 로컬 실행 횟수 제한 없음. 모델 다운로드와 GPU·전기 비용은 사용자 부담. 외부 제품 연동의 계정 조건은 공식 README에서 재확인 필요
MIT 오픈소스 소프트웨어로 로컬 실행 횟수 제한 없음. 모델 다운로드와 GPU·전기 비용은 사용자 부담. 외부 제품 연동의 계정 조건은 공식 README에서 재확인 필요
MIT 저장소 코드는 상업적으로 사용할 수 있지만, 모델 가중치·입력 자료·생성물·번들 자산의 권리는 각각 따로 확인해야 합니다.
플러그인이 전달받은 JavaScript를 문서에 적용하므로 잘못된 명령이 많은 레이어를 이동·삭제할 수 있어 복제본과 버전 이력을 준비해야 한다.
직접 대안과 비교
- figma-use — 둘 다 도형·텍스트를 Figma 파일에 직접 만들 수 있어 빈 페이지에 제목과 버튼 카드 한 개를 생성하는 입력과 캔버스 결과가 호환된다.
공식 근거와 확인일
| 확인 항목 | 확인한 내용 | 공식 출처·확인일 |
|---|---|---|
| 제품 정보 | Claude Code, Cursor, VS Code, Windsurf에서 기존 Figma 구조를 읽거나 도형·텍스트·컴포넌트를 직접 생성한다. | figma-ui-mcp 공식 사이트 |
| 무료 조건 | MIT 오픈소스 소프트웨어로 로컬 실행 횟수 제한 없음. 모델 다운로드와 GPU·전기 비용은 사용자 부담. 외부 제품 연동의 계정 조건은 공식 README에서 재확인 필요 | 공식 무료 정책·요금 안내 |
| 공식 코드 라이선스 | 오픈소스 코드의 사용·수정·재배포 조건 | 공식 코드 라이선스 |
| 공식 제품 페이지 | Claude Code, Cursor, VS Code, Windsurf에서 기존 Figma 구조를 읽거나 도형·텍스트·컴포넌트를 직접 생성한다. | 공식 제품 페이지 |