Adobe XD에서 Design System 개발하는 방법

이 글은 Design System 아키텍처에 대한 3부작 시리즈 중 마지막 글입니다. 첫 번째 질문에서는 디자인 시스템에 대한 모든 것, 디자인 시스템이 제공하는 이점, 간단한 6단계로 구축하는 방법, 그리고 그 과정에서 Indigo.Design 실제로 어떻게 도움이 되는지 설명했습니다. 두 번째 블로그 게시물에서는 Sketch에서 Design System 구축하는 방법과 여기에 포함해야 하는 주요 측면에 대해 설명했습니다. 세 번째 섹션에서는 Adobe XD에서 Design System 개발하여 디자인 프로젝트 전반에 걸쳐 일관성을 보장하고, 결과물을 더 빠르게 만들고, 쉽게 재사용할 수 있는 최신 에셋 및 구성 요소를 유지 관리하는 방법을 중점적으로 설명합니다.

Adobe XD란 무엇입니까?

Adobe XD는 프로토타입, 상호 작용 디자인 및 뛰어난 UX를 만드는 데 사용되는 가장 인기 있는 벡터 그래픽 디자인 도구 중 하나입니다. 이를 통해 와이어프레임과 앱을 설계하고, 팀 간에 협업하고, 애니메이션을 구성하고, 피드백을 수집하고, 3D 및 재사용 가능한 디자인을 구축할 수도 있습니다.

Adobe XD의 장점은 무엇입니까?

• 인터랙티브 프로토타입 및 와이어프레임
• Reusable design elements
• 풍부한 레이아웃 기능
• 소프트웨어는 무료입니다.
• 핸드오프를 공유하고 피드백을 수집하는 기능

Adobe XD의 단점은 무엇입니까?

• 프로토타입 또는 와이어프레임을 공식 디자인으로 전송할 수 없습니다.
• 코드를 생성하지 않습니다.
• Few plugins 
• 무료 버전의 많은 제한 사항 및 제한 사항

Adobe XD Design System 란 무엇입니까?

Adobe XD 파일을 사용할 때 현재 및 향후 프로젝트의 UX 및 UI 디자인 일관성을 보장하려면 Design System 하는 것이 가장 좋습니다. Adobe XD Design System는 모든 디자인 패턴과 디자인 모범 사례를 수집하여 아이디어 구상에서 디자인으로 빠르게 전환할 수 있는 단일 정보 소스의 역할을 합니다.

Adobe XD에서 Design System 만드는 방법은 무엇입니까?

잠시 맥도날드를 디자이너의 관점에서 세계에서 가장 가치 있는 브랜드 중 하나로 생각해봅시다. 로고는 몇 년 전 더 건강한 라이프스타일을 전달하기 위해 변경되었지만, 브랜드는 잘 알려져 있고 쉽게 알아볼 수 있는 빨간색과 노란색을 유지하고 있습니다. 그러나 디지털 제품 디자인에는 단색 색조 이상의 것이 필요합니다. 그리고 Adobe XD에서 Design System 구축할 때 조만간 두 개, 세 개 또는 더 많은 색상에 대해 동일한 기본 색조의 음영이 있는 팔레트가 필요하다는 것을 알게 될 것입니다.

Color palettes

Adobe XD에서 색상에 대한 견고한 아키텍처를 구현하려면 먼저 사각형을 그리고, 생생한 빨간색 또는 기본으로 사용할 다른 색상으로 채우고, 이를 기반으로 구성 요소를 만듭니다. 다음으로, 필요한 만큼 인스턴스를 만듭니다. Indigo.Design에서 각 색상에는 10가지 변형이 있습니다 – 기본 1과 9에서 파생된 것입니다. 이제 이러한 인스턴스 중 일부를 더 어두운 변형의 경우 마스터의 왼쪽으로, 더 밝은 색조의 경우 오른쪽으로 분산합니다. 왼쪽의 각 심볼에 대해 기본 색상 레이어 위에 동일한 크기의 사각형 두 개를 쌓습니다. 그것에 더 가까운 레이어는 채도에 사용되고 다른 레이어는 반투명 검은 색 채우기로 어둡게하는 데 사용됩니다. 이 두 사각형의 속성을 조정하여 기본 색상의 더 어둡고 어두운 톤을 얻을 수 있습니다.

