오더히어로 앱 · 디자인 핸드오프
디자인 파일
핸드오프
디자이너·FE가 받는 파일 모음: 화면 벡터 PDF · 디자인 토큰 · 컴포넌트 CSS · Figma 임포트용 JSON. 아래 파일을 받아 쓰세요.
ℹ️ 네이티브 .fig 파일 안내:
Figma
.fig
는 코드/CLI에서 직접 생성이 안 됩니다. 대신
Figma로 바로 반입되는 3경로
를 제공합니다 — ①토큰: Tokens Studio JSON, ②화면: PDF 벡터, ③가장 충실: html.to.design로 배포 URL을 레이어째 반입.
01
화면 벡터 (PDF)
일러스트/피그마에서 열기 · 편집 가능한 벡터
PDF
홈 개선 v5
Before/After 비교
↓
PDF
취소 내역
리스트 + 상세
↓
PDF
거래명세서
리스트 + 상세
↓
PDF
디자인 토큰
색·타이포 레퍼런스
↓
PDF
UI 컴포넌트
버튼·입력·카드 등
↓
02
Figma 토큰 (Tokens Studio)
색·타이포·라운드·섀도를 변수/스타일로
{ }
tokens.figma.json
Tokens Studio 임포트용
↓
03
개발용 소스
저장소에 바로 넣기
TW
tailwind.tokens.cjs
theme.extend
↓
CSS
tokens.css
CSS 변수
↓
SC
tokens.scss
SCSS 변수
↓
{ }
tokens.json
범용 JSON
↓
CSS
components.css
UI 컴포넌트
↓
04
Figma로 가져오는 법
A
토큰 → Figma 변수
: Figma에서
Tokens Studio for Figma
플러그인 설치 → Import →
tokens.figma.json
업로드 → "Create variables/styles". 색·폰트·라운드가 Figma 변수로 생성됩니다.
B
화면 → Figma 레이어 (가장 충실)
:
html.to.design
플러그인 설치 → 배포 URL 붙여넣기(예:
orderhero-mypage-prototype.pages.dev
) → 편집 가능한 프레임/레이어로 반입.
C
화면 → 벡터 편집
: 위 PDF를
Illustrator
에서 열면 텍스트·도형이 편집 가능한 벡터로 열립니다. Figma는 PDF를 페이지에 드래그(이미지) 또는 플러그인으로 반입.