Figma AI는 당신이 제공하는 지시사항만큼만 잘 작동합니다. 모호한 프롬프트는 처음부터 다시 만들어야 하는 일반적인 레이아웃을 생성합니다. 구체적인 프롬프트 — 화면 유형, 섹션, 컴포넌트, 프레임 크기, 간격 포함 — 는 한 번에 70–85% 프로덕션 준비 완료 결과물을 일관되게 생성합니다. 이 15개 템플릿은 Figma의 2026 AI 스택에 맞게 구성되었습니다: Design Agent, Figma Make, Skills, 그리고 크레딧이 전혀 소모되지 않는 무료 기능들(auto layout, rename layers, replace content).

템플릿을 복사하고, 대괄호 안의 플레이스홀더를 당신의 제품으로 바꾸고, 더 엄격한 제약 조건을 원한다면 무료 Prompt Optimizer를 통해 실행하세요. 에이전트 지시사항을 작성하는 동안 ChatGPT, Claude, Gemini 내에서 원클릭 최적화를 위해서는 TresPrompt가 사이드바에 ICCSSE 스타일 구조를 추가합니다.

핵심 포인트

모든 강력한 Figma AI 프롬프트는 네 가지를 명시합니다: 어떤 화면을 만들 것인지, 어떤 게시된 컴포넌트를 사용할 것인지, 프레임 크기, 그리고 간격 규칙. 부정적 제약 조건("이름 없는 프레임 사용하지 말 것", "lorem ipsum 없음")을 추가하면 에이전트가 추측을 멈춥니다. Skills는 이러한 패턴을 인코딩하여 매 세션마다 다시 입력할 필요가 없게 합니다.

Design Agent 템플릿 (캔버스의 화면)

1 모바일 설정 페이지
모바일 설정 페이지(390×844) 생성: 1. 계정 — 아바타, 이름, 이메일, 편집 버튼 2. 알림 — 이메일, 푸시, SMS 토글 3. 외관 — 다크 모드 토글, 폰트 크기 선택기 4. 보안 — 비밀번호 변경, 2FA 토글 5. 푸터 — 파괴적 로그아웃 버튼, 앱 버전 텍스트 게시된 컴포넌트만 사용. Auto layout: 16px 항목 간격, 섹션 간 32px. 그룹 라벨에 Section Header 컴포넌트.
2 대시보드 개요 (데스크톱)
데스크톱 분석 대시보드(1440×900) 생성: - 상단 내비: 로고, 검색, 사용자 메뉴 - 왼쪽 사이드바: 5개 내비 항목, "Overview"에 활성 상태 - 메인: 한 행에 4개 KPI 카드, 아래에 선형 차트, 최근 활동 테이블 (5행) 색상과 간격에 디자인 시스템 변수 사용. KPI용 Card 컴포넌트. 활동용 Table 컴포넌트. "Series 1" 같은 플레이스홀더 차트 데이터 라벨 사용하지 말 것.
3 온보딩 플로우 (3개 프레임)
3개 모바일 온보딩 화면(390×844) 생성, 왼쪽에서 오른쪽으로: 1. 환영 — 헤드라인, 서브카피, 기본 CTA "시작하기" 2. 권한 — 토글이 있는 알림 + 위치 목록 3. 성공 — 체크마크 일러스트 영역, "모든 설정 완료" CTA Primary Button과 Secondary Button 컴포넌트 사용. 1/3, 2/3, 3/3 단계를 보여주는 진행률 표시기. 모든 프레임에 일관된 24px 수평 패딩.
4 빈 상태 + 오류 상태
두 개의 모바일 프레임(390×844) 생성: 프레임 A — 빈 검색 결과: 아이콘 영역, 헤드라인 "결과 없음", 본문 카피, 보조 "필터 지우기" 버튼 프레임 B — 오류: 경고 아이콘, "문제가 발생했습니다", 기본 "다시 시도", 3차 "고객지원 문의" 가능한 경우 게시된 Empty State와 Alert 컴포넌트 사용. 중앙 정렬 콘텐츠, 텍스트 블록 최대 너비 280px.
5 접근성 설정 (에이전트 + a11y)
접근성 요구사항을 갖춘 모바일 설정 페이지(390×844) 생성: - 상호작용 요소 최소 44×44px 터치 타겟 - 텍스트 대비 최소 4.5:1 (디자인 시스템 텍스트 색상 사용) - 제목 계층 H1 → H2, 건너뛴 레벨 없음 - 토글에 보이는 텍스트 라벨 포함 (아이콘만 사용하지 말 것) - 오류 상태는 색상과 텍스트 모두 사용 (색상만 사용하지 말 것) 게시된 컴포넌트 사용. Auto layout 16px / 32px 간격.

