[Figma] Hug/Fixed/Fill/Add auto layout 정의

피그마 사용시 제일 유용하게 많이 사용하는  Hug, Fixed, Fill, Add auto layout에 대해 알아보자

 

 

 

 

 

 

aoto layout이라 함은 글자수에 상관없이 배치가 일정하게 되게끔 묶어주는 역활을 한다

 

 

 

 

 

 

해당 글자수가 '뒤로가기' '앞으로가기' 등을 이용해도 그영역 그대로 배치될수 있게끔

아이콘과 그 배열에 있는 버튼들을  단축키 Shift+a를 통해 오토레이아웃을 걸어주면 된다.

오토레이아웃이 잘못걸렸을경우 오른쪽마우스를 눌러 리무버 오토레이아웃으로 취소할 수 도 있다.

 

 

 

 

 

 

 

 

이렇게 세개의 버튼에 aoto layout 을 성정한 후 Hug를 걸어주면

 

 

 

 

 

 

 

이렇게 글자수에 맞춰 레이아웃이 일정하게 지정된다.

 

 

 

 

 

 

글자가 끊어지지않고 우측으로 계속 써갈수 있게끔 해주는 옵션은

<> Fill로 설정을 해주면 딘다. 

그리고 뒤로가기 버튼경우는 한줄로 되어있기때문에 열은 Fixed로 맞춰준다.

 

 

 

 

 

 

 

 

메뉴를 설정할시에도 이와같이 적용이 가능하다.

 

 

 

반응형

 

 

 

 

한줄이 아닌 2줄 3줄 이상으로 고정이 되길 원한다면 >< Hug 로 감싸주는 형태로 설정을 해주면

칸 역시 글자수에 맞게 늘어난다.

 

 

 

 

 

 

글자를 한줄로 제한을 둔다면 Fixed를 설정하면 된다.

 

 

 

 

 

 

 

우리가 많이 사용하는 메세지창에서도

글자수에따라 말풍선이 줄어들게도 늘어나게 설정하는 방법은 무엇일까

 

 

 

 

 

1. 글자를 먼저 쓴후 aoto layout을 적용시켜 Fill을 위와같은 회색으로 바꾸고 모서리를 둥글게 설정해준다.

2. 말풍선 꼬랑지를 가져와서 두개의 아이콘만 aoto layout을 걸어준다.

 

 

 

3. 열과 행을 모두 <>hug로  설정해주면 글자수에 따라 말풍선이 바뀌는것을 확인 할 수있다.