핵심 기능으로 빠르게, 피그마 실무 50강사전(3)

 

1. 오토 레이아웃

레이아웃 요소를 프레임으로 묶어 간격, 상하좌우 마진을 조절해주는 기능

Component 와 함께 사용할 수 있다. Auto 레이아웃이 적용된 객체를 복사 붙여넣기 하면 마진을 함께 조절할 수 있다.

Ungroup으로 auto layout을 해제할 수 있다.

 

Auto 레이아웃의 방향, 간격, contents의 위치 등을 설정할 수 있다.

하나의 방향의 auto layout을 적용할 수 있으므로 여러 모듈을 합쳐서 사용한다.

간격에 Auto 라고 작성하면 프레임 크기에 따라 자동으로 간격이 변경된다.

Alignment로 모듈의 위치를 조절할 수 있다. Auto layout이 걸리면 자유롭게 조절이 안되기 때문!

auto layout 설정과 상관없이 위치를 옮기고 싶다면 Frame 안의 요소를 클릭 후 absolute position 설정을 해제해준다.

 

Auto Layout 패널을 이용하지 않고 캠버스에서 값을 설정할 수 있다.

* Shift를 누른 채로 조절하면 10씩 조절된다.

 

Layout 심화 설정

강의와 약간 UI가 달라졌다.

spacing mode또한 사라졌는데, Auto==Space between mode라고 생각하면 된다.

Canvacs stacking 으로 겹치는 content의 설정을 할 수 있다.

Align text baseline을 기준으로 정렬의 기준을 위/아래/중간 등으로 설정할 수 있다.

 

---

2. 오토 레이아웃 리사이징

Container안에 프레인이 늘어났을 때 어떻게 대응할지를 지정해주는 것을 리사이징 이라고 한다.

이전 버전에서는 Fixed, Hug, Fill 등의 설정을 해서 Content와 Container 간의 반응형 설정을 할 수 있다.

최근 버전에서는 Suggest Auto Layout으로 자동으로 리사이징하는 듯 하다.

Content를 강제로 설정하는 경우, Content만 사이즈가 조절된다.(Fixed 적용)

 

---

3. 반응형 모듈&페이지

 

1. 반응형 모듈

디바이스 사이즈에 따라 다양한 대응이 가능한 모듈을 반응형 모듈이라 한다.

• 콘스트레인츠 활용(특정 모듈 위치 고정)
• 리사이징 속성 활용

 

안에 있는 모든 요소에 대하여 fill container 설정을 해주어야 전체 container의 크기와 함께 content가 리사이징 된다.

* 요소 클릭 후 Alt를 누르고 드래그하면 복사가 가능하다.

 

2.반응형 페이지

하나의 디자인으로 다양한 크기의 사이즈 페이지에 대응이 가능한 페이지 디자인을 말한다.

대응할 사이즈(Web, App, Tablet 등)를 지정하고 그리드가 씌워진 화면 프레임을 준비한다.

각 그리드에 맞춰서 모듈을 넣기!

 

 

 

---

# 회고

 

2022년 강의라서 피그마 화면이 약간 달라졌다...기능 찾는데 꽤 오래걸렸다.