[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ "오토 레이아웃 설정값 살펴보기"

오른쪽 디자인패널에 Auto Layout칸이 생성되었음을

확인할 수 있고 

그 아래 화살표에는 세가지 방향이 있는데

개체가 추가될 때 어느방향으로 추가되는지를 정하는 것이다.

 

 

아래쪽 화살표가 선택되어있는데 그럴때 개체가 추가되면

아래쪽으로 수가 늘어나는 것을 확인할 수 있다.

개체수가 많아져도 동일한 방향으로 균일하게 생성된다.

화살표 아래쪽은 복사된 것들과의 간격을 조절하는 수치이다.

 

 

복사된 것들과의 간격을 조절하는 것 아래에는

좌우와 위아래를 표시하는 수치가 있는데

이를통해 패딩값을 자동으로 조절할 수도 있다.

패딩값을 대칭으로 일정하게 바꿀 수 있는 것이다.

그 바로 오른쪽에 선이 다 따로 떼져있는 네모아이콘이 있는데

이를통해 개별로도 값을 조절할 수도 있다.

 

 

 

오토 레이아웃으로 패딩을 설정해 놓으면 

패딩값을 유지한 채로 사이즈가 변경된다.

위처럼 좌우위아래 값을 다르게 설정해놓아도말이다.

텍스트가 패딩값을 빠져나오면 오른족 길이패널에 콤마로 표시된다.

 

 

그리고 방향설정의 오른쪽을 보면

정렬을 설정할 수 있는 박스를 어렵지 않게 찾을 수 있다.

마우스를 갖다대면 정렬방향이 흐릿하게 안내되기 때문에

필요한 정렬로 쓰면 된다.

정렬에 따라 텍스트의 방향도 결정된다.

 

위치값은 오른쪽 아래에 Constraints 에서 설정가능하다.

누른 위치에 벽이 생긴다는 느낌으로

그 곳을 기준으로 다른방향으로 글이 늘어나게 된다.

즉 위를 클릭하면 아래방향으로 왼쪽을 클릭하면 오른쪽으로 늘어나게 된다는 것이다. 

 

 

오토 레이아웃이라는 단어자체가 생소해서

겁을 먹었으나 

세가지종류로 한눈에 볼 수 있게 나누어주고

그에따라 세부내용을 알아보며 정리하니

어렵지 않게 정리할 수 있었다. 

메타코드 믿고 공부 쭉쭉 가보자구~

 

: https://mcode.co.kr/

메타코드M

본 내용은 메타코드 Figma 서포터즈 강의 후원을 받아 작성되었습니다.