개발자 모드 (Dev Mode) 활용하기

들어가며

Figma Dev Mode는 개발자가 디자인 스펙을 더 편하게 확인할 수 있도록 만들어진 모드다. 일반 뷰어 모드보다 훨씬 많은 정보를 제공하고 CSS 코드도 바로 확인할 수 있다. 실무에서 어떻게 활용하는지 정리해둔다.

---

Dev Mode 진입

Figma 파일 열기 → 우측 상단 토글 버튼 → Dev Mode 전환
단축키: Shift + D

Dev Mode는 유료 플랜에서 제공되지만, 뷰어 권한으로도 접근 가능한 경우가 있다. 회사 Figma 플랜에 따라 다르다.

---

Dev Mode에서 달라지는 것들

우측 패널 변화

일반 모드에서는 Design 탭만 보이지만 Dev Mode에서는 다음이 추가된다.

Code 탭    : CSS / iOS / Android 코드 자동 생성
Inspect 탭 : 스펙 수치 상세 표시

변경된 요소 표시

이전 버전 대비 변경된 요소를 녹색으로 하이라이트해서 표시해준다. 디자인이 업데이트됐을 때 어디가 바뀌었는지 빠르게 파악할 수 있다.

---

CSS 코드 확인

요소를 클릭하면 우측 Code 탭에서 CSS 코드를 바로 확인할 수 있다.

텍스트 요소

/* Figma Dev Mode에서 생성되는 CSS 예시 */
font-family: 'Pretendard', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: -0.02em;
color: #1A1A1A;

박스 요소

display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 20px 16px;
background: #FFFFFF;
border-radius: 8px;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);

주의사항

Dev Mode CSS를 그대로 쓰면 안 되는 경우:
- px 단위를 rem으로 변환해야 할 때
- CSS 변수(--color-primary)로 교체해야 할 때
- Figma 레이아웃과 실제 구현 방식이 다를 때
  (예: Figma는 absolute positioning, 실제는 flex)

참고용으로 쓰되 그대로 복붙하지 않는 게 좋다

---

Assets 패널에서 에셋 Export

이미지 Export

이미지 요소 클릭 → 우측 패널 → Export 섹션
- 포맷 선택: PNG / JPG / SVG / PDF
- 배율 선택: 1x / 2x / 3x
- Export 버튼 클릭

SVG 아이콘 Export

아이콘 클릭 → Export → SVG 선택 → Export
→ SVG 파일 다운로드 후 프로젝트에 추가

실무에서는 디자이너가 아이콘을 한꺼번에 export해서 공유하는 경우도 있고, 개발자가 직접 하나씩 export하는 경우도 있다. 팀 컨벤션을 미리 정해두는 게 좋다.

---

Inspect 탭 활용

Inspect 탭에서는 선택한 요소의 모든 스펙을 정리된 형태로 볼 수 있다.

확인 가능한 정보

크기:
- Width / Height
- Min / Max Width (반응형인 경우)

여백:
- Padding (Top / Right / Bottom / Left)
- Margin (Auto Layout 사용 시)
- Gap (자식 요소 간격)

색상:
- Fill Color (HEX, RGBA)
- Stroke Color
- Opacity

텍스트:
- Font / Size / Weight / Line Height / Spacing

그림자:
- Box Shadow (X, Y, Blur, Spread, Color)

Border:
- Border Radius
- Border Width / Color

---

실무 활용 패턴

개발 전 스펙 정리

1. Dev Mode에서 각 컴포넌트 클릭
2. Inspect 탭에서 스펙 확인
3. 필요한 값들을 코드에 적용

자주 쓰는 방식:
- CSS 변수로 정의된 값이면 변수명 그대로 사용
- 직접 수치면 디자인 토큰으로 정의 후 사용

디자인 토큰 확인

디자인 시스템이 적용된 파일이면:
- 색상: var(--color-primary-500) 형태로 표시
- 타이포그래피: Heading/Body/Caption 등으로 표시
- 간격: spacing-4, spacing-8 등으로 표시

토큰이 없으면 직접 수치를 쓰되
나중에 토큰화할 수 있도록 변수로 관리

반응형 스펙 확인

모바일 프레임 클릭 → 스펙 확인
데스크탑 프레임 클릭 → 스펙 확인
→ 두 값의 차이를 파악해서 미디어 쿼리 작성

---

Dev Mode 단축키

단축키	기능
Shift + D	Dev Mode 전환
Alt + 클릭	요소 간 간격 측정
Ctrl + C	선택한 요소 CSS 복사
1 / 2 / 3	화면 배율 조정
Space + 드래그	캔버스 이동
Ctrl + 마우스휠	줌 인/아웃

---

정리

기능	활용 방법
CSS 코드 확인	요소 클릭 → Code 탭
스펙 상세 확인	요소 클릭 → Inspect 탭
여백 측정	Alt 키 누르고 마우스 오버
이미지 Export	Export 섹션 → 포맷/배율 선택
SVG Export	아이콘 클릭 → Export → SVG
변경 사항 파악	Dev Mode 녹색 하이라이트 확인