[UIUX] 피그마 사용법, 프레임, 반응형 디자인 (3)

 

※피그마 영문 버전 기준입니다.

피그마 사용법 정리

피그마에서는 Frame이라는 개념을 사용합니다.

피그마를 사용해보신 분이라면 A 또는 F 단축키를 이용해 프레임을 만들 수 있다는 걸 아실텐데요.

이 프레임 만드는 모습이 R키를 눌러 Rectangle을 만드는 모습과 똑같아, 이 둘의 차이점에 대해 설명이 필요할 것 같습니다.

피그마 Rectangle VS Frame

Frame으로 도형을 만들 경우 피그마에서 제공하는 프레임에 대한 다른 옵션들을 설정할 수 있어 반응형 디자인에 유리합니다.

또, 프레임으로 만든 도형은 프레임의 사이즈가 변경되어도 틀 안 도형 요소에 대한 변형이 일어나지 않습니다.

그러나 Rectangle로 도형을 만들어 Group화 하여 이용하게 될 경우, Group 사이즈의 변경이 일어나면 그룹 내 요소들에 대한 변형이 일어난 다는 차이 점이 있습니다. 

 

Frame을 사용해 만들면 오른쪽 디자인 패널에서 피그마의 장점 중 하나인

Auto Layout, Constraints, Layout grid의 기능이 활성화 됩니다.

 

Constraints

피그마에서 제공하는 반응형 디자인을 위한 최고의 도구로,

프레임안의 도형을 프레임의 변형에 따라오게 제약조건을 걸 수 있는 기능입니다. 커서 처럼 생긴 곳을 눌러 어느 쪽을 고정시킬지 정할수 있는데요, 만약 

위쪽과 왼쪽을 고정 시키면 컨테이너의 왼쪽으로 잡아 당겼을 경우 안에 있는 아이템들이 왼쪽 위에 기준으로 고정되어 아이템 변형이 일어나지 않습니다.

 

 

Auto Layout

어떤 프레임안에 내용물(텍스트, 도형)이 바뀌었을때 자동으로 프레임 사이즈가 변형되는 기능입니다.

프레임으로 만든 요소는 오른쪽 패널에서 Auto Layout을 추가할 수 있습니다.

이 기능으로 프레임 안 도형의 간격과 위, 아래, 양옆의 패딩 값 및 정렬을 설정할 수 있습니다.

Mac / Window

Shift + A

반응형 디자인에서의 Resizing

피그마에서 알아야될 개념인 Hug Contents 와 Fill Container에 대해 알아봅시다

 

Hug Contents

먼저 Hug Contents의 경우 내용물의 크기에 변화가 생기면 컨테이너도 변화하게 됩니다.

컨테이너의 Frame에서 설정해야합니다.

 

Fill Container

반대로 Fill Container의 경우에는 Container의 변화에 따라 내용물이 컨테이너에 맞게 채워지게 됩니다.

아이템의 Frame에서 설정해야 합니다.

 

Fixed Width / Height 

고정된 아이템 값을 유지합니다.

Distribution

컨테이너 안 아이템들의 간격을 자동으로 균등하게 배분해주는 기능

Style

Text, Color, Effect, Grid 등에 대한 스타일을 등록하고, 필요할때마다 꺼내 쓸 수 있습니다.

 

 

 

 

 

 

이런 글은 어떠세요?

 

2022.12.31 - [UIUX] - UIUX의 강력한 툴, 피그마 컴포넌트로 만들 수 있는 것 (4)

UIUX의 강력한 툴, 피그마 컴포넌트로 만들 수 있는 것 (4)

2022.11.23 - [UIUX] - [UIUX] 피그마(Figma) 사용법, Design패널 단축키 안내, 영문 피그마 (2)

[UIUX] 피그마(Figma) 사용법, Design패널 단축키 안내, 영문 피그마 (2)