Figma

Figma Dev Mode로 개발자에게 디자인 넘기기

Basic10활용 사례

Figma Dev Mode를 사용하면 개발자가 디자인을 CSS 코드, 크기 수치, 에셋으로 바로 추출할 수 있습니다. 디자인과 개발 사이의 소통 오류를 크게 줄여요.

Figma 열기

figma.com

STEP 1 / 4
1

STEP 1. Dev Mode 활성화하기

figma.com
Figma
최근 항목
즐겨찾기
내 초안
공유된 항목
+ 새 디자인 파일
최근 항목
UI 디자인 시스템
수정됨 1일 전
랜딩페이지 v2
수정됨 1일 전
모바일 앱 프로토타입
수정됨 1일 전

파일 열기 → 오른쪽 상단 Dev Mode 아이콘 or Shift+D → 다크 모드 전환 확인

Figma 파일을 열고 오른쪽 상단에서 Toggle Dev Mode 아이콘을 클릭합니다. 또는 단축키 Shift+D를 누릅니다. Dev Mode가 활성화되면 화면 상단이 다크 테마로 전환되고 UI가 변경됩니다. Dev Mode에서는 모든 요소의 치수, 색상 값, 텍스트 속성, CSS 코드가 자동으로 추출됩니다.

Dev Mode는 Figma Professional 플랜 이상에서 전체 기능을 사용할 수 있습니다. 무료 계정은 제한적으로 사용 가능해요.

이 단계를 완료했나요?