오른쪽의 인스턴스의 경우 유사한 패턴을 따라 각각 위에 사각형을 추가합니다. 유일한 차이점은 대신 반투명한 흰색 채우기로 채도를 낮추고 밝게 해야 한다는 것입니다. 모든 설정이 완료되면 각 변형을 그룹화하고 그에 따라 이름을 지정할 수 있습니다(예: 어두운 변형의 경우 기본 900에서 600까지, 밝은 변형의 경우 400에서 50까지, Indigo.Design 에서와 같이 기본 색상 색조에 대해 500을 예약합니다. 노란색과 녹색 색조에 대해서도 동일한 작업을 수행하여 McDonalds 브랜드의 2차 및 3차 색조도 만들 수 있습니다.

색상과 관련하여 두 번째 중요한 단계는 자산 패널로 이동하여 재사용 가능한 "색상"으로 추가하는 것입니다. Adobe XD는 색상 에셋에 대해 간단한 hex 값을 사용해야 하므로 사각형을 그리고 스포이드 도구를 사용하여 색상 배열을 하나씩 선택한 다음 패널 상단의 "색상" 제목 오른쪽에 있는 더하기 아이콘이 있는 색상 에셋에 추가하면 됩니다. 이것은 지루한 일일 수 있지만 장기적으로는 성과를 거둘 것입니다.

일관되고 잘 구성된 Adobe XD Design System 위해 색상 자산을 공통 기반으로 그룹화하고 그에 따라 이러한 자산 패널 그룹의 이름을 지정하는 것이 좋습니다. 이것은 당신의 디자인 시스템이 우리와 같이 거의 50 가지 색상을 포함하도록 확장되는 경우 필수가됩니다.

회색 색상은 다른 색상과 매우 다르며 디자이너 커뮤니티에는 두 가지 상반된 의견이 있습니다. 어떤 사람들은 회색 색상이 중간에 기본 음영이 있고 더 어둡고 밝은 톤의 파생 색상이 있는 다른 색상 배열과 마찬가지로 취급해야 한다고 주장합니다. 다른 사람들은 팔레트의 한쪽 끝에 베이스를 놓고 불투명도를 가지고 나머지 음영을 얻습니다. 두 접근 방식 모두 단일 주제에 대해 생각하면 작동합니다. 그러나 Adobe XD에서 Design System 밝은 테마와 어두운 테마 변형을 모두 지원한다는 것은 첫 번째 접근 방식보다는 두 번째 접근 방식을 고려해야 함을 의미합니다.

실제로 900-50개의 변형에 대해 10개의 사각형을 만들고 모두 검은색으로 채우고 일정한 간격으로 불투명도를 줄이기 시작해야 합니다. 900 변형은 87%의 값을 갖고, 800은 74%를 사용하는 식으로 50까지 2%에 불과합니다. 표면에 대한 추가 특수 색상(예: 앱 배경과 카드 및 목록과 같은 일부 구성 요소의 배경)을 사용하면 이러한 추가 색상을 자산으로 추가할 준비가 모두 완료되었습니다. 이번에는 간단한 hex 값을 나타내기 때문에 우리가 그린 사각형에서 직접 수행할 수 있습니다.

이 작업이 준비되고 특수 검증 사용 사례 및 데이터 시각화를 위해 더 많은 색상을 추가할 수 있는 옵션이 있으면 모든 준비가 완료되었습니다. Adobe XD의 장점은 대상 레이어를 선택하고 에셋 패널에서 색상을 마우스 오른쪽 버튼으로 클릭하여 색상을 채우기 또는 테두리로 적용할 수 있다는 것입니다. 즉, 현재 가지고 있는 30+ 색상에 대한 채우기 및 테두리 자산 변형을 만들 필요가 없으며 시간과 반복을 절약할 수 있습니다. 색상에 관해서 마무리하기 위해 작은 색상 비밀을 공유하고 싶습니다 - 불투명도가 0 % 인 하나의 투명 색상 자산을 만들어 그래픽 요소가 구성 요소에서 시각적으로 사라지도록 할 수 있지만 레이아웃을 유지하려는 경우 위치와 공간을 유지할 수 있습니다.

타이포그래피

브랜드의 다음 기둥은 타이포그래피입니다. 맥도날드의 "M"을 생각해 보면 색상이 무엇이든 여전히 브랜드를 알아볼 수 있습니다. 타이포그래피는 확장 가능한 디자인 시스템의 주요 기둥 중 하나이기도 합니다. Adobe XD에서는 궁극적으로 색상과 유사한 접근 방식에 따라 에셋 패널에 표시됩니다. 그러나 Adobe XD Design System의 타이포그래피를 설계한다는 것은 구성 요소가 필요로 하는 만큼 문자 스케일을 만들기 위해 글꼴 속성을 선택해야 한다는 것을 의미하며, 디자인 시스템 사용자는 블로그 기사에서 복잡한 UI에 이르기까지 제품과 관련된 모든 것을 디자인할 수 있습니다.

이 문제에 대해 집중해야 하는 두 가지 주요 글꼴 속성이 있습니다. 분명히 글꼴 크기는 텍스트 얼룩에 구조를 부여하는 것이지만 때로는 글꼴 크기가 클수록 더 얇게 표시되기를 원합니다. 다른 경우에는 텍스트가 더 두꺼워야 더 눈에 띄 게 보이고 문장의 나머지 부분에서 눈에 띄 게 보입니다. 이러한 속성을 조합하면 제목, 부제목 및 본문 텍스트 집합을 만들어 몇 가지만 지정할 수 있습니다. 일부 구성 요소별 문자 스타일도 추가하고 싶지만 주의해서 해야 합니다. 예를 들어, 머티리얼처럼 텍스트 변환이 있는 버튼 타이포그래피를 모두 대문자로 만들거나, 아바타의 이니셜을 위해 고유한 크기와 처리를 하는 것이 합리적이지만, 이러한 것들을 너무 많이 도입하면 디자인 시스템의 전반적인 일관성이 떨어질 수 있습니다.

캐릭터 스타일이 폭발적으로 증가하거나 디자인 시스템 사용자가 이를 악용하여 우리가 마련한 디자인 지침을 어기는 것을 쉽게 만들고 싶지 않기 때문에 유형 스케일을 추가하는 것의 영향을 신중하게 고려해야 합니다. Adobe XD의 Indigo.Design 팀이 좋아하는 한 가지는 프로그램을 통해 색상과 문자 스타일을 결합할 수 있다는 것입니다. 이것은 우리가 정의한 타이포그래피에 대해 색상 기반 변형을 만들 필요가 없어 더 많은 시간과 반복을 절약할 수 있음을 의미합니다.

Adobe XD의 또 다른 이점은 텍스트 정렬이 문자 스타일의 일부가 아니며 각 텍스트 조각의 사용 사례에 따라 선택할 수 있다는 사실입니다. 아래 이미지는 사용 편의성과 유연성을 희생하지 않으면서 제공되는 Adobe XD용 Indigo.Design에 정의된 문자 스타일의 단순성을 보여줍니다.

Adobe XD에서 확장 가능하고 경직된 디자인 시스템을 설계하기 위한 팁의 후반부는 XD의 컨텍스트에서 사용하고 재사용할 수 있는 UI 요소 및 원자 요소 측면에서 구성 요소와 관련이 있습니다.

구성 요소는 모든 것이 단일 정의인 구성 요소 마스터에 연결되어 있기 때문에 형제와 일치하는 독립적인 요소로 무언가를 사용하는 메커니즘입니다. 아이콘과 같은 작고 기본적인 것부터 시작하여 아이콘 세트 또는 그림자 또는 일러스트레이션 모음을 조립하기 시작하고 더 복잡한 구조의 예로 목록을 만들기 위해 항목을 반복하는 방법까지 이동합니다.

아이콘, 그림자 및 일러스트레이션이 구성 요소로 올 필요가 없다고 주장할 수 있습니다. 그러나 Adobe XD에서 아이콘 버튼 구성 요소를 만들 때는 이를 광범위하게 정의하고자 합니다. 특정 컨텍스트에서 사용할 때 일반적으로 기본 아이콘을 다른 아이콘으로 변경해야 합니다. 비어있는 상태 일러스트레이션과 카드를 선택할 때 그림자가 더 커져 더 가까이 보이도록 하는 카드도 마찬가지입니다.

색상과 캐릭터 스타일이 준비되면 Adobe XD Design System에서 아이콘에 공급할 구성 요소를 만들기 시작합니다. 재질 아이콘, 멋진 글꼴 또는 고유한 사용자 지정 컬렉션과 같은 타사 세트를 사용하든 관계없이 기본 크기를 선택하고 아이콘 글리프가 있는 구성 요소를 만들기만 하면 됩니다. Adobe XD용 Indigo.Design은 아이콘의 기준으로 24px 정사각형을 사용합니다.

아이콘에서 가장 중요한 것 중 하나는 대표 구성 요소의 이름을 지정하는 방법이라는 점을 지적해야 할 순간입니다. 설정 아이콘 구성 요소의 이름이 "_Overrides/Material Icons/action/settings"인 방법을 살펴봄으로써 Idngo.Design 의 예를 들어 보겠습니다. "_Overrides"로 시작하는데, 이는 요소가 구성 요소에 배치된 아이콘 인스턴스를 재정의하는 데만 사용되어야 함을 지정합니다. 그런 다음 아이콘 세트 이름인 "Material Icons"가 있습니다. 이름의 마지막 두 부분은 선택적 범주 이름과 아이콘 이름 자체를 정의합니다.

카테고리는 Material from Google 및 Material Extended by Infragistics와 같은 더 큰 아이콘 제품군에서 일부 구성을 만드는 데 유용합니다. Adobe XD에는 에셋 검색을 위한 강력한 메커니즘이 있으므로 아이콘과 관련된 키워드를 고려하고 이름 끝에 있는 괄호 안에 넣어 Adobe XD에서 Design System 사용자가 보다 유연하게 검색할 수 있도록 할 수도 있습니다.

이제 UI 구성 요소를 설계하는 방법에 대해 자세히 알아볼 준비가 되었습니다. 몇 가지를 살펴보겠지만 간단하고 일반적인 예로 버튼부터 시작하겠습니다.

한 버튼을 다른 버튼과 구별하는 첫 번째 것은 사용 컨텍스트입니다. 한두 번 화면에 눈에 띄는 CTA가 표시됩니다. 그런 다음 몇 가지 중요한 작업이 있고, 때로는 보조 작업도 제시해야 하며, 때로는 부동 컨텍스트 작업이 필요할 수도 있습니다. 예를 들어 목록에 목록 항목을 추가하는 단추가 있습니다.

이것이 Adobe XD의 디자인 시스템 아키텍처에 의미하는 바는 다양한 유형의 구성 요소를 예상해야 한다는 것입니다. 버튼의 경우, 이것들은 포함되고, 윤곽선이 표시되고, 평평하고, 떠 있을 것입니다. 아이콘만 있는 매우 간단한 사용 사례를 원한다면 다섯 번째 변형을 추가할 수 있습니다. 버튼을 정의하는 것은 액션을 트리거한다는 사실 외에도 이러한 각 유형이 배경, 테두리, 그림자, 아이콘 및 레이블과 같은 유사한 내부 구조를 가지고 있다는 것입니다. 그리고 이러한 조각에 대해 우리는 이미 기반을 다진 것을 활용할 것입니다.

• 배경과 테두리는 색상 자산을 사용합니다.
• 그림자와 아이콘은 기본 구성 요소가 됩니다.
• 레이블은 단추에 일반적인 문자 스타일을 사용합니다.

그러나 이것이 버튼의 전부는 아니며 특정 조건이 충족될 때까지 호버링, 포커스 또는 비활성화 상태로 나타나는 것과 같은 상호 작용 상태도 고려해야 합니다. 다행히 Adobe XD는 구성 요소 상태를 지원하며 이러한 상태는 매력처럼 작동합니다. Adobe XD Design System를 사용하는 디자이너는 디자인 타임에 버튼의 비활성화 상태를 선택할 수 있을 뿐만 아니라 활성화된 버튼의 경우 호버가 인터랙티브 상태로 표시됩니다. 즉, 사용자가 디자인을 제시하고 버튼 위로 마우스를 가져가면 호버 상태를 표시하도록 조정됩니다.

버튼은 항상 콘텐츠를 중앙에 표시하고 그 위에 몇 가지 간격 규칙이 있을 수 있으므로 자동 레이아웃 기능을 사용하여 정의해야 합니다. 아이콘과 레이블을 그룹에 넣고 선택한 레이아웃 그리드를 존중하는 여백이 있는 수평 스택으로 만듭니다. 예를 들어 4px 레이아웃 그리드를 사용하는 경우 4px 또는 8px입니다. 항상 버튼 가장자리에서 콘텐츠를 패딩하려는 경우 패딩을 설정할 수도 있습니다. 자동 레이아웃에서 기억해야 할 한 가지는 텍스트가 있는 경우 텍스트 내용에 따라 자동으로 조정되도록 너비를 설정해야 한다는 것입니다.

이제 입력 필드를 살펴보겠습니다. Indigo.Design의 기본 테마에 세 가지 유형의 입력(line, box 및 border)이 있다는 사실을 감안할 때 더 복잡합니다. 입력은 힌트와 함께 제공되거나 힌트 없이 제공될 수 있으며, 이는 자산 패널에도 표시되었습니다. 이를 통해 디자인 시스템 사용자는 총 12개의 삽입 가능한 옵션을 선택할 수 있습니다. 입력 필드에는 접두사 및 접미사와 같은 항목을 나타내는 중첩된 구성 요소가 있을 수 있으며, 이는 채워질 것으로 예상되는 정보를 사용자에게 안내하는 데 사용할 수 있습니다.

구성요소

마지막으로 버튼 그룹과 카드라는 두 가지 구성 요소를 더 살펴보겠습니다. 버튼 그룹에는 수평 및 수직 구성 요소가 있어 7개의 버튼 세트에 대한 매칭 배열을 제공합니다. horizontal 또는 vertical stack을 button components의 instance에 적용하며, 각 구성 요소에는 해당 콘텐츠에 대한 내부 horizontal 스택이 있습니다. 간단히 말해서, 우리는 스택의 스택과 컴포넌트의 컴포넌트를 구축합니다.

아래 이미지에서 스택이 정의되어 있음을 알 수 있습니다.

• 마스킹된 내부 단추 그룹의 경우
• 가장 중요한 마스터 구성 요소

이렇게 하면 사용자가 버튼을 제거 Indigo.Design 경우 버튼 그룹의 배경, 테두리 및 그림자가 그에 따라 조정됩니다.

카드는 상당히 다르게 보일 수 있으며, 이는 카드에 포함된 내용물을 볼 때입니다. 본질적으로 아키텍처는 수직 버튼 그룹과 매우 유사합니다.

카드의 특수 섹션은 서로 다른 변형을 가진 별도의 구성 요소로 구현됩니다. 자산 패널에서 재정의하려는 항목 위에 있는 항목을 드래그할 때 쉽게 재정의할 수 있습니다. 이를 통해 기본 미디어 조각을 이미지에서 양식화된 맵으로 변경하거나 헤더 자동 레이아웃을 사용하여 이러한 변경 사항에 맞게 조정되는 모든 요소와 함께 요소를 삽입 및 제거할 수 있습니다. 대체로 이 카드는 특정 영역의 수직 스택일 뿐이며 가능한 다양한 업데이트에 응답합니다.

지금까지의 모든 것을 요약하자면, Adobe XD를 사용하면 색상과 문자 스타일의 강력한 기반을 구축할 수 있을 뿐만 아니라 이를 함께 혼합하여 스택 및 패딩으로 기본 구성 요소를 설정하여 진정으로 유동적인 레이아웃을 만들 수 있습니다. 그런 다음 이러한 기본 원칙을 계속 사용하여 필요한 만큼 많은 수준에서 더 복잡한 레이아웃 조직을 설계할 수 있습니다.

복잡한 구성 요소를 조합하거나 Adobe XD의 디자인 시스템 사용자가 화면을 훨씬 빠르게 디자인할 수 있도록 패턴을 디자인 할 수 있습니다. 브랜드 색상을 변경하거나 밝은 UI에서 어두운 UI로 이동해야 하는 경우 자산 패널로 이동하여 색상과 캐릭터 스타일을 업데이트하고 짜잔! Adobe XD에서 Design System 사용하여 만든 앱은 그에 따라 테마가 지정됩니다.