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

오토 레이아웃의 적용 대상은 피그마에서 제작한 UI이다.

이는 바뀌는 화면마다 크기가 바뀔 때

조정할필요가 없도록 자동 조정 옵션을 설정하여

적용된다.

 

 

오토 레이아웃으로는 개체 크기, 정렬 및 방향, 절대위치를 설정할 수 있다.

예를 들어 ios에서 pc로 넘어가며 아이콘의 베리에이션이 필요할 때

화면 사이즈에 맞게 그 비율에 따라서 

오토 레이아웃에서 개체 크기 등을 조절할 수 있다는 것이다.

 

 

바로 확인해보면

오토 레이아웃을 사용했을 땐 여백값도 동일하게 유지하며

사이즈를 변경할 수 있다.

위쪽 파란색 아이콘은 크기를 옆으로 늘리면 그에맞게 거리나 크기가 증가하고

아래처럼 오토레이아웃을 사용하지 않으면 텍스트사이즈는 움직이지않고

뒤에 직사각형만 움직이게 된다.

 

 

오토 레이아웃이 적용된 표시 아이콘은

Profile 왼쪽처럼 줄 세 개 이다.

박스를 더블클릭해서 아래로 복붙하면

객체간 간격과 비율을 똑같이 유지하면서 생긴다.

 

 

둥근박스 안에 적혀있는 글자 수를 늘려도 오토 레이아웃을 설정했다면

그에맞게 박스크기가 늘어나고 옆에 있는 닉네임도

사이간격을 유지하면서 그대로 밀리는 것을

확인할 수 있다.

 

텍스트 타입 오토 레이아웃을 만드는 법이다.오른쪽 마우스클릭하고 중간 아래즈음에 있는Add auto Layout을 눌러주면 적용된다.자동으로 만들 수 있다는 것이다.

 

 

오토 레이아웃은 이름에서느껴졌듯이

디자인이 자동화 되어 좀더 편리하게 효율적으로

만들 수 있을 것 같다.

잘 알아두었다가 셀프고생은 이제 더이상 그만해야지!

 

: https://mcode.co.kr/

메타코드M

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