📬 도움이 되고 계신가요?

매주 실용적인 AI 인사이트 하나씩. 구독하시면 무료 프롬프트 팩도 드립니다.

무료 구독하기 →

Figma Make 템플릿 (프로토타입 / 코드)

6 마케팅 랜딩 (Make)
이 Figma 프레임으로 단일 페이지 마케팅 사이트 구축: - 히어로: 헤드라인, 서브헤드, 이메일 캡처 + CTA - 아이콘이 있는 3개 기능 컬럼 - 소셜 프루프 로고 행 - 링크가 있는 푸터 선택된 프레임의 간격과 색상에 맞춤. 모바일 반응형. 프레임 노트에 명시되지 않은 외부 라이브러리 사용하지 말 것.
7 인터랙티브 프로토타입 (Make)
프레임들로부터 클릭 가능한 프로토타입 생성 [프레임 이름 목록]: - "회원가입" 클릭 시 등록 양식 프레임으로 이동 - 제출 시 성공 토스트 상태 표시 - "뒤로" 클릭 시 이전 화면으로 돌아감 파일의 컴포넌트 사용. 기본 버튼의 호버 상태 유지. 디자인 파일에 없는 새로운 화면 추가하지 말 것.

Skills 템플릿 (재사용 가능한 에이전트 지시사항)

이것들을 Skills 마크다운 파일로 저장하여 에이전트가 매번 팀 규칙을 따르도록 하세요.

8 Skill: /settings-page
설정 화면 생성 시: - 항상 Section Header + 그룹화된 목록 패턴 사용 - 앱 버전(캡션 스타일)과 파괴적 로그아웃이 있는 푸터 포함 - 사용자가 데스크톱을 명시하지 않는 한 모바일 기본값 390×844 - 불린 설정에는 Toggle 컴포넌트 사용, 커스텀 체크박스 절대 사용하지 말 것 - 간격: 그룹 내 16px, 그룹 간 32px, 화면 패딩 24px
9 Skill: /data-table
테이블 생성 시: - Table/Header와 Table/Row 컴포넌트 사용 - 사용자가 요청한 경우에만 정렬 아이콘 컬럼 포함 - 터치를 위해 행 높이 최소 48px - 긴 텍스트는 생략 부호로 자르기, 셀에서 2줄 이상 줄바꿈하지 말 것 - 0행일 경우 테이블 아래에 빈 상태

무료 기능 (크레딧 0개)

10 콘텐츠 바꾸기 (일괄)
선택된 프레임의 모든 lorem ipsum을 현실적인 [B2B SaaS / 전자상거래 / 헬스케어] 카피로 교체. 이름: 다양하고 그럴듯한. 주소: 미국 형식. 제품명: 가상이지만 전문적인. 레이아웃이 깨지지 않도록 플레이스홀더와 비슷한 문자 수 유지.
11 레이어 이름 바꾸기 (핸드오프 준비)
이 페이지의 모든 레이어를 다음 패턴으로 이름 변경: [Section]/[Component]/[State] 예시: Settings/NotificationRow/Default 잠긴 배경 프레임은 이름 변경하지 말 것. 숨겨진 레이어는 건너뛰기.

MCP + 코드 핸드오프 프롬프트 (Claude Code / Cursor)

12 Figma 프레임에서 React로
MCP를 통해 선택된 Figma 프레임 읽기. [Tailwind / 우리의 Shadcn 라이브러리]를 사용하여 React 컴포넌트 생성: - 파일의 디자인 토큰에서 간격과 색상 맞추기 - 의미론적 HTML 사용 (nav, main, section) - 768px와 1024px에서 반응형 브레이크포인트 포함 - 사용자 데이터용 타입 props와 함께 SettingsPage.tsx로 내보내기 16진수 값을 하드코딩하지 말 것 — Figma 변수의 토큰 이름 사용.

