Figma(피그마) 기본사용 방법 constraints(컨스트레인트)

피그마의 constraints(컨스트레인트) 기능에 활용해서 컨텐츠 를 만들어 보겠습니다.

우선 constraints(컨스트레인트) 사전적 의미 부터 알아봐야 하는데 우리나라말로 제약,통제

라는 의미를 가지고 있습니다.

Frame(프레임)의 크기에 따라 안에 있는 요소의 위치와 통제 할수 있습니다.

즉 Frame(프레임) 크기가 커지면 안에 있는 요소도 동일하게 커지고 왼쪽에 고정을 할수 있고 

오른쪽 에 고정도 할수 있어요.

이 기능은 사용해보니 꾀나 유용한 기능인거 같습니다.✌️

<Frame(프레임)에 대해 알아보기>

constraints(컨스트레인트)는 요소를 담고 있는 프레임을 기준으로 해야 하기에 적용해야

요소에 Frame Selecting메뉴를 선택해서 Frame(프레임)으로 만들어 주어야 합니다.

--------------------------------------------------------------- 

1. 도형

    - Shape(도형) Tool중 Recyangle(단축키 "R") 선택 해서 Frame(프레임) 과 동일한 박스를 그려주세요.

    - 박스를 선택한 상태에서 마우스 오른쪽을 클릭하고, Frame Selecting메뉴를 선택 해주세요.

선택된 요소와 사이즈가 동일한 Frame(프레임)이 만들어 집니다.

2. Constraints(컨스트레인트) 옵션

- 박스를 선택 후, 오른쪽에 있는 Design 패널에서 Constraints(컨스트레인트) 에서 옵션을 선택할수 있습니다.

  몇가지 옵션들 이 존재 하며, 옵션 값에 따라 요소가 결과가 어떻게 되는지 확인해보겠습니다.

-  하나의 프레임에 요소들을 여백 기준으로 어떻게 고정을 시킬것인지 설정을 합니다.  

<가로 고정>

요소를 선택하고 Design 패널에서 Constraints(컨스트레인트) 옵션을 Left(왼쪽)으로 지정하면

회색의 프레임이 가로길이 가 길어져도 요소는 Left(왼쪽)에 고정이 되어 있습니다.

요소를 Right(오른쪽) 으로 지정하게 되면 아래 이미지와 같이 Right(오른쪽)로 고정됩니다.

요소를 Center(중앙)으로 지정하게 되면 프레임이 기준 가운데 고정 되있습니다.

<세로 고정>

가로와 같이 세로 또한 고정을 할 수가 있습니다.

요소를 TOP(위) 로 지정하게 되면 아래 이미지와 같이 회색의 프레임이 세로 길이가 길어져도 요소는

위에 고정되어 있는 모습을 볼수 있습니다.

요소를 Bottom(아래) 로 지정하게 되면 요소는 프레임의 여백 기준으로 아래 위치 하게 됩니다.

요소를 Center(중앙)으로 지정하게 되면 프레임이 기준 상하의 가운데 고정 되있습니다.

<가로 세로 고정>

요소를 가로와 세로를 고정도 할수 있습니다. Constraints(컨스트레인트) 옵션에서

Left(왼쪽) & Right(오른쪽) 을 설정을 하게 되면 회색 프레임을 넓이를 넓였을 때 프레임의 여백을 기준으로

가운데 요소만 늘어 나는것을 확인 할수 있습니다.

<위 아래 고정>

가로 세로를 고정하듯이 Constraints(컨스트레인트) 옵션에서 TOP(위) & Bottom(아래) 으로 설정 하였을 시

회색 프레임을 밑으로 늘리게 되면 요소 부분만 변화가 생깁니다.

<가로 Scale>

Constraints(컨스트레인트) 옵션중 Scale은 제목 그대로 비율 그대로 요소가 늘어 난다고 보시면 됩니다.

각각의 요소에 세로를 Scale를 적용 하였을 시 500px Fram(프레임)에서 8:2 비율로 요소를 만들었습니다.

Fram(프레임) 가로 size를 250px로 줄였을 시 비율대로 요소가 줄어 드는것을 확인 할수 있습니다.

<전체 Scale>

가로 세로를 모두 Scale(스케일)로 적용 모든 요소에다 다 적용을 해보게 되면

Frame(프레임)을 늘리면 비율 그대로 늘어 났다 줄었다 할수 있습니다.

 

Constraints(컨스트레인트) 옵션은 정말 유용한 기능인거 같습니다.

기존에 하나한 컨트롤 해야 하는 반면에 Figma(피그마)에서는 좀더 효율적으로 활용이 되다 보니

정말 편한거 같습니다. 

또한, 활용할곳이 많다보니 써보면서 익혀야 할듯 합니다.