신규 기능 · Dev Mode + Code 추출
디자인 의도를 코드로 정확히 전달하는 Figma Dev Mode의 원리와 실전 워크플로우를 체득합니다.
이 가이드의 배경
“Dev Mode — 디자인을 React 코드로 추출”
이 튜토리얼에서 배울 것들
디자이너와 개발자 사이의 '말이 다른 문제'는 왜 생길까요? Figma Dev Mode는 단순 치수 확인 도구가 아니라, 디자인 토큰·컴포넌트 구조·코드 스니펫을 한 화면에서 연결하는 핸드오프 레이어입니다. 이 강의에서는 Dev Mode의 작동 원리부터 React/CSS/iOS/Android 코드 추출, Linked components 활용까지 실무 워크플로우를 완성합니다.
핸드오프 비용의 실체
Dev Mode가 해결하는 3가지
Dev Mode 토글의 원리
Code 패널의 구조 이해
컴포넌트 선택 vs 일반 레이어
중간 이해도 확인
Figma 실제 화면
“설정 메뉴를 클릭하세요”
Extension이 실제 Figma 위에서 단계별로 안내합니다
무료로 제공되는 퀵 가이드입니다.
실제 서비스에서 Extension으로 직접 따라해보세요.
퀵 가이드 담기
내 수강 목록에 추가
바로 시작
Figma 사이트 열림
Extension 안내
단계별 하이라이트 + 설명