개발자 핸드오프 — 디자인을 코드로 연결하는 마지막 단계

Inspect 탭 완전 활용

접근 방법:
오른쪽 패널 상단 탭 → "Inspect"
또는 Ctrl+Shift+E

요소 선택 시 표시되는 정보:

[Frame/Component]
Width, Height
X, Y 위치
Corner Radius
Opacity
Fill Color (HEX, RGB, HSL)
Border (color, width, style)
Shadow (x, y, blur, spread, color)

[Text]
Font Family
Font Weight, Size
Line Height, Letter Spacing
Text Align
Color

[간격 확인]
두 요소 사이: 첫 번째 요소 선택 → 두 번째 요소에 Alt+Hover
→ 두 요소 사이의 정확한 간격(px) 표시

CSS 코드 자동 생성

Inspect 탭 하단:
"Code" 섹션 → CSS / Swift / Android XML 선택 가능

CSS 예시 (버튼 요소):
background: #6366F1;
border-radius: 12px;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
color: #FFFFFF;

주의사항:
자동 생성 CSS는 참고용 — 직접 복사해서 쓰면 맥락 없는 코드가 됨
개발자는 수치(숫자값)를 확인하는 용도로 활용하는 것이 더 실용적

Color Style 연결된 경우:
색상 이름(예: Brand/Primary) 함께 표시
→ 개발자가 디자인 토큰 이름으로 연결 가능

Dev Mode — 개발자 전용 뷰

Dev Mode 활성화:
상단 툴바 코드 아이콘() 클릭 또는 Shift+D

Dev Mode 특징:
- 컴포넌트 경계선 자동 강조 표시
- 레이어 이름 개발자 친화적 표시
- 코드 스니펫 (CSS / React / iOS / Android) 즉시 복사
- 이미지 Export 버튼 노출
- Ready for Dev 마크 확인

Ready for Dev 표시:
디자이너가 특정 프레임을 "핸드오프 완료"로 표시
Section 또는 Frame 우클릭 → Mark as Ready for Dev
→ 개발자에게 "이 화면 작업 시작해도 됨" 신호

Dev Mode 제한:
무료 플랜: View 전용 (수치 확인, Export만 가능)
Professional: 코드 스니펫, CSS 변수 연동 가능

이미지와 아이콘 Export

Export 설정:
요소 선택 → 오른쪽 패널 하단 Export 섹션 "+" → 설정 후 "Export"

포맷 선택 가이드:
PNG: 비트맵 이미지, 사진, 그라디언트 포함 요소
SVG: 아이콘, 로고, 단순 벡터 → 무손실 확대 가능
WebP: 웹 최적화, PNG보다 파일 크기 25-35% 작음
PDF: 인쇄물, 고해상도 문서

배율(Scale) 설정:
1x: 일반 화면 (72 DPI)
2x: Retina 디스플레이 (@2x)
3x: 고밀도 디스플레이 (@3x)
실무: 2x까지 Export해서 개발자에게 전달

다중 Export:
Ctrl+클릭으로 여러 요소 선택 → Export 한 번에 처리
또는 File → Export (Ctrl+Shift+E) → 파일 단위 Export

아이콘 Export 팁:
아이콘 컴포넌트에 SVG 1x Export 기본 설정 저장 가능
Component 선택 → Export "+" 클릭 후 SVG 설정 → Main에 저장
→ Instance에서도 동일 설정 자동 상속

실무 핸드오프 체크리스트 10가지

번호	항목	확인 방법
1	모든 레이어에 의미 있는 이름	"Rectangle 23" 같은 이름 없는지 확인
2	Color Style 연결	Inspect에서 색상에 이름 있는지 확인
3	Text Style 연결	Inspect에서 폰트 스타일 이름 있는지 확인
4	8pt 그리드 정렬	모든 크기/간격이 4 또는 8의 배수인지 확인
5	컴포넌트 사용 여부	반복 UI는 반드시 컴포넌트 Instance
6	아이콘 SVG Export 설정	아이콘 컴포넌트에 SVG 1x 설정
7	이미지 2x Export 준비	사진/이미지에 PNG 2x 설정
8	모든 상태 화면 완성	Empty State, Error State, Loading 화면
9	모바일/태블릿 대응 화면	반응형 레이아웃 변형 화면 제공
10	Ready for Dev 마크	개발 가능한 화면에 표시

자주 발생하는 핸드오프 오류 TOP 5

1. 폰트가 다르게 보임
원인: 개발자 시스템에 해당 폰트 미설치
해결: Google Fonts 링크 또는 폰트 파일 함께 전달

2. 간격이 맞지 않음
원인: Figma에서 Stroke가 Outside로 설정된 경우 경계가 밀림
해결: 핸드오프 전 모든 Stroke를 Inside 또는 Center로 통일

3. 아이콘이 흐릿하게 표시
원인: PNG로 Export했거나 1x 해상도
해결: SVG로 Export하거나 2x/3x PNG 제공

4. 색상이 다르게 보임
원인: 개발자가 Opacity 있는 색상을 단순 HEX로 오해
해결: Inspect에서 rgba 값 확인 후 명시적으로 전달

5. 개발자가 스펙을 다시 물어봄
원인: 레이어 구조가 복잡하거나 이름이 없어서 찾기 어려움
해결: 핸드오프 전 레이어 정리 + Zeplin/Storybook 연동 고려

관련 검색어  ·  피그마 핸드오프, 피그마 Inspect, Figma Dev Mode, 피그마 개발자 이관, 피그마 Export, 피그마 CSS 추출, 피그마 실무 워크플로우