[피그마 기초 4강] Constraint 기능 알아보기(PPT와 다른 피그마의 파워풀한 기능)

Constraints는 제약이라는 단어로 피그마에서 알면 유용한 기능 중 하나라고 생각하시면 되겠습니다. constraint 기능은 프레임 위에서 <오브젝트의 축을 어디에 둘 것인가>에 대한 기능입니다. 여기 보면서 하는 게 더 쉽겠죠?

그림을 보면서 설명하겠습니다.

Contsraints 기능 우측 패널 이용하기

오브젝트를 클릭하고 우측 패널을 확인하면 Constraints라고 있습니다. 그리고 초기 값이 설정되어 있죠. 이번엔 이 기능에 대해서 살펴보는 시간을 가져보겠습니다.

하나씩 사용하는 방법에 대해서 살펴 보겠습니다!

우측 패널을 해당과 같이 고정하고 컨트롤을 클릭하고 해당 프레임을 누르고 프레임을 늘리게 되면 다음과 같이 왼쪽 상단과 위쪽에 오브젝트가 고정되고 프레임만 증가하는 것을 보실 수 있습니다.

이와 같이

센터의 경우도 마찬가지로 해당 오브젝트는 그대로 고정되어 있는 상태에서 프레임의 크기만 변경되면서 중앙정렬을 유지해 주는 기능이라고 생각하시면 되겠습니다.

그렇다면 이 기능이 과연 어떻게 쓰이게 될까요? 해당 기능이 쓰이는 곳에 대해서 살펴보겠습니다.

해당 기능을 넣으면 프레임의 길이를 늘이더라도 하단에 고정이 되는 기능이라고 생각하시면 되겠습니다. 특히나 홈탭기능에서 이 부분을 많이 사용하니깐 알아두시면 좋을 것 같습니다.

해당 기능을 사용하면 프로토타입을 할 때 아래와 같이 스크롤을 내려도 다음과 같은 위치에 놓일 수 있게 고정을 할 수 있습니다. 물론 아래로 스크롤 내릴 때 해당 위치에 고정시키는 기능은 다음 글에서 설명하도록 하겠습니다.

728x90

[피그마 중급 1강] 라디오 버튼(Radio Button) 만들기<피그마의 프로토타입 만들기, PPT와 다른 기능> (0)	2023.06.06
[피그마 기초 5강]오토레이아웃(Autolayout)기능 활용하는 방법 (0)	2023.06.05
[피그마 기초 3강] 그리드 이해하기 (0)	2023.05.31
[피그마 기초 2강, 도형부문]피그마와 PPT 기능 비교, 피그마의 파워풀한 우측 패널 기능 익히기 (0)	2023.05.30
[피그마 기초 1강]피그마로 디자인을 할 때 알아야 할 기본 개념들 (0)	2023.05.29