Figma Auto Layout

Figma의 파워풀한 핵심기능 중 하나인 Auto Layout 기능

라는 말로는, 처음에는 얼마나 대단하겠어 라는 생각을 했던 기능이다.

근데 공부를 할 수록 이건 피그마에서 진짜 핵심이겠다 라는 생각을 했습니다.

코딩으로 하던 배치를 드래그로 할 수 있는 수준급의 기능이라고 하면 될 것 같습니다.

Text를 생성하고, 생성한 텍스트를 클릭한 뒤에 Shift + A => Auto Layout 단축키

그러면 Frame이 하나 생기게 됩니다. 이것이 Auto layout입니다.

auto layout 탭에서 좌우 상하 여백 재조정 할 수 있으며, radius는 Frame 탭에서 바꿀 수 있다.

Fill탭에서 색도 당연히 바꿀 수 있다.

이 버튼을 세개로 차례로 배치하고자 할 때, 이렇게 한다.

일단 Auto Layout으로 만든 Frame을 다시 한번 클릭한 뒤에 또 한번의 Shift + A를 통해 또 하나의 Auto layout을 겹으로 만든다.

그러고, 처음 만들었던 Frame (내부 프레임) 을 클릭한 뒤에 cmd + d를 눌러 복붙을 시전한다

복붙을 두번 시전하면 위 그림과 같이 되는데, 이것을 세로로 하고 싶었다면, 가장 바깥쪽 프레임을 다시 누른 뒤에

우측 디자인 패널의 Auto layout 탭에서 vertical을 horizontal으로 바꿔주면 아래와 같이 된다.

Auto layout의 장점은, 이 위 그림에서 가장 가운데 텍스트를 임의로 늘려도 전체가 유동적으로 늘어난다는 것이다.

만약 이게 되지 않는다면, 해당 프레임을 클릭한 뒤 디자인 패널에서 프레임이 Fixed로 되어있을 가능성이 크다.

이를 Hug로 바꿔주면 된다.

그리고 이 각각 세개의 프레임들을 클릭한 뒤에 드래그를 통해 순서를 바꿀 수도 있고,

방향키를 통해 순서를 바꿀 수도 있다.

정말.. 코드로 수정하는 것 보다 더 간단하고 즉시 반영되는

드래그 & 드롭 형식의 레이아웃 배치 방법이 Figma에서 가능했고, 그게 Auto layout 기능이었다.

이건 혁신이다! 꼭 활용해야 한다.

참고

관련글