오더히어로 앱 · 디자인 핸드오프
디자인 파일
핸드오프
디자이너·FE가 받는 파일 모음: 화면 벡터 PDF · 디자인 토큰 · 컴포넌트 CSS · Figma 임포트용 JSON. 아래 파일을 받아 쓰세요.
🎨 완성된 Figma 디자인 파일 열기 ↗
5개 화면(홈·취소 리스트/상세·거래명세서 리스트/상세) 네이티브 프레임 + 컬러·텍스트·이펙트 스타일 + 컴포넌트.
흰색 테마
반영. Dev Mode 인스펙트·에셋 export·편집 모두 가능.
ℹ️ 안내:
위
Figma 파일이 이미 완성돼 있습니다
(편집·Dev Mode·export 가능). 아래는 참고용 원본 자료 — 화면 벡터 PDF·Figma 토큰(Tokens Studio)·토큰/컴포넌트 파일. 폰트는 Figma에 Noto Sans KR로 대체됨(Pretendard 설치 후 텍스트 스타일에서 일괄 교체).
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를 페이지에 드래그(이미지) 또는 플러그인으로 반입.