피그마 오토레이아웃에 대해 알아 봅니다.
고정 스케일 오토레이아웃 박스 그려 봅니다.
부모 박스 하나 대충 그려 봅니다.
400*100 노란색 프레임 하나 그립니다.
클립 콘텐트가 셀렉 되어 있으면 프레임 넘치는 자식 박스는 안 보입니다.
클립 콘텐트 셀렉이 디폴트이므로 신경 안써도 됩니다.
부모 박스 오토레이아웃 적용 합니다.
layout - 우측 토글오토레이아웃 유아이 - 탭 합니다.
위 그림처럼 오토레이아웃 세팅 합니다.
자식 박스 세개 대충 그려 봅니다.
60*30 하얀색 랙탱글 3개 그립니다.
대충 배치 합니다.
자식 박스1 넣어 봅니다.
알아서 센터에 잘 들어 갑니다.
자식 박스2 넣어 봅니다.
알아서 좌우로 잘 들어 갑니다.
자식 박스3 넣어 봅니다.
3개가 알아서 자리를 잘 찾아 들어 갑니다.
플렉스 스케일 오토레이아웃 박스 그려 봅니다.
심심하니까 옵션을 위 세팅으로 변경해 봅니다.
기본 갭 10 적용됩니다.
심심하니까 스케일 조정해 봅니다.
뭔가 마음에 안 듭니다.
위 그림처럼 세팅 살짝 변경해 봅니다.
살짝 마음에 듭니다.
스케일 살짝 변경해 봅니다.
쭉쭉 알아서 잘 배치 됩니다.
자식 박스 배치를 세로로 변경해 봅니다.
위 그림처럼 세팅 합니다.
알아서 쭉쭉 잘 배치 됩니다.
기분이 좀 좋아졌습니다.
파일 보기
https://www.figma.com/design/xQlCPkd2GloTd9v8G5dHuw/Auto-layout?node-id=1-10&t=8A0hImg5aqmM5tLM-1
Reference
Figma 오토레이아웃 가이드: 초보자를 위한 사용법과 활용 팁
오늘은 Figma의 필수 기능 중 하나인 "오토레이아웃(Auto Layout)"에 대해 알아보겠습니다. 오토레이아웃은 UI 디자인 작업을 훨씬 효율적으로 만들어 주는 기능으로, 초보자라도 쉽게 적용할 수 있는
velog.io
https://m.blog.naver.com/gilbutzigy/223297159511
피그마의 꽃, 오토 레이아웃 자세히 알아보기
피그마의 오토 레이아웃은 매우 강력한 기능으로, 반응성과 유연성이 뛰어난 동적 레이아웃을 만들 수 있는...
blog.naver.com
https://help.figma.com/hc/ko/articles/360040451373-Auto-Layout-%EA%B0%80%EC%9D%B4%EB%93%9C
Auto Layout 가이드
시작하기 전에 이 기능을 사용할 수 있는 사용자 모든 요금제에서 사용 가능 Figma Design 및 Figma Sites에서 사용할 수 있습니다. Figma Slides와 Figma Buzz의 디자인 모드에서도 Auto Layout에 액세스할 수 있
help.figma.com
'Figma manual' 카테고리의 다른 글
| 피그마 - 테이블 - 플러그인으로 만들기 (0) | 2026.07.05 |
|---|---|
| 피그마 - 테이블 - 오토레이아웃으로 만들기 (0) | 2026.07.05 |
| 프레임 정렬 (0) | 2026.06.13 |
| 파일 이동하기 복사하기 붙여넣기 (0) | 2026.06.13 |
| 텍스트 편집 (0) | 2026.06.13 |