Figma Dev Mode로 개발자에게 디자인 넘기기
Figma Dev Mode를 사용하면 개발자가 디자인을 CSS 코드, 크기 수치, 에셋으로 바로 추출할 수 있습니다. 디자인과 개발 사이의 소통 오류를 크게 줄여요.
따라 하기
1단계
Dev Mode 활성화하기
- 1Figma 파일을 열고 오른쪽 상단에서 Toggle Dev Mode 아이콘을 클릭합니다.
- 2또는 단축키 Shift+D를 누릅니다.
- Dev Mode가 활성화되면 화면 상단이 다크 테마로 전환되고 UI가 변경됩니다.
- Dev Mode에서는 모든 요소의 치수, 색상 값, 텍스트 속성, CSS 코드가 자동으로 추출됩니다.
Figma 열기figma.com
누를 위치 파일 열기›오른쪽 상단 Dev Mode 아이콘 or Shift+D›다크 모드 전환 확인
팁 Dev Mode는 Figma Professional 플랜 이상에서 전체 기능을 사용할 수 있습니다. 무료 계정은 제한적으로 사용 가능해요.