피그마 Auto Layout (오토레이아웃) - wrap옵션 추가

안녕하세요

찐망고입니다 오늘은 피그마의 Auto Layout에 대해서 포스팅 해볼까 해요

엄청 편리하고 좋은 기능이라 생각합니다요!!

일단 피그마 이전글들을 참고해주시구요

 

 

0. styles등록 (text, color) - 이전글 참조

2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기

피그마 ui-스타일가이드, 스타일 등록하기

1. Layout grid

2023.07.05 - [피그마] - 피그마 Layout grid

피그마 Layout grid

2. Auto Layout

2023.07.07 - [UIUX디자인/피그마] - 피그마 Auto Layout (오토레이아웃)

피그마 Auto Layout (오토레이아웃)

3. Constraints

2023.07.11 - [UIUX디자인/피그마] - 피그마 Constraints, 컨스트레인트

피그마 Constraints, 컨스트레인트

4. Component & Variant

2023.07.13 - [UIUX디자인/피그마] - 피그마 컴포넌트, 베리언트 (Component, Variants)

피그마 컴포넌트, 베리언트 (Component, Variants)

5. Plugins

6. Prototype

 

피그마의 Auto Layout은 반복되는 레이아웃의 같은 여백을 설정할때나

패딩으로 이루어진 버튼을 만들때 사용하기 좋은 메뉴입니다.

바로 볼께요

오토레이아웃 설명이미지

위 이미지 오른쪽에 보면 Clip Content가 체크되어있는데요

일다 피그마는 프레임을 눌러서 작업을 하셔야 하는데 일러스트의 아트보드 개념이라고 생각하면 되여

다른점이 있다면 프레임안에 프레임을 넣으면서 작업할 수 있어서

현재 저 위의 이미지도

레이어

이런식으로 전체 프레임안에 각각의 섹션별로 프레임 작업을 하였구요

 

자 이젠 이 상태에서 저 아래 인스타그램 이미지들의 이름을 한꺼번에 바꿔줄까해요

마우스오른쪽메뉴 Rename

Rename메뉴를 누르면 아래처럼 팝업창이 뜨구 

일괄적으로 이름을 바꿀 수 있어요 텍스트를 쓰구 Number ↑ 누르면 숫자가 위에서 아래로 많아지는게 보이시죠?

 

number선택

 

마음이 편안해졌으니 이젠 본론으로 가볼까요?

ㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

자 일단 저 10장의 이미지를 오토레이아웃 설정할거에요

아 그전에 5장만 설정하고 두장을 추가해볼게여

단축키는 Shift + A를 누르거나 Auto layout메뉴에서 + 버튼을 눌러도 되구여

일단 오토레이아웃이 활성화되면 

저렇게 이미지가 하나로 묶이죠? 마이너스를 누르면 풀리는데

고대로 저 오토레이아웃 모양이 프레임으로 바뀌어요

오토레이아웃

 

오토라이아웃패널

오토레이아웃적용

48은 이미지사이의 간격, 22는 좌우로 36은 위아래로 여백이 들어간게 확인 될 거고

오토레이아웃 순서 변경

이미지부분을 더블클릭해서 하나만 선택한 후 옆으로 살짝 이동하면 저렇게 순서를 자동으로 변경할 수 있구요

이거 너무 좋은 기능이에요 포토샵에선 할 수 없는 ㅎㅎ

 

오토레이아웃 복사

맨 마지막 이미지를 선택해서 Ctrl + D를 누르면 저렇게 여백값을 유지하면서

이미지가 반복되어 늘어 납니다. 이것도 좋은기능이죠 ㅎㅎ

자 저렇게 복제된 이미지는 더블클릭하면 오른쪽에 custom패널이 뜨거든요

Choose Image를 누르면 로컬에 있는 이미지로 변경되요 

이미지 choose image

 

아니면 저렇게 이미지를 선택해서

오토레이아웃 되어있는 이미지중 하나를 더블클릭한 후에 ctrl+V를 하면 

