AI로 UI 디자인하고 Figma로 바로 가져오기
목차
기본 설정
필요한 것들
- Google 계정
- Figma 계정
- Chrome 브라우저 (권장)
중요: 모드 확인
일반 모드(Normal Mode): Figma 연동 가능
실험 모드(Experimental Mode): Figma 연동 안됨반드시 일반 모드에서 작업하세요!
- https://stitch.withgoogle.com 접속
- 중앙 모드 표시 확인
- 실험 모드면 일반 모드로 전환
Google Stitch AI 사용법
1단계: 접속 및 프롬프트 입력
1. https://stitch.withgoogle.com 접속
2. Google 계정으로 로그인
3. 일반 모드인지 확인 (우상단)
4. 프롬프트 입력2단계: AI 생성
1. "디자인 생성" 버튼 클릭
2. 30초~2분 대기
3. 결과 확인3단계: Figma로 보내기
1. "Figma" 버튼 클릭하여 복사
2. 피그마 로그인
3. 피그마 프로젝트에 붙여넣기4단계: Figma에서 확인
- Figma에서 자동으로 레이어 생성됨
- 버튼, 카드 등이 개별 요소로 분리됨
- 필요시 컴포넌트화 작업주요 특징
AI 엔진
- Gemini 2.5 기반: Google의 최신 AI 모델 사용
- 자연어 이해: 복잡한 요구사항도 정확히 파악
- 빠른 생성: 평균 1-2분 내 완성된 UI 제공
지원 플랫폼
- 모바일 앱: iOS, Android 디자인 패턴
- 웹사이트: 반응형 레이아웃 지원
- 대시보드: 데이터 시각화 컴포넌트
Figma 연동 장점
- 레이어 구조 유지: 편집 가능한 상태로 전송
- 컴포넌트 분리: 재사용 가능한 요소들로 구성
- 스타일 추출: 색상, 폰트 자동 정리
사용 팁
프롬프트 작성
구체적으로: "상단 헤더, 중간 콘텐츠, 하단 푸터"
색상 지정: "파란색과 흰색 조합"
레이아웃 명시: "3열 그리드 구조"작업 순서
1. 메인 화면부터 시작
2. 간단한 레이아웃 먼저
3. 복잡한 기능은 단계별로활용 사례
스타트업
- MVP 프로토타입: 빠른 아이디어 검증
- 투자 피칭: 시각적 자료 제작
- 개발 가이드: 개발팀과의 소통 도구
기업
- 내부 도구: 업무용 대시보드 디자인
- 고객 제안: 클라이언트 프레젠테이션
- A/B 테스트: 다양한 UI 변형 제작
개인
- 포트폴리오: 디자인 작업물 생성
- 사이드 프로젝트: 개인 앱 디자인
- 학습: UI/UX 패턴 연구
참고 링크
JB 기술블로그 환영해요~