[피그마] 콘스트레인트

✔ 콘스트레인트

: 오브젝트의 위치값을 상하좌우로 고정하는 기능

 

 

 

특이사항

• 프레임은 부모, 오브젝트는 자식 요소이며 부모가 움직을때 자식이 영향을 받음
• 바깥쪽의 선을 클릭하면 각각 Top, Right, Bottom, Left 방향에 고정
• 피그마에서는 기본값으로  Left, Top에 고정
• Fix position when scrolling을 체크하면 스크롤해도 오브젝트가 같은 위치에 고정

예시 1 

 

 

예시 2

 

적용 방법

 

1. 부모 영역은 무조건 fixed로 설정

2. 내용 부분만 오토레이아웃 설정 -> fill로 설정

 

3. 내용 프레임 하나하나 fill container로 설정

4. 콘스트레이트 양쪽 고정 (left and right / center)

 

 

예시 3

 

 

1. 콘스트레이트를 scale로 변경

 

2. 프레임 선택 후 상단 scale 설정

 

 

예시 4

 

 

 

1. header 내 양끝 간격 맞춘 inner 프레임 제작 (양쪽 간격 32)

2. 왼쪽 메뉴 텍스트 작성 후 오토레이아웃 (home -> 오토레이아웃)

3. 콤퍼넌트 처리 후 assst에서 끌어와 내용 변경

4. 왼쪽 및 중앙 정렬

5. 플러그인 활용해 로고 가져온 후 사이즈 조절

6. 우측 검색창 및 버튼 프레임으로 제작 후 오토레이아웃

7. inner 프레임 전체 선택 후 오토레이아웃