반응형 디자인을 Figma로 구현할 때 가장 기초되는 개념인 Constraints을 알아보자!

컨스트레인츠

---

 

엘리먼트를 점선을 통해서 벽에 결속시키는 것.

핀이 꽂혀있다고 상상.

중앙쪽 과녁 꽂기

세로는 Top 에 고정

가로 부분은 화면의 센터를 유지.

센터 -  센터 지정

스크린 움직여보면

이런식으로 스크린이

항상 화면 중앙에 오는거 확인 가능.

이렇게 설정했을경우

사각형이 

컨스트레인을 유지하기 위해

자신의 형태를 변형

다 고정을 했을 경우

---

부모와 자식관계로 설정이 돼있어야 컨스트레인으로 설정할 수 있음.

 

자식이 되는 엘리먼트를 선택해야

우측에 컨스트레인 이라는 인터페이스가 뜸

오토레이아웃을 하는 순간 뒤바뀌게 됨.

프레임을 선택한 다음

오토레이아웃을 추가하게 돼주면

오토레이아웃이 진행됨.

자식인 사각형을 선택해보면

컨스트레인 옵션창이 사라져있음 .

 

사실상

이 부분이 컨스트레인 역할을 해 준다고 보면 됨.

 

오토레이아웃을 진행하려면

자식이 아닌 부모를 클릭해야지

오토레이아웃 인터페이스를 조정할 수 있다.