본문 바로가기

모카 스터디/UX&UI 디자인[Figma]

Constraint +Auto Layout

Constraint

Constraint :  오브젝트에 제한을 둬서 여러 상황에 유연하게 대처하게 한다.

 

프레임 위에 오브젝트를 만들면  각 축을 어디에 둘지 설정할 수 있다.

왼쪽(오른쪽)으로 프레임을 늘려도 constrain에서 설정한 축을 기준으로 오브젝트가 위치한다.

 

constrain 사용 예시

 

비율에 맞게 프레임의 사이즈를 조절함에 따라 오브젝트의 크기도 변경

 

 

프로토 타이핑시 유용한 Fixed Position

Auto Layout 

 

해당 오브젝트에 어떤 텍스트가 들어가던지 padding 등 간격을 유지하도록 하려한다.

 

 

 

텍스트와 오브젝트를 클릭 후 auto layout 버튼 클릭

 

각 오브젝트간의 간격또한 auto layout 적용 가능

왼쪽과 달리 오른쪽은 텍스트를 다르게 입력을 해도 오브젝트간의 간격이 일정하게 유지가 된다.