Figma 핵심! Auto Layout #1
기획자의 피그마 figma 오토 레이아웃 Auto layout
지난 시간에는 컬러와 텍스트 스타일을 지정하는 방법을 알아보았습니다.
오늘은 조금 더 핵심적인 기능!
Auto layout 오토 레이아웃을 완전 정복해볼까요?
*** Auto layout 강의도 동영상으로 볼 수 있습니다 :)
Figma 의 핵심 기능! Auto layout으로 버튼 만들기
오토 레이아웃(Auto layout)은 피그마에서 제공하는 기능 중 핵심 기능이자, 아주 유용한 기능이거든요.
한번 개념만 잡으시면 이 기능을 활용해서 간편한 화면 작업을 할 수 있으니 꼭 기억해두세요.
Auto layout
단어 그대로 자동으로 그래픽, 텍스트, 도형 등 포함하고 있는 에셋의 레이아웃을 일정하게 제어할 수 있는 기능을 제공합니다. 성격에 따라 여러 에셋을 조합하여 규칙적인 레이아웃을 설정할 수도 있습니다.
우리가 실습하고 있는 토스 화면을 다시 한번 볼까요?
출처 : toss 웹사이트 https://toss.im/총 2개의 송금 버튼이 있습니다.
Auto layoiut 오토 레이아웃 기능으로 간단히 버튼을 만들어볼게요.
1. 이번엔 굳이 Rectangle 툴을 사용할 필요가 없답니다. 우선 버튼 안에 들어갈 텍스트를 작성해주세요. 화면 아무데서나 작성하셔도 상관없어요.
2. Auto layout 을 적용하려면 대상 에셋이 그룹 또는 프레임에 속해 있어야 합니다.
저는 우선 이 글씨를 선택한 후에 Command + g 로 이 텍스트를 그룹으로 만들어줄게요. 프레임으로 만드셔도 무방합니다. 어차피 Auto layout 이 적용되면 해당 에셋은 프레임으로 변경됩니다.
3. 이 그룹을 선택한 상태로 오른쪽 디자인 패널의 Auto layout 의 + 버튼을 클릭하면 아래 이미지처럼 Auto layout 옵션이 활성화되어 보여집니다.
4. Auto layout 의 옵션은 어떤 것들이 있는지 살펴볼게요.
1번부터 오른쪽으로 아래와 같은 기능을 제공합니다.
- Vertrical Direction
아이템 간의 정렬 방향을 세로로 설정합니다.
- Horizontal Direction
아이템 간의 정렬 방향을 가로로 설정합니다.
- Spacing between items
아이템 간의 공백을 설정합니다.
2번은 Padding around items 기능입니다.
이 기능은 아이템을 둘러싼 상/하/좌/우의 여백을 설정할 수 있습니다.
3번 Constraints and resizing은 Auto layout 설정 시에만 사용되는 것은 아니지만, 디자인에 따라 오토 레이아웃에서 설정이 필요한 경우가 있습니다. 이 부분은 아래에서 한번 더 짚어볼게요.
Padding around items 항목에 있는 숫자 입력란에 특정 숫자를 입력하면 상/하/좌/우 여백 모두가 동일한 픽셀로 적용됩니다. 만약 각각 다른 기준의 여백을 주고 싶다면, 숫자 입력란 옆에 있는 버튼을 클릭해보세요.
1번으로 표시되어있는 부분과 같이 숫자 입력란으로 되어있는 부분은 각각 상/하/좌/우의 패딩을 설정하는 항목입니다.
2번은 아이템 정렬의 기준을 잡는 부분입니다. Auto layout 안에 속해있는 아이템의 정렬 기준을 설정할 수 있습니다.
3번은 2번과 연결된 옵션이라고 생각하시면 됩니다. Packed 가 기본적으로 설정되어 있는데, 이 항목을 Space between 으로 변경하면 일괄적으로 내부 아이템의 간격을 일정하게 설정해줍니다.
설명이 너무 길었지만, 한번 설정을 해보고 나면 감이 확 잡힐테니 너무 걱정하지 마세요. :)
5. 그럼 우리는 다시 버튼을 만들기 위해서 '송금' 그룹에 Auto layout 기준을 설정해볼게요.
이 그룹에는 '송금'이라는 텍스트 하나만 존재하기 때문에 Direction 은 크게 의미가 없지만 Horizontal 을 선택했습니다. 아이템 간의 스페이싱도 아이템이 하나인 상태라 크게 의미는 없습니다. 0으로 작성하셔도 무방합니다.
하지만 버튼의 느낌을 주기 위해서 상하좌우 여백은 디테일하게 설정을 해주었습니다.
밑의 이미지처럼 상/하 10., 좌/우 15로 설정을 했습니다.
그리고 이 버튼을 만들어 송금 버튼 외 다른 버튼에서도 사용하기 위해서 Resizing 기준을 변경해줍니다.
지금은 '송금' 이라는 텍스트만 있지만, 더 긴 텍스트가 들어가더라도 상/하/좌/우 동일한 여백으로 텍스트가 항상 중앙에 위치할 수 있도Constraints and resizing 기준을 설정해줍니다.
리사이즈 기준은 에셋의 성격에 따라 가로 방향, 세로 방향에 따라 다르게 설정할 수 있습니다.
버튼의 텍스트가 길어질때를 대비해 가로 기준은 Hug contents 를 선택했습니다. 용어가 너무 귀엽지 않나요? ㅋㅋㅋㅋ 이 옵션을 선택하면 내부의 컨텐츠를 꼭 껴안은 상태로 리사이징이 됩니다.
대신 버튼의 길이 height 가 늘어나지 않도록 세로 방향의 기준은 Fixed 로 설정해줍니다.
세로 길이 기준을 Fixed 로 선택할 때의 기준점도 별도로 설정할 수 있습니다. 저는 Top으로 설정했습니다.
6. 이 상태에서 버튼의 색상과 Radius 를 적용해볼까요?
방법은 아주 간단합니다! 지금 제작한 에셋을 선택한 상태로 오른쪽의 디자인 패널에서 Fill 영역에서 Primary 를 배경색을 지정하고, 텍스트 색상은 화이트로 변경했습니다.
Figma - Fill, Frame그리고 버튼 모서리의 둥근 느낌을 주기 위해서 Radius 를 5로 설정했습니다.
이렇게 버튼이 완성되었습니다. :)
Auto layoutAuto layout 을 적용했기 때문에 아래 버튼처럼 텍스트가 길어져도 상/하/좌/우 여백과 세로(height) 길이는 늘 일정하게 적용됩니다.
개인적으로 Figma 기능 중에서 Auto layout 은 핵심 중 핵심 기능이라고 생각하는 부분입니다.
우리는 예제 실습을 위해서 버튼을 만들었지만, 여러 조합으로 서비스에 필요한 다양한 템플릿을 만들 수 있답니다.
다음 시간에는 Auto layout 을 활용한 컨텐츠 정렬 기능과 함께 컴포넌트(Component) 제작을 해볼게요.
오늘도 고생하셨습니다~!!
