Adobe XD에서 정렬 및 배포

Adobe XD에서 많은 개체를 만들기 시작한 후에는 해당 개체의 위치와 개체 간의 관계를 고려해야 합니다. 디자인의 노이즈를 줄이기 위해 아이콘과 텍스트를 깔끔하게 정렬하고 배포해야 합니다. 격자를 사용하거나 안내선을 사용하는 등 여러 가지 방법으로 정렬을 확인할 수 있습니다.

그리드 켜기

다음 단계에 따라 나만 볼 수 있는 그리드를 켤 수 있습니다.

레이어 패널에서 대지를 클릭하거나 작업 영역에서 대지 위에 있는 대지 이름을 클릭하여 대지를 선택합니다.

속성 패널의 하단에 있는 그리드 확인란을 선택합니다.

아트보드의 그리드 기능을 켭니다.

그리드에 다른 색상을 선호하는 경우 그리드 확인란 오른쪽에 있는 정사각형을 선택하고 색상 선택기에서 색상을 선택합니다. 투명도 슬라이더를 사용하여 불투명도 수준을 변경할 수도 있습니다.

원하는 경우 확인란 오른쪽에 있는 격자 크기 텍스트 상자에 값을 입력하여 격자 크기를 변경합니다.

가이드에 대해 현명하게 대처하세요

기본적으로 XD는 필요에 따라 켜지는 가이드를 제공합니다. 이를 스마트 가이드라고 하며 다른 Adobe 제품을 사용하는 경우 익숙할 것입니다.

스마트 가이드를 사용하려면 작업할 때 나타나는 선과 음영 영역에 주의하기만 하면 됩니다. 아래 이미지에서 하나의 다이아몬드를 드래그하면 왼쪽의 다이아몬드와 정렬되었음을 나타내는 가이드가 나타납니다.

고급 안내선을 사용하여 개체를 정렬할 수 있습니다.

스마트 가이드는 배포에도 도움이 됩니다.

개체의 분포는 첫 번째 개체와 마지막 개체에 의해 생성된 경계 상자 사이의 공간을 나타냅니다. 여기에서 왼쪽에는 여러 개의 다이아몬드가 고르지 않게 분포되어 있고 오른쪽에는 동일한 개체가 고르게 분포되어 있는 것을 볼 수 있습니다. 이 예에서는 간격이 수평으로 고르게 분포되어 있습니다.

왼쪽은 고르지 않은 분포, 승차면은 고르게 분포되어 있습니다.

개체를 배치할 때 개체 사이의 공간이 같을 때를 나타내는 음영 영역이 나타나는 것을 볼 수 있습니다. 이 음영 힌트는 Alt/Option 드래그하여 개체를 복제할 때도 나타납니다.

스마트 안내선은 개체 사이의 간격이 균일할 때 힌트를 제공합니다.

정렬 및 배포 기능 사용

개체 메뉴와 속성 패널에서 사용할 수 있는 정렬 및 배포 기능을 사용하면 저녁에 항목을 정렬하고 간격을 유지하는 데 도움이 됩니다.

2개의 항목을 선택하면 Alignment 기능을 활용할 수 있습니다. 세 개 이상의 개체를 선택하면 배포 기능도 사용할 수 있습니다.

수평 대 수직을 결정하는 요령을 명심하십시오. 수평선은 수평입니다. 페이지에서 왼쪽에서 오른쪽으로 이동하는 모든 항목은 수평으로 배포되어야 합니다. 위에서 아래로 이동하는 모든 개체는 수직으로 분산되어야 합니다.