붙여넣기가 됩니다 자동으로 여백도 조절되구요

오토레이아웃

 

 

자 이번에는 타이틀 쪽을 오토레이아웃으로 등록해볼건데요

일단 저 친구는 각 섹션의 타이틀 느낌이고

보면 타이틀은 같은 레이아웃이 반복되는 경우가 또 많단말이죠

그래서 여백 60을 유지하는 저 타이틀을 복사해서 위 섹션으로 올리고 글씨를 수정해볼꺼에요

오토레이아웃1

텍스트 길이만큼 늘어났다가 줄어들었다가 하는거 보이시나요

여백 60은 고대로 유지하구 있구요

오토레이아웃 속성

요렇게 방향을 바꿀수도 있어요 flex-direction같네요 

 

 

버튼도 적용 시켜 볼게요

버튼

버튼 그룹안에 rect도형으로 박스를 그리고 그 위로 텍스트를 넣었어요

저대로 오토레이아웃을 만들면

여백설정 할 수 있어요 그쵸?

아참고로 그룹모양이 오토레이아웃아이콘으로 변경되고 rect박스 사라졌어요

아 그리고 저 버튼 모양은 여백으로 박스크기를 결정하기 때문에 따로 정렬이 되진 않아요 그쵸?

오토레이아웃

이렇게 복사하시고 텍스트를 수정하면 박스크기가 변하는게 눈에 보일거에요 ㅎㅎ

 

자 그럼 여백없이 정렬로 작업해볼게요 

auto layout top left top center top right

auto layout center left  center center center right

auto layout center bottom left bottom center bottom right

 

 정렬은 오토레이아웃이 안에 요소보다 클때 정렬할 수 있는데요

 

 찐망고 포스팅에서만 볼 수 있는 부가적인 설명을 보시면

제가 버튼 박스를 하나는 도형도구로 하나는 프레임으로 만들었어요

그 두 친구를 각각 오토레이아웃으로 적용했더니

프레임으로 만든 Frame199는 프레임요소가 오토레이아웃 박스가 되었고

도형도구는 도형도구를 감싸는 박스가 생긴거죠

그래서 글씨를 복붙해버리면

Frame요소는 글씨사이즈에 맞춰 사이즈가 줄어버리고

박스형태는 글씨가 겹쳐지지 않고 정렬이 되어버리는거에여 가로정렬이나 세로정렬이 되는 상황인거죠

박스와 프레임으로 만든 버튼

일단 프레임으로 만든 버튼요소는 저렇게 사이즈를 보면 Hug처리가 되어있는데

저걸 fixed로 변경할 수 있어요

 

오토레이아웃 적용상태

오토레이아웃 정렬

자 오토레이아웃 박스를 키웠으니 정렬도 가능하겠죠?

 

참고로 박스로 만들었던 그친구는

Frame selection 생성

 

이렇게 두개를 잡고 프레임을 만들고 

텍스트 정렬

프레임 박스를 줄이고 글씨는 align을 하시면 됩니다 

 

 

추가로 새로 업데이트된 Auto layout의 Wrap옵션을 볼건데요

저렇게 이미지 10장을 오토레이아웃을 묶고 Wrap을 눌렀더니 

Horizontal 여백과 Vertical여백이 추가되었구요.

정렬도 가능 하죠?

이 상태에서 제가 오토레이아웃이 걸린 프레임의 사이즈를 수정해볼거에요

사이즈만 움직이는데도 저절로 정렬이 바뀌는게 확인되나요

보자마자 엇 Grid다 

박스를 기준으로 여백과 정렬이 모두 가능하니

디자인 하긴 너무 쉬워졌지만

실제로 저 아래그림처럼 디자인하진 마시고 직접 유연하게 Wrap된 박스크기를 수정해보세요

 

 

연습파일과 결과파일 업로드 해놓을테니 연습해보시길바랍니다.

autolayout.fig

8.20MB