신규 기능 · Auto Layout + Components
왜 Auto Layout과 Components를 함께 써야 하는지, 반응형 UI와 재사용 가능한 컴포넌트를 체계적으로 만드는 원리를 체득합니다.
이 가이드의 배경
“Auto Layout + Components — 재사용 디자인 시스템”
이 튜토리얼에서 배울 것들
단순히 버튼을 만드는 게 아닙니다. Auto Layout의 Hug·Fill·Fixed 메커니즘을 이해하고, Components와 Variants로 상태 변화를 관리하는 디자인 시스템의 핵심 패턴을 실무 수준으로 익힙니다. 한 번 만든 컴포넌트가 프로젝트 전체에 걸쳐 일관성을 유지하는 구조를 설계합니다.
왜 수동 정렬은 한계인가
Auto Layout이 해결하는 세 가지 문제
Hug · Fill · Fixed의 원리
Components의 Main–Instance 구조
Variants로 상태를 관리하는 원리
핵심 개념 중간 점검
Figma 실제 화면
“설정 메뉴를 클릭하세요”
Extension이 실제 Figma 위에서 단계별로 안내합니다
무료로 제공되는 퀵 가이드입니다.
실제 서비스에서 Extension으로 직접 따라해보세요.
퀵 가이드 담기
내 수강 목록에 추가
바로 시작
Figma 사이트 열림
Extension 안내
단계별 하이라이트 + 설명