6. 정렬, 분배, Tidy up, Smart Selection

정렬

위 사각형들을 직접 정렬한다고 생각하면 굉장히 골치가 아파오는 것을 느낄 수 있습니다. 클릭 한두번으로 끝날 일도 아니고 굉장히 마우스를 세밀하게 컨트롤해야 할 테니까요.

 

우측 Design 패널 가장 위에 있는 정렬 기능은 굉장히 간편하게 이러한 작업을 수행할 수 있도록 해줍니다.

정렬을 위해서는 우선 정렬할 대상들을 드래그해서 잡은 후에,

적절한 정렬 방법을 선택하면 바로 정렬됩니다.(이 경우 Align Top을 선택했습니다.)

이 때 Top이나 Bottom, Center의 기준은 저 파란색 사각형이 됩니다.

분배

위아래 정렬 외에 간격을 한꺼번에 맞출 수도 있는데 맨 오른쪽 More Options에서 Distribute horizontal spacing을 선택하면 됩니다.

 

수직 간격 맞추기 : Alt + Shift + V

수평 간격 맞추기 : Alt + Shift + H

Smart Selection

위의 상황에서 만약 두 사각형의 위치를 바꾸고 싶다면 그 또한 꽤 힘든 과정이 되리라 예측할 수 있습니다. Figma의 Smart Selection 기능은 이 과정을 드래그 한  만으로 실행할 수 있게 해줍니다.

분홍색 점을 클릭하고 드래그해서 서로 위치를 바꾸면 됩니다.

Tidy Up

Tidy Up은 수직, 수평으로 일괄적으로 간격을 정리되기 힘든 상황에서 격자 모양으로 오브젝트들을 정리해 줍니다. 이 부분은 눈으로 보는 것이 이해하기 가장 편합니다.

위와 같은 난장판을 4x4 행렬과 같이 깔끔하게 정리하고 싶을 때 Tidy Up 기능이 사용됩니다.

참고로 저기서 수직, 수평으로 분배를 실행하면 아래와 같이 됩니다.

한층 더 엉망이 되었습니다.

오른쪽 패널에서 Tidy up을 선택하면 깔끔하게 격자 모양으로 정렬됩니다.(간격와 정렬이 한번에)