피그마 뽀사기 1. 오토레이아웃 기능 소개

피그마 오토 레이아웃이란?

반응형 웹처럼 레이아웃을 원하는 데로 고정시켜 화면을 늘리거나 줄였을 때 원하는 디자인이 보이게 할 수 있으며,

버튼이나 중복된 리스트 디자인을 만들 때 유용하게 사용된다.

부모와 자식의 두 개의 레이아웃이 있을 때만 오토 레이아웃 적용이 가능하다.

한 개의 요소에는 적용할 수 없다. 이점 명심하시길..

부모 요소와 자식 요소 두 개의 레이어를 잡고 우 클릭 > Add Autolayout 또는

단축키 shift + A로 만들 수 있습니다.

여기서 단축키 외우고 가시겠습니다. shift + A

1 - 정렬 방향

화살표 선택된 오토 레이아웃 프레임 내부의 요소들이 세로로 배치되어 있으면 세로 화살표로 표시되고

가로방향으로 배치된 경우 가로 화살표가 선택

2 - 요소 간 간격

기본이 되는 도형 위에 여러 개의 콘텐츠가 있는 경우 간격을 자동으로 맞춰주는 기능

스페이스 비트윈을 적용해 아래 있는 도형을 움직이면 그 크기에 맞춰서 간격이 조절된다.

수직 수평 아이콘을 클릭해 정렬 변경도 가능하다.

3 - 패딩 값

CSS에서와 마찬가지로 각 오토 레이아웃 부모 프레임에는 그 안의 요소 주위에 패딩이 있습니다.

오토 레이아웃을 통해 패딩을 설정하게 되면, 패딩 값이 자동으로 늘어나고 줄어든다.

4 - 프레임 내 배치 위치

부모 요소를 기준으로 자식 요소의 위치를 어디에 고정할지 지정해 준다.

유연한 반응형의 레이아웃 작업 시 유용하게 쓰인다.

5 - 더 보기 버튼

Advanced layout에서는 세부 설정을 해줄 수 있다.

Spacing mode : 자식 계층이 왼쪽부터 차곡차곡 정렬되는 패키지, 그리고 가로 길이에 맞춰 같은 여백이 적용되며 정렬되는 Space Between이 있다.

Strokes : 스트로크를 포함한 영역을 사용할지, 스트로크를 제외한 영역을 사용할지 설정해 주는 메뉴이다.

Canvas stracking : 자식 요소의 나열을 순서대로 하단 배치할지(First on top), 아니면 순서를 역행하여 붙이는 순서대로 상위 배치할지(Last on top)를 지정해 준다.

이 부분은 예제를 활용하면 쉽게 이해가 될 것 같아 나중에 예제와 함께 활용해 보겠다.

1. 버튼과 텍스트 요소를 만들어준다

2. 요소를 함께 선택한 후 마우스 우 클릭 > Add auto layout,

혹은 Ctrl(Command) + A를 눌러서 오토 레이아웃을 설정해 준다.

3. 설정 창에서 좌우 여백을 설정해 주고 상하 마진 값을 조절해 주면

아주 유용하게 사용할 수 있는 버튼 간단 완성!!

기본적인 기능은 익혔으니 다음 예제에는 오토 레이아웃을 활용한

기본 리스트와, 앱 메인 화면을 만들어 보기로 하자 :)