본문 바로가기
UX 디자인/피그마

피그마(Figma) 오토 레이아웃 스페이싱 모드(spacing mode) 단축키로 빠르게 변경하기 (packed vs space between)

반응형

피그마 오토 레이아웃(auto layout)의 핵심 기능 중 하나는 자식 요소들의 배치 방법을 packed(고정 여백으로 나열) 또는 space between(여백을 자동으로 나열) 등 유동적으로 변경할 수 있다는 점이며, 이 기능은 스페이싱 모드(spacing mode)라는 이름을 갖고 있습니다. 

 

CSS의 flex 레이아웃 모델을 참고한 이 기능은 여러 엘리먼트를 배치하는 과정을 자동화시켜 주기에 매우 큰 생산성 향상 효과를 선사해 줍니다. 다만 마우스만을 통해 제어하기에는 더보기 레이어팝업을 확인한 후 적용해야 한다는 점에서 다소 사용성이 떨어지는 측면이 있습니다. 피그마는 약간의 작업속도라도 단축시키기를 원하는 사용자들을 만족시키기 위해 스페이싱 모드에 대한 단축키 또한 지원을 합니다.

 

오토 레이아웃 엘리먼트를 선택한 후 디자인 패널의 오토 레이아웃 섹션을 확인합니다. 이 중 스페이싱 모드를 정의할 수 있는 9개의 점으로 이루어진 사각형 모양의 제어 요소를 클릭하면 해당 요소에 경계선에 색이 입혀지면서 포커스가 활성화된 것을 볼 수 있습니다. 이 사각형 모양의 제어 요소에 포커싱이 활성화된 상태에서 키보드 'x' 키를 누르면 스페이싱 모드가 'packed'에서 'space between'으로 토글링되는 것을 확인할 수 있습니다. 이제 더보기 버튼을 눌러 'Advanced Layout' 레이어팝업을 통해서가 아닌 간단한 단축키 제어를 통해서 스페이싱 모드 변경이 가능합니다.

 

키보드 'x'를 누르면 빠르게 스페이싱 모드를 변경할 수 있음

 

참고자료

 

Quick switch between Spacing Modes

It would be really awesome if by double-clicking on this element Figma would quick switch between Packed and Space between spacing modes! This would save even 4 additional clicks EVERY time: Click “…” icon to see Advanced layout options. Click on a d

forum.figma.com

 

반응형