피그마 Constraints

제약 조건(constraints)을 적용하여 레이어 크기 조정 방법 정의

제약 조건은 프레임 크기를 조정할 때 개체가 어떻게 반응해야 하는지 Figma에 알려준다. 이를 통해 다양한 화면 크기와 장치에서 디자인이 어떻게 보이는지 제어할 수 있다.

아래 비디오를 확인하거나 계속해서 더 자세히 알아볼 수 있다.

수평(horizontal) 및 수직(vertical) 제약

x(수평) 및 y(수직) 축 모두를 따라 제약 조건을 적용할 수 있다.

수평(horizontal) 제약

수평 제약 조건은 x축을 따라 프레임 크기를 조정할 때 개체가 동작하는 방식을 정의한다.

• 왼쪽(Left)은 프레임의 왼쪽을 기준으로 개체의 위치를 ​​유지한다.
• 오른쪽(Right)은 프레임의 오른쪽을 기준으로 개체의 위치를 ​​유지한다.
• 왼쪽과 오른쪽(Left and right)은 프레임의 양쪽을 기준으로 개체의 크기와 위치를 유지하며, 이로 인해 크기가 조정될 때 개체가 x축을 따라 커지거나 줄어들 수 있다.
• 센터(Center)는  프레임의 수평 가운데를 기준으로 한 객체의 위치를 유지한다.
• 배율(Scale)은 개체의 크기와 위치를 프레임 치수의 백분율로 정의한다. 그런 다음 크기를 조정할 때 해당 비율을 유지한다. 
  

수직(vertical) 제약

수직 제약 조건은 y축을 따라 프레임 크기를 조정할 때 개체가 동작하는 방식을 정의한다.

• 상단(Top)은 프레임 상단을 기준으로 개체의 위치를 ​​유지한다.
• 하단(Bottom)  은 프레임 하단을 기준으로 개체의 위치를 ​​유지한다.
• 위쪽 및 아래쪽(Top and bottom)  은 프레임의 위쪽 및 아래쪽을 기준으로 개체의 크기와 위치를 유지한다. 이로 인해 크기가 조정될 때 객체가 y축을 따라 커지거나 줄어들 수 있다.
• 센터(Center)는  프레임의 수직 중심을 기준으로 한 객체의 위치를 유지한다.
• 배율(Scale)  은 개체의 크기와 위치를 프레임 치수의 백분율로 정의한다. 그런 다음 크기를 조정할 때 해당 비율을 유지한다.

개체에 제약 조건 적용

Frame 내의 모든 객체에 제약 조건(Constraints)을 적용할 수 있다. 

• 다른 프레임 내에 중첩된 프레임에 제약 조건을 적용할 수도 있다.
• 객체에 수평 및 수직 구속조건을 모두 적용할 수 있다.
• 제약 조건을 사용하여 스크롤링 프로토타입에서 객체가 응답하는 방식을 정의할 수 있다. Figma의 프로토타이핑에 대해 자세히 알아보자.
• 그룹(Group)에는 제약 조건을 적용할 수 없다. 그룹은 그 안에 포함된 객체로부터 경계를 상속한다. 경계가 있는 단일 개체로 간주되지 않는다. 

항목에 대한 제약을 설정하려면 다음을 수행한다.

1. 프레임 내에서 개체 또는 부모를 선택한다. 캔버스의 파란색 점선은 현재 적용된 제약 조건을 보여준다.
2. 속성 패널의 제약 조건 설정에서 수직 및 수평 제약 조건을 조정한다.
   • 드롭다운 메뉴를 사용하여 개체의 제약 조건을 설정한다.
   • 또는 대화형 다이어그램의 선을 클릭하여 제약 조건을 선택한다.
3. 스크롤할 때에도 개체가 동일한 위치에 유지되도록 하려면 스크롤할 때 위치 고정(Fix position when scrolling) 옆에 있는 확인란을 선택한다.

제약 조건 무시

적용되는 제약 조건을 사용하지 않고 프레임이나 레이어의 크기를 조정하려는 경우가 있다. 수정자 키를 누르고 있으면 레이어에 적용된 제약 조건을 일시적으로 무시할 수 있다.

• MacOS: ⌘ Command  크기 조정 시 길게 누르기
• Windows: Ctrl  크기를 조정할 때 길게 누르기

출처 : Figma Constraints