도구별 실전 가이드 · 공식 정보 확인 2026-08-20
figma-ui-mcp 사용법: 무료로 시작하는 가장 현실적인 방법
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를 문서에 적용하므로 잘못된 명령이 많은 레이어를 이동·삭제할 수 있어 복제본과 버전 이력을 준비해야 한다.
처음 해볼 작업 3가지
JavaScript로 카드 한 장을 캔버스에 그리기
AI가 Figma canvas에 제한된 UI를 직접 생성하는 경로를 확인한다.
기존 화면을 구조화 데이터로 되읽기
read existing designs 기능으로 선택 프레임의 계층을 structured data로 얻는다.
지원 에디터마다 같은 작은 수정 재현하기
Claude Code와 Cursor 연결이 같은 Figma 결과를 만드는지 비교한다.
무료 조건과 주의점
MIT 오픈소스 소프트웨어로 로컬 실행 횟수 제한 없음. 모델 다운로드와 GPU·전기 비용은 사용자 부담. 외부 제품 연동의 계정 조건은 공식 README에서 재확인 필요
MIT 오픈소스 소프트웨어로 로컬 실행 횟수 제한 없음. 모델 다운로드와 GPU·전기 비용은 사용자 부담. 외부 제품 연동의 계정 조건은 공식 README에서 재확인 필요
MIT 저장소 코드는 상업적으로 사용할 수 있지만, 모델 가중치·입력 자료·생성물·번들 자산의 권리는 각각 따로 확인해야 합니다.
플러그인이 전달받은 JavaScript를 문서에 적용하므로 잘못된 명령이 많은 레이어를 이동·삭제할 수 있어 복제본과 버전 이력을 준비해야 한다.
직접 대안과 비교
- figma-use — 둘 다 도형·텍스트를 Figma 파일에 직접 만들 수 있어 빈 페이지에 제목과 버튼 카드 한 개를 생성하는 입력과 캔버스 결과가 호환된다.