프롬프트 개요

Figma MCP와 AI가 협업하는 원리와 효과적인 프롬프트의 구성 요소를 설명한다. 업데이트: 2026-03-10

핵심 요약

구분	내용
📖 핵심 원리	AI는 Figma 링크 또는 선택 항목을 도구로 읽어 코드를 생성한다
💡 프롬프트 5요소	Task · Context · Elements · Behavior · Constraints
🎯 정확도 향상	선택 범위를 작게 + 프레임워크 명시 + 기존 컴포넌트 경로 제공
⚠️ 주의	Rules 파일을 먼저 만들면 이후 프롬프트가 크게 짧아진다

1. AI가 Figma를 읽는 방법

Figma MCP는 AI 에디터가 Figma 디자인 파일에서 디자인 컨텍스트를 직접 읽어 코드를 생성하는 표준 프로토콜이다.

사용자가 Figma URL 또는 “선택 항목”을 프롬프트에 포함하면, AI는 아래 흐름으로 동작한다.

flowchart TD
    A[프롬프트 입력\nFigma URL 또는 선택 항목] --> B[AI가 MCP 도구 선택]
    B --> C[get_design_context 호출]
    C --> D[Figma 서버에서\n레이아웃·컴포넌트·토큰 수신]
    D --> E[코드 생성]
    E --> F[결과물 반환]

AI는 사용자가 직접 도구를 호출하지 않아도 프롬프트 문맥을 보고 적절한 MCP 도구를 자동으로 선택한다.

2. 프롬프트가 중요한 이유

Figma MCP 도구가 반환하는 디자인 컨텍스트는 풍부하지만, AI가 어떻게 해석하고 코드로 변환할지는 프롬프트가 결정한다.

프롬프트 품질	결과
URL만 넣은 경우	기본값(React + Tailwind)으로 생성, 기존 컴포넌트 무시
프레임워크 명시	지정된 언어·프레임워크로 정확히 생성
기존 컴포넌트 경로 제공	새 컴포넌트를 만들지 않고 재사용
금지 사항 명시	하드코딩, 플레이스홀더 등 원하지 않는 결과 방지
Rules 파일 설정	매번 동일한 규칙을 자동 적용

3. 효과적인 프롬프트 5요소

공식 문서와 실전 사례를 종합한 효과적인 프롬프트 구조다.

[Task]        무엇을 만들 것인가
[Context]     Figma URL 또는 현재 선택 항목 + 코드베이스 맥락
[Elements]    사용할 컴포넌트, 토큰, 파일 경로
[Behavior]    반응형, 접근성, 상태 처리 방식
[Constraints] 프레임워크, 금지 사항, 스타일링 방법

필수 포함 항목

항목	이유
Figma 링크 또는 “선택 항목”	AI가 컨텍스트를 인식하는 출발점
프레임워크·언어	기본값은 React + Tailwind이므로 다를 경우 반드시 명시
기존 컴포넌트 경로	새로 만들지 않고 재사용하도록 유도
저장 경로	파일 구조가 명확하면 에이전트 실수가 줄어든다
금지 사항	하드코딩, 새 패키지 추가, 플레이스홀더 등

예시 (완성형 프롬프트)

이 Figma 디자인을 구현해줘:
https://www.figma.com/design/XXXXX?node-id=1%3A2

요구사항:
- React + TypeScript
- src/components/ui 기존 컴포넌트 우선 사용
- Tailwind CSS (인라인 스타일 금지)
- 색상·간격 하드코딩 금지, 디자인 토큰 사용
- WCAG 2.1 AA 접근성 준수
- 저장 위치: src/components/features/LoginForm.tsx

4. 도구 명시 방법

AI는 대부분 적절한 도구를 자동으로 선택하지만, 명시적으로 지정하면 정확도가 올라간다.

get_design_context 도구를 사용해서 이 Figma 프레임을 분석해줘.

use the get_design_context tool for this Figma frame.

상황	권장 명시
디자인 → 코드	`get_design_context`
디자인 토큰 추출	`get_variable_defs`
전체 레이어 파악	`get_metadata`
시각적 확인	`get_screenshot`
코드 → Figma 역변환	`generate_figma_design`

5. Rules 파일 개념

반복 프롬프팅을 줄이고 팀 전체에 일관된 기준을 적용하기 위해 에이전트별 규칙 파일(CLAUDE.md, .cursor/rules 등)을 설정한다. 설정 후에는 URL과 간단한 지시만 입력해도 동일한 품질의 코드가 생성된다.

Rules 파일 작성 방법과 create_design_system_rules 도구 사용법은 2.3.2 AI 협업 가이드에서 설명한다.

문서 탐색

이전	다음
2.2.2 도구 활용 팁	2.3.2 AI 협업 가이드

참고 자료

출처	URL	신뢰도
Figma MCP 도구 및 프롬프트 공식 문서	https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/	★★★★★
Figma MCP 사용 가이드	https://help.figma.com/hc/en-us/articles/32132100833559	★★★★★
Figma MCP GitHub 가이드	https://github.com/figma/mcp-server-guide	★★★★★

JW's AI_Stash

Explorer

2.3.1 프롬프트 개요