코드·Figma 내보내기
Stitch에서 완성한 UI 디자인을 개발 현장에 바로 쓸 수 있는 코드와 Figma 파일로 변환하는 방법.
업데이트: 2026-03-24
핵심 요약
구분 내용 📖 정의 완성된 UI를 다양한 코드 형식 및 Figma 파일로 내보내는 기능 💡 핵심 HTML·Tailwind·React·Flutter·Figma 5가지 형식 지원 🎯 대상 디자인 결과물을 개발 코드로 전환하거나 Figma에서 핸드오프해야 하는 사람 ⚠️ 주의 생성 코드는 프로토타입 수준 — 프로덕션 적용 전 검토 및 수정 필요
목차
지원 내보내기 형식 코드 내보내기 Figma 내보내기 Google AI Studio로 내보내기 내보내기 선택 기준
1. 지원 내보내기 형식
형식 지원 여부 특징 HTML/CSS (Vanilla) 지원 프레임워크 없이 바로 사용 가능 Tailwind CSS 지원 Tailwind 유틸리티 클래스 기반 React/JSX 지원 컴포넌트 단위로 분리된 React 코드 Flutter 베타 지원 Dart Widget 트리 형식 Figma 파일 지원 Auto Layout 포함 Figma 호환 Google AI Studio 지원 Antigravity 에이전트로 백엔드 연동 Google Jules 지원 코드 자동화 에이전트 연결
2. 코드 내보내기
내보내기 절차
1. 내보낼 화면(들) 선택
2. 우측 상단 "Export Code" 버튼 클릭
3. 내보내기 형식 선택:
- HTML/CSS
- Tailwind CSS
- React/JSX
- Flutter (베타)
4. "Copy to Clipboard" 또는 "Download ZIP" 선택
HTML/CSS 출력 예시
<!-- Stitch가 생성하는 HTML 구조 예시 --> < div class = "home-screen" > < header class = "header" > < h1 class = "app-title" >배달 앱</ h1 > < button class = "icon-btn" >🔔</ button > </ header >
< section class = "search-section" > < input class = "search-input" placeholder = "음식, 식당 검색" /> </ section >
< section class = "category-section" > < div class = "category-card" >🍕 피자</ div > < div class = "category-card" >🍔 버거</ div > < div class = "category-card" >🍜 한식</ div > </ section > </ div > /* 대응하는 CSS 예시 */ .home-screen { font-family : 'Pretendard' , sans-serif ; background : #ffffff ; padding : 16 px ; }
.header { display : flex ; justify-content : space-between ; align-items : center ; margin-bottom : 16 px ; } React/JSX 출력 예시
// Stitch가 생성하는 React 컴포넌트 예시 import React from 'react' ; import './HomeScreen.css' ;
const HomeScreen = () => { return ( < div className = "home-screen" > < header className = "header" > < h1 className = "app-title" >배달 앱</ h1 > < button className = "icon-btn" >🔔</ button > </ header >
< section className = "search-section" > < input className = "search-input" placeholder = "음식, 식당 검색" /> </ section >
< section className = "category-section" > {[ '🍕 피자' , '🍔 버거' , '🍜 한식' ]. map (( category ) => ( < div key = {category} className = "category-card" > {category} </ div > ))} </ section > </ div > ); };
export default HomeScreen; Tailwind CSS 출력 예시
// Tailwind CSS 유틸리티 클래스 기반 출력 예시 const HomeScreen = () => ( < div className = "bg-white p-4 font-sans" > < header className = "flex justify-between items-center mb-4" > < h1 className = "text-xl font-bold text-gray-900" >배달 앱</ h1 > < button className = "p-2 rounded-full bg-gray-100" >🔔</ button > </ header >
< section className = "mb-4" > < input className = "w-full px-4 py-2 border border-gray-200 rounded-xl" placeholder = "음식, 식당 검색" /> </ section >
< section className = "grid grid-cols-3 gap-2" > {[ '🍕 피자' , '🍔 버거' , '🍜 한식' ]. map (( cat ) => ( < div key = {cat} className = "p-3 bg-orange-50 rounded-lg text-center text-sm" > {cat} </ div > ))} </ section > </ div > ); 3. Figma 내보내기
디자이너와의 협업 또는 전문 편집이 필요할 때 Figma 파일로 직접 내보낼 수 있다.
Figma 내보내기 절차
1. 내보낼 화면(들) 선택
2. "Paste to Figma" 버튼 클릭
3. 클립보드에 Figma 호환 데이터 자동 복사
4. Figma 파일 열기 → Ctrl+V (Mac: Cmd+V)
5. Auto Layout이 포함된 Figma 컴포넌트로 붙여넣기 완료
Figma 내보내기 결과물 특징
항목 설명 Auto Layout 반응형 레이아웃을 위한 Auto Layout 자동 적용 레이어 구조 컴포넌트 계층 구조 보존 색상 스타일 주요 색상이 Figma 스타일로 등록 텍스트 스타일 타이포그래피 스타일 자동 정의
활용 시나리오
flowchart TD
A[Stitch에서 UI 생성] --> B[Paste to Figma]
B --> C[Figma에서 세밀한 편집]
C --> D1[디자이너 핸드오프\nDev Mode]
C --> D2[사용자 테스트\nPrototype Mode]
C --> D3[에셋 추출\nExport]
4. Google AI Studio로 내보내기
풀스택 앱으로 발전시키려면 AI Studio를 통해 Firebase 백엔드와 연동할 수 있다.
Stitch → "Send to AI Studio" 버튼 클릭
→ AI Studio에서 Antigravity 에이전트 활성화
→ 자동 처리:
1. Firebase 프로젝트 생성
2. Firestore 데이터베이스 설정
3. Firebase Authentication 구성
4. 프론트엔드 코드와 Firebase 연결
5. 보안 규칙 초안 생성
Firebase 통합 상세 내용은 3.2 Firebase·AI Studio 통합 참고
5. 내보내기 선택 기준
상황 권장 형식 빠른 프로토타입 공유 HTML/CSS (즉시 브라우저 실행 가능) React 프로젝트에 통합 React/JSX Tailwind 프로젝트에 통합 Tailwind CSS Flutter 모바일 앱 Flutter (베타) 디자이너 협업·핸드오프 Figma 풀스택 앱으로 발전 Google AI Studio + Firebase
코드 품질 관련 주의사항
주의 항목 설명 프로토타입 수준 인터랙션 로직(상태 관리, API 호출)은 포함되지 않음 접근성 ARIA 속성 등 접근성 코드는 수동 추가 필요 최적화 이미지 최적화, 코드 분할 등 성능 작업 필요 테스트 자동 생성 코드는 단위 테스트 없음
문서 탐색
참고 자료