피그마 오토 레이아웃(auto layout)의 핵심 기능 중 하나는 자식 요소들의 배치 방법을 packed(고정 여백으로 나열) 또는 space between(여백을 자동으로 나열) 등 유동적으로 변경할 수 있다는 점이며, 이 기능은 스페이싱 모드(spacing mode)라는 이름을 갖고 있습니다.
CSS의 flex 레이아웃 모델을 참고한 이 기능은 여러 엘리먼트를 배치하는 과정을 자동화시켜 주기에 매우 큰 생산성 향상 효과를 선사해 줍니다. 다만 마우스만을 통해 제어하기에는 더보기 레이어팝업을 확인한 후 적용해야 한다는 점에서 다소 사용성이 떨어지는 측면이 있습니다. 피그마는 약간의 작업속도라도 단축시키기를 원하는 사용자들을 만족시키기 위해 스페이싱 모드에 대한 단축키 또한 지원을 합니다.
오토 레이아웃 엘리먼트를 선택한 후 디자인 패널의 오토 레이아웃 섹션을 확인합니다. 이 중 스페이싱 모드를 정의할 수 있는 9개의 점으로 이루어진 사각형 모양의 제어 요소를 클릭하면 해당 요소에 경계선에 색이 입혀지면서 포커스가 활성화된 것을 볼 수 있습니다. 이 사각형 모양의 제어 요소에 포커싱이 활성화된 상태에서 키보드 'x' 키를 누르면 스페이싱 모드가 'packed'에서 'space between'으로 토글링되는 것을 확인할 수 있습니다. 이제 더보기 버튼을 눌러 'Advanced Layout' 레이어팝업을 통해서가 아닌 간단한 단축키 제어를 통해서 스페이싱 모드 변경이 가능합니다.
참고자료
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
'UX 디자인 > 피그마' 카테고리의 다른 글
| [피그마] 여러개 선택된 레이어 한번에 컴포넌트 생성하기 (Multiple Components) (0) | 2023.11.20 |
|---|---|
| 포토샵 파일 피그마(Figma)로 변환하기 (PSD to Figma) (0) | 2023.07.09 |
| 피그마(Figma)에서 트랙패드 줌(핀치줌, Pinch zoom)이 안 되는 문제 (1) | 2022.04.24 |
| 피그마(Figma)에서 글씨 기울기, 이탤릭체(italic) 설정하는 법 (0) | 2022.03.02 |
| 피그마(Figma)의 이미지 사이즈(해상도) 삽입/첨부 크기 제한 (0) | 2022.03.01 |
