목록 항목

목록 항목을 사용하면 텍스트, 아이콘, 이미지와 함께 목록 구성 요소에 반복되는 정보 조각과 스위치, 체크박스 등의 구성 요소를 표시하여 사용자가 가능한 작업을 수행할 수 있습니다. 목록 항목은 Ignite UI for Angular의 구성 요소와 시각적으로 동일합니다.

List Item Demo

Type

Sketch 및 Figma에서 목록 항목은 세 가지 사전 설정 유형으로 제공됩니다. 그룹 제목을 정의하기 위한 헤더, 기본 텍스트가 한 줄만 있는 짧은 항목을 위한 한 줄, 기본 및 보조 텍스트를 지원하는 더 큰 항목을 위한 두 줄. 단 두 개의 사전 설정을 사용하는 Adobe XD에서는 동일한 결과와 훨씬 더 많은 결과를 얻을 수 있으므로 헤더와 항목 유형만 있습니다.

Note

목록 항목이 3 ~ 4 줄로 구성된 경우 올바른 정렬을 보장하려면 아바타와 액션을 수동으로 조정하여 상단에 정렬해야 합니다. 이 정렬은 예상되는 동작으로 간주됩니다. 현재 이는 Figma Indigo.Design System에서 가능하며 이러한 조정은 쉽게 액세스하고 실행 가능합니다.

이러한 상단 정렬을 달성하려면 State 및 Thumbnail 프레임을 왼쪽 상단으로 설정해야 합니다. 보조 작업이 텍스트 컨테이너와 작업 아이콘으로 구성되어야 하는 드문 경우에는 Secondary Actions 프레임도 오른쪽 상단으로 설정해야 합니다.

State

항목은 다음과 같은 대화형 상태를 지원합니다. 일반 상태에서는 비활성 이고 선택한 상태에서는 활성입니다. Figma에서 상태는 오른쪽 사이드바의 State 속성에서 찾을 수 있습니다. Sketch 에서는 Symbol Overrides 통해 이를 달성하는 반면, Adobe XD에서는 Component States 패러다임을 사용하여 상태 간을 쉽게 전환할 수 있습니다. 헤더 목록 항목은 선택할 수 없으므로 해당 상태를 지원하지 않습니다.

Area

Figma 및 Sketch에서 목록 항목에는 아바타 및 텍스트와 같은 비대화형 콘텐츠가 포함된 기본 작업과 목록 항목과 관련된 빠른 작업이 포함된 보조 작업이라는 두 가지 별개의 영역이 있습니다. 기본 작업과 보조 작업을 조합하면 목록의 모든 항목에서 일관되게 사용해야 하는 고유한 목록 항목 템플릿이 생성됩니다.

Adobe XD에서 목록 항목에는 아바타, 진행률 표시줄 및 텍스트와 같은 비대화형 콘텐츠가 배치되는 그룹과 항목 오른쪽에 실행 가능한 아이콘이 포함된 작업 구성 요소가 있습니다. 두 영역 모두 Libraries 패널에서 임의의 구성 요소를 드래그하여 템플릿이나 항목 자체의 구성 요소를 삭제하지 않고도 필요한 레이아웃을 만들 수 있습니다.

Primary Action in Figma and Sketch

Figma의 Type 속성에는 5개의 교환 가능한 목록 항목 기본 작업이 있으며 Sketch의 Symbol Overrides로 4개를 사용할 수 있습니다. Sketch의 스마트 레이아웃 덕분에 불필요한 요소를 ~No Symbol로 설정하여 목록 항목을 추가로 조정할 수 있습니다.


아바타 + 라벨 + 설명
체크박스 + 라벨		목록 항목 내부의 확인란은 자체 레이블을 가질 수 없으므로 이전 및 이후 레이블은 Sketch에서 ~No Symbol로 설정되고 레이블 레이어는 Adobe XD에 없습니다. 이 설정은 변경하면 안 됩니다!
아이콘 + 라벨 + 설명
라벨 + 진행		목록 항목 내부의 선형 진행 표시줄은 값 레이블을 가질 수 없으므로 Sketch에서 ~No Symbol로 설정되고 값 레이블 레이어는 Adobe XD에 없습니다. 이 설정은 변경하면 안 됩니다!
상표

Secondary Action in Figma and Sketch

Figma 및 Sketch 에는 상호 교환 가능한 4개의 목록 항목 보조 작업이 있습니다. Figma 에서는 경우와 필요에 따라 전환하고 켜고 끌 수 있는 Secondary Action 기본 구성 요소 속성에서 사용할 수 있습니다. Figma의 자동 레이아웃은 선택한 속성에 따라 구성요소를 자동으로 조정합니다. Sketch 에서는 보조 작업을 Symbol Overrides로 사용할 수 있으며 스마트 레이아웃 덕분에 불필요한 요소를 ~ 기호 없음으로 설정하여 추가로 조정할 수 있습니다.


배지
체크박스		목록 항목 내부의 확인란은 레이블을 가질 수 없으므로 Figma 에서는 이전과 이후 레이블이 숨겨지고 Sketch에서 ~No Symbol로 설정되며 레이블 레이어는 Adobe XD에 존재하지 않습니다. 이 설정은 변경하면 안 됩니다!
텍스트와 아이콘		텍스트와 아이콘은 독립적으로 사용할 수 있습니다. Figma 에서는 텍스트 컨테이너를 켜거나 끄고 아이콘 중 하나 또는 둘 다를 숨길 수 있습니다. Sketch 에서는 ~No Symbol로 설정하면 아이콘이 숨겨집니다.
토글 스위치		목록 항목 내부의 스위치에는 레이블이 있을 수 없으므로 Figma 에서는 이전과 이후 레이블이 숨겨지고 Sketch 에서는 ~ 기호 없음으로 설정되며 레이블 레이어는 Adobe XD에 없습니다. 이 설정은 변경하면 안 됩니다!

Thumbnail in Adobe XD

Adobe XD의 왼쪽 목록 항목 영역에 있는 썸네일 구성 요소는 Component States 패러다임을 통해 쉽게 전환할 수 있도록 상호 교환 가능한 3가지 옵션을 제공합니다. 이를 통해 Sketch의 각 기본 작업에 대해 일치하는 디자인을 만들 수 있습니다.

Actions in Adobe XD

Adobe XD의 올바른 목록 항목 영역을 구성하는 작업 구성 요소는 Component States 패러다임을 통해 쉽게 전환할 수 있도록 4개의 상호 교환 가능한 옵션을 제공합니다. 이를 통해 Sketch의 각 보조 작업에 대해 일치하는 디자인을 만드는 것이 가능합니다.

스타일링

목록 항목에는 아이콘, 텍스트, 그리고 아바타, 배지, 확인란, 아이콘, 진행률, 스위치 등과 같은 구성 요소와 같이 각각 고유한 스타일 지정 기능이 있는 다양한 요소에 사용할 수 있는 옵션을 통해 스타일 유연성이 제공됩니다.