[피그마] config 2023 - 오토레이아웃, 반응형 디자인에 더 유용해졌다!

1. 오토레이아웃 (auto layout) - min/max값 설정하기

버튼을 예로 들면, 오토레이아웃으로 버튼을 만든 후 프레임을 선택한다. 그리고 width값 add min width/ add max width/add min height/ add max height 값을 적용하면 끝이다. 적용된 결과를 확인하면 아무리 너비 혹은 길이를 늘리거나 줄여도, 설정한 범위를 넘어서면 적용이 되지 않는다. 카드 컴포넌트를 제작할 때 특히 유용할 듯 하다. 

이렇게

2. 오토레이아웃 (auto layout) - wrap 설정하기

동그라미를 예로 들면, 원 4개를 그린 후, auto layout wrapping direction을 설정한다. 그리고 오토레이아웃을 늘리거나 줄이면 저절로 수직/수평 정렬이 된다.

wrap과 다른 directon과의 차이점

3. Text truncation

텍스트가 길 때 말줄임표 기능이다. 설정방법은 텍스트에 autolayout을 설정하고, 텍스트의 resizing을 fill로 설정한다. 그리고 텍스트를 클릭한 후, text settings에서 truncate text를 설정한다. 

 

 

 

오토레이아웃은 기본적으로 반응형 디자인을 할 때 유용한 기능이다. 모바일, 데스크톱 디자인을 하면서 하나하나씩 말줄임표를 타이핑하고, 오토레이아웃을 수평/수직 각각 두번 설정했는데(Wrap기능을 주기 위해), 이번 업데이트로 인해 작업시간이 빨라질 듯하다. 더 자세한 내용은 아래 피그마 공식 파일에서 내용을 확인할 수 있습니다. 

 

https://www.figma.com/community/file/1234936397107899445