← 이미지·디자인

Figma Auto Layout으로 반응형 디자인 만들기

기초약 12분4단계

Auto Layout을 적용하면 텍스트가 길어져도 버튼이 자동으로 늘어납니다. 실제 코드의 Flexbox처럼 작동해 개발자 핸드오프에도 완벽해요.

따라 하기

1단계 / 4

Auto Layout 적용하기

1Auto Layout을 적용할 그룹이나 Frame을 선택합니다.
2오른쪽 패널 Design 탭에서 Auto layout 버튼을 클릭합니다.
단축키: Shift+A. Auto Layout이 적용되면 레이어 패널에서 해당 레이어 아이콘 변경으로 확인할 수 있습니다.
오른쪽 패널에 방향(가로/세로), 간격, 패딩, 정렬 옵션이 나타납니다.

이해를 돕는 예시 그림이에요. 실제 화면과 다를 수 있어요.

figma.com

Figma

최근 항목

즐겨찾기

내 초안

공유된 항목

+ 새 디자인 파일

최근 항목

UI 디자인 시스템

수정됨 1일 전

랜딩페이지 v2

수정됨 1일 전

모바일 앱 프로토타입

수정됨 1일 전

누를 위치 그룹/Frame 선택›오른쪽 Auto layout 버튼 클릭 or Shift+A›Auto Layout 옵션 패널 표시

팁 이미 그룹으로 묶인 요소들을 선택하고 Shift+A를 누르면 한 번에 Auto Layout으로 변환됩니다.