탐색 및 비교 템플릿

13 세 가지 레이아웃 방향
데스크톱 1440×900에서 [화면 유형]에 대한 3가지 다른 레이아웃 접근 방식 생성: A — 사이드바 내비게이션 B — 상단 탭 내비게이션 C — 카드 기반 허브 모든 세 가지에 동일한 콘텐츠. 게시된 컴포넌트 사용. 80px 간격으로 프레임을 나란히 배치. 각 프레임에 작은 캡션 텍스트로 "Direction A/B/C" 라벨 붙이기.
14 디자인 시스템 감사 프롬프트
선택된 페이지를 검토하고 다음 목록 작성: - 게시된 라이브러리에서 가져오지 않은 컴포넌트 ("분리됨"으로 플래그) - 변수를 사용하지 않는 색상 - 텍스트 스타일을 사용하지 않는 텍스트 - 4/8/16/24/32가 아닌 Auto layout 간격 프레임 노트에 체크리스트로 출력. 자동 수정하지 말고 보고만 할 것.
15 다듬기 단계 (두 번째 프롬프트)
생성된 프레임에서 다음 수정사항만 적용: 1. 섹션 간 수직 간격을 32px로 증가 2. 기본 버튼을 Button/Primary/Large 변형으로 교체 3. 이메일 필드 아래에 도움말 텍스트 추가: "귀하의 이메일을 절대 공유하지 않습니다" 4. 목록 행의 모든 아이콘을 24×24로 정렬 레이아웃을 재구성하지 말 것. 새로운 섹션을 추가하지 말 것.

템플릿 연결 방법

프로덕션 워크플로우: 템플릿 13 (탐색) → 방향 선택 → 템플릿 1 또는 2 (전체 화면) → 템플릿 15 (다듬기) → 템플릿 11 (이름 변경) → 템플릿 12 (MCP에서 코드로). 각 단계는 에이전트를 혼란스럽게 하는 하나의 거대한 지시사항 대신 집중된 프롬프트를 사용합니다.

전체 Figma AI 생태계(Agent, Make, MCP, Skills, Sites)에 대해서는 우리의 완전한 2026 가이드를 참조하세요. 단계별 에이전트 설정은 Design Agent 사용 방법을 참조하세요. 크레딧 예산 관리는 Figma AI 크레딧 설명을 참조하세요.

자주 묻는 질문

무료 Figma 플랜에서도 작동하나요?

템플릿 10–11 (콘텐츠 교체, 이름 변경)은 무료 플랜에서 작동합니다. Design Agent와 Make는 유료 플랜과 베타 액세스가 필요합니다. MCP는 귀하의 시트에 대해 Dev Mode / MCP를 활성화할 수 있는 모든 플랜에서 작동합니다.

전체 템플릿을 붙여넣어야 하나요, 아니면 줄여야 하나요?

전체 템플릿으로 시작하세요. 에이전트가 어떤 줄을 무시하는지 확인한 후 줄이세요. 짧은 프롬프트는 귀하의 디자인 시스템이 실제로 어떤 제약 조건을 필요로 하는지 알고 난 후에만 작동합니다.

Make와 Design Agent에 같은 프롬프트를 사용할 수 있나요?

아니요 — Make는 빌드/프로토타입 언어를 기대하고 크레딧을 다르게 소모합니다. 캔버스 레이어에는 Design Agent 템플릿을, 인터랙티브 출력에는 Make 템플릿을 사용하세요. 이들을 섞으면 혼란스러운 결과가 나옵니다.

프롬프트를 Skills로 저장하는 방법은?

템플릿 8–9를 팀의 Skills 라이브러리에 Skill 마크다운 파일로 복사하세요. 에이전트 패널에서 /skill-name으로 호출하세요. 컴포넌트 이름이 변경되면 Skills를 업데이트하세요 — 우리의 Skills 가이드를 참조하세요.

공개: 이 글의 일부 링크는 제휴 링크입니다. 우리가 개인적으로 테스트하고 정기적으로 사용하는 도구만 추천합니다. 전체 공개 정책을 참조하세요.