오토레이아웃(3) 해상도에 맞는 예제 만들기

UXUI 디자이너의 Figma

by UXUI디자이너 니키쌤 2023. 7. 4. 10:55

오늘은 오토레이아웃 세 번째 포스트입니다.

실전 예제를 만들어 보면서 가변적인 해상도에 어떻게 적용되는지 알아볼게요~

오토레이아웃 해상도에 맞는 카드 UI만들기

위와 같은 카드 ui를 만듭니다.

화면이 커지든 작아지든 레이아웃은 유지되게 만드려고 합니다.

위와 같은 가이드대로 오토레이아웃을 생성해 줍니다.

(단축키 shift + A)

fill x Hug

카드의 크기에 맞게 콘텐츠가 늘어납니다.

적용한 마진만큼 간격이 유지되면서 늘어나게 됩니다.

Hug x Hug

가로 허그는 align에 따라 배치방식이 달라집니다.

오른쪽 정렬이냐 왼쪽 정렬이냐 중앙 정렬이냐에 따라 보이는 모습이 달라집니다.

맨 위 타이틀의 더 보기 화살표는 Frame 안의 Absolute position을 설정해 줍니다.

타이틀이 길어져도 화살표는 항상 똑같은 위치를 갖게 됩니다.

1단계 오토레이아웃을 감싸는 2단계 오토레이아웃을 만들어 줍니다.

아바타와 시간 콘텐츠를 감싸는 오토레이아웃은 Space between을 설정해 줍니다.

Space between에 대해 자세히 알고 싶으시면 이전의 포스트를 참고하세요.

피그마의 오토레이아웃(1) Space between

오늘은 피그마의 핵심 기능인 오토레이아웃(auto layout)에 대해 알아볼게요. 다양한 디바이스에 맞는 자동 리사이징 디자인을 할 때 필요한 기능들이죠~ 오토레이아웃의 자식 요소들의 배치방

let-figma-design.tistory.com

2단계 오토레이아웃을 전체 감싸는 3단계 오토레이아웃을 만들어주세요.

위 오토레이아웃은 Fixed x Hug입니다.

세로형 카드가 완성되었습니다.

텍스트가 길어져도 아래도 늘어나게 되고 가로의 길이를 여러 화면크기에 배치해도 위의 레이아웃을 유지하는 걸 알 수 있습니다.

Letape Figma 레탑피그마

figma 웹기획 UI/UX 전문 교육

www.letapefigma.com