Figma Auto layout 완전정복

#Figma #Auto layout

Figma 핵심 기능 중 하나라고 할 수 있는 Auto layout 기능이 대폭 업데이트되었습니다!

이 중요한 기능을 놓치고 갈 순 없겠죠?

하나하나 변경된 내용들을 정리해봤습니다.

*** 영상으로도 이 내용을 확인할 수 있어요. 영상에는 더 많은 팁이... ㅋㅋㅋ

어디로갔나 그 버튼....

Figma 업데이트는 항상 .... 거침이 없습니다.

기능이 업데이트되면서 기존에 있던 기능 버튼의 위치가 완.전.히 재편되었으니 이 부분은 꼭 체크가 필요합니다.

* 참고로 Figma에서 특정 기능이 업데이트 될 때마다 인터페이스가 살짝 살짝 변하는 경우는 빈번하니 주의하시길 바래요 :)

기존 Auto layout 패널에서 제공되던 resizing 기능은 상단의 frame 패널로 위치가 변경되었습니다.

그리고 상세한 설정이 가능한 Advanced layout settings 버튼이 새롭게 추가되었네요.

Paddigng 설정 기능은 기존에도 있었지만 Auto layout 패널 밖으로 나오면서 각 영역에 대한 패딩을 설정할 수 있는 Independant paddings 옵션도 추가되었습니다.

Text baseline alignment

어드밴스드 레이아웃 세팅 옵션이 생기면서 여기에 Text baseline alignment 옵션이 추가되었습니다.

이 옵션은 말 그대로 Auto layout 안에 텍스트가 포함되어 있을 경우, 텍스트 하단 라인을 기준으로 정렬을 설정하는 기능입니다.  아이콘 + 텍스트 조합의 레이아웃을 잡아야 하는 경우 아주 유용하게 사용될 것 같습니다.

Nagative spacing

이 옵션, 기다려 오신 분들 많이 있으실거에요.

모바일 디자인에서 아주 많이 사용되는 레이아웃 중 하나인데 이제 Figma에서는 한번에 적용할 수 있게 되었습니다.  

설정 방법도 아주 간단합니다.

Spacing between item 옵션에서 설정값을 마이너스(-)로 입력해주시면 됩니다.

그럼 위의 이미지에 보이는 것처럼 Auto layout 안에 속해있는 아이템이 겹치면서 정렬이 실행됩니다.

어드밴스드 세팅 버튼을 클릭하면 Canvas stacking 설정을 변경할 수도 있습니다.

속해있는 아이템을 겹치는 기준값을 오름차순으로 할 것인지 혹은 그 반대로 할 것인지에 대한 설정도 가능합니다.

Absolute position

이 기능 역시도 레이아웃 설정 시 꼭 필요한 부분 중 하나였지요.

기존에는 오토 레이아웃이 적용된 프레임안에서 특정 아이템만 절대 위치를 잡을 수 없었기 때문에 다중적으로 프레임을 만들어 레이아웃을 적용했어야 했는데 이번에는 한 방에 이걸 적용할 수 있게 되었어요.

이 기능은 오른쪽 Frame 패널에서 선택할 수 있습니다.

절대 위치값을 사용해야할 아이템을 선택한 상태에서 위의 보이는 Absolute position 버튼을 클릭해주기만 하면 끝~!!  이 옵션이 적용된 아이템은 Auto layout  프레임 내부에 들어가도 기 적용된 설정값에 구애받지 않고 절대적인 위치를 지정할 수 있습니다.

---

오랜만에 컴백(?)하면서 Figma 업데이트와 Config2022로 인해 저는 요즘 약간 흥분 상태입니다. ㅋㅋㅋ

그동안 피그마를 사용하면서 아~ 이런거 생기면 너무 좋겠다. 싶었던 기능들이 한번에 좌라락 업데이트가 되다보니 흥분하지 않을 수가 없네요.  

그래서 새로운 업데이트에 대해서 학습하면서 빠르고 바쁘게(?) 컨텐츠를 만들어보았습니다.

Figma 유저들께 조금이라도 도움이 되길.....

PS 저의 모든 컨텐츠는 유튜브를 통해서도 확인할 수 있으니 한번 놀러와주세요~!

https://www.youtube.com/channel/UCjlBl1E7MK0uGfakPuyYSug

기획자의 피그마 figma

#figma #config2022 #피그마 #figma튜토리얼 #웹기획 #웹디자인