Figma Auto Layout 으로 반응형 디자인 작업하기

Figma의 Auto Layout은 프레임 안의 요소들을 자동으로 정렬하고 크기를 유연하게 조절할 수 있는 기능이다.

버튼, 카드, 채팅 UI처럼 반복 요소가 많은 컴포넌트에 특히 유용하다.

프레임 크기를 바꿔도 Auto Layout이 자동으로 정리해주므로 반응형 디자인 작업에 강력하다.

 

채팅 UI를 예시로 작업방법을 보자.

 

---

 

 

※ Auto Layout 적용하기 : Shift + A 단축키로 빠르게 설정할 수 있음.

 

버튼 : 버튼은 터치영역이기 때문에 frame으로 감싸서 Auto Layout을 만들어 준다.

 

Auto Layout 적용하기

상단바에 요소들을 배치한 후 모두 선택한 뒤 Auto Layout을 적용한다.

• 단축키: Shift + A
• 또는 우측 패널에서 Auto Layout 버튼 클릭

이제 프레임 안의 메시지들이 자동으로 정렬된다.

 

 

크기 조절

Auto Layout의 강점 중 하나는 유연한 크기 조절이다.

• 제목요소를 Fill Container로 설정하면 프레임 크기에 맞춰 자동으로 늘어나거나 줄어든다.
• 덕분에 다양한 화면 크기에서도 레이아웃이 무너지지 않는다.

 

 

! 여기서 한 가지 중요한 설정이 있다.

• 프레임 전체 크기가 커질 때 내부 요소도 같이 늘어나도록 하려면, Horizontal Resizing 옵션을 Left + Right로 지정해야 한다.
• 이렇게 하면 좌우 여백을 유지한 채로 요소 자체의 크기가 자연스럽게 늘어나 반응형 UI에 적합한 결과를 얻을 수 있습니다.

 

 

 

정렬과 간격 설정

Auto Layout은 단순히 정렬만 해주는 게 아니다.

• 상단 툴바에서 정렬 방식(좌, 우, 중앙 등) 을 자유롭게 조정할 수 있다.
• 간격 값을 입력하면 요소 간격을 일정하게 유지할 수 있다.
• 필요하다면 Clip content 옵션으로 프레임 밖의 요소를 잘라낼 수도 있다.

 

 

대화박스는 입력양에따라 길이가 변하니까 text에 Auto Layout을 줘서 디자인한다.

text박스를 Auto Layout으로 감싸두면 대화창을 추가할때 편하게 작업할 수 있다.

text가 젤 적을때와 많을때의 길이. 최소값 최대값도 설정해준다.

 

 

user이미지와 대화박스도 한번에 Auto Layout으로 다시 감싸준다. 이렇게 받은 메시지를 완성!

보낸 메시지를 만들기위해 대화창 한줄을 복사해서 가져온 후 위치를 바꿔준다.(박스 라운딩도 수정해준다).

받은 메시지와 보낸 메시지가 완성되면 두 레이아웃을 다시 Auto Layout으로 묶어준다.

Auto Layout의 크기를 Frame과 맞춰준 후 가로를  Fill container로 바꿔준 후 마진값을 적당히 수정해준다.

이러면 메시지를 추가할때마다 편하게 수정할 수 있다.

 

입력창은 상단봐와 거의 동일 :)

 

 

채팅창에 대화가 많아지면?

많아질 일이 있을까 모르겠지만 있을 수도 있겠지.? 채팅창 영역에 Clip content 를 체크해준다.

 

 

Clip content 옵션으로 영역을 벗어나는 요소를 숨길 수도 있음. 이제 화면을 늘려도 잘보인다.

아 힘들다.