Sketch Design System 구축 : 팁과 트릭

Sketch Design System 만드는 것이 처음에는 너무 어렵고 시간이 많이 걸리는 것처럼 들릴 수 있지만 나중에는 실제로 보상을 받을 수 있습니다. 일관된 솔루션을 달성하고 DesignOps를 개선하려는 경우 필수적입니다.

따라서 Sketch에서 디자인 시스템을 구축하는 과정을 안내하는 몇 가지 유용한 팁과 요령을 준비했습니다.

Design System 이란 무엇입니까?

디자인 시스템은 일반적으로 사용자 인터페이스를 구축하는 방식의 일관성을 유지하는 일련의 디자인 원칙 및 자산으로 설명됩니다. 디자인 시스템 사용의 세 가지 핵심 이점은 다음과 같습니다.

• 특정 사용 컨텍스트와 앱 도메인을 조정합니다.
• UX 디자인 패턴 및 브랜드 스타일 지침의 목록으로 작동합니다.
• 설계 프로세스 속도를 높이고 일관성을 크게 향상시킵니다.

우리는 이미 3부작 블로그 시리즈의 파일럿 기사 인 "훌륭한 Design System을 구축하기 위한 6단계" 에서 디자인 시스템에 대한 모든 것을 다루었습니다. 따라서 Sketch에서 디자인 시스템 구축을 계속하기 전에 주제를 심층적으로 살펴보기 위해 살펴볼 수 있습니다.

Sketch 이란 무엇입니까?

간소화된 디지털 디자인을 위해 가장 일반적으로 사용되는 올인원 벡터 그래픽 플랫폼 중 하나입니다. Sketch를 통해 디지털 제품 제작자는 빠르고 쉬운 방법으로 아이디어를 시각화, 프레젠테이션 및 현대적인 모바일 디자인 레이아웃과 기본 프로토타입으로 변환할 수 있습니다.

​디지털 제품 디자인 플랫폼은 디자이너에게 지속적으로 업그레이드되는 UI 라이브러리, 유연한 구성 요소 및 기호 세트를 제공합니다. 이러한 방식으로 디지털 크리에이터는 개념, 디자인 버전, 사용자 흐름을 실험하고 최신 UI 및 UX 트렌드를 제작에 통합할 수 있는 힘과 도구를 갖게 됩니다.

Sketch의 장점은 무엇입니까?

• 다양한 디자인 버전을 쉽게 빌드하고 사용해 볼 수 있습니다.
• 직관적으로 느껴지며 기본 프로토타이핑 또는 사용자 스토리를 표시하는 데 이상적입니다.
• 지속적으로 업데이트되는 라이브러리, 기호 및 구성 요소의 배열을 제공합니다.
• 링크 자동 레이아웃, 매직 미러 및 Git 스케치와 같은 유용한 플러그인이 포함되어 있습니다.
• 디자이너가 모든 종류의 벡터 그래픽 표현을 할 수 있는 직관적인 인터페이스를 제공합니다.
• ​WYSIWYG 드래그 앤 드롭 App Builder와 같은 다른 도구와 쉽게 통합하여 개발 시간과 설계 구현을 줄이고 부서 간 팀 협업을 개선할 수 있습니다.

스케치의 단점은 무엇입니까?

• 협업과 커뮤니케이션을 위한 공간이 너무 적습니다.
• 수행된 설계의 변경 사항을 비교할 수 없습니다.
• Lacks basic image editing options.
• No free version.

Sketch Design System 이란 무엇입니까?

Sketch의 디자인 시스템은 기본적으로 단일 정보 소스의 역할을 하며, 다음 프로젝트를 시작하는 데 필요한 모든 리소스를 결합하는 동시에 Sketch 디자인 전반에 걸쳐 일관성을 유지합니다. 이러한 시스템을 갖추면 디자이너로서의 작업이 진정으로 쉬워지고 일관되고 강력한 색상 팔레트, 타이포그래피 스타일 등을 도입하므로 브랜딩, 일반적인 디자인 요구 사항 및 표준을 준수할 때 불일치를 줄이는 데 더욱 도움이 됩니다.

Sketch에서 Design System 구축하는 방법?

본론으로 바로 들어가 Sketch 디자인 시스템을 구축하고 색상 변수를 사용하여 색상의 기초를 만드는 방법을 살펴보겠습니다. 그래서 여기에 팁과 요령이 있습니다.

색상 팔레트

파란색을 기본 색상으로 사용하고 녹색을 악센트로 사용하는 경우 단일 색상 이상이 필요할 가능성이 큽니다. 파란색 단추는 호버 상태가 필요할 가능성이 높으며, 일반적으로 약간 더 어둡고 비활성화된 상태이므로 색이 바랜 것처럼 보일 수 있습니다. 그러나 이 두 가지가 파생되는 기본 색상이 하나 있으며 색상 변수로 존재해야 합니다. 팔레트에 대해 이야기할 때 다음 팁에서 두 가지에 대해 논의할 것입니다.

계속하려면 회색과 앱 및 구성 요소(예: 목록 및 카드)의 기본 배경색에 대해 유사한 접근 방식을 사용하는 것이 좋습니다. Indigo.Design 년에 우리는 그 색을 "표면"이라고 명명했습니다. 색상 변수로 존재하므로 전체 앱을 밝은 테마에서 어두운 테마로 쉽게 전환할 수 있습니다. 물론 좋은 대비를 보장하기 위해 그에 따라 회색 색상을 업데이트해야 하기 때문에 표면을 변경하는 것만으로는 충분하지 않습니다.

그러나 대부분의 경우 팔레트를 형성하기 때문에 기본 및 강조 색상과 함께 다음 팁에서 조금 더 자세히 살펴봐야 합니다.

색상 스타일을 사용하여 기본, 강조 및 회색 색상의 파생물을 만들어 팔레트를 형성하십시오. Indigo.Design 대한 우리의 접근 방식은 변수의 색조에 매핑되는 500개의 변형을 가지고 그 아래의 기본 색상을 어둡게 하고 채도를 높이는 채우기를 추가하여 최대 900개의 더 어두운 변형을 만드는 것이었습니다. 50까지 내려가는 더 밝은 변형의 경우 기본 색상에 추가된 채도를 낮추고 밝은 채우기 레이어를 반대로 수행합니다.

여기에서 각 음영에 대해 원하는 결과를 얻을 때까지 이러한 채우기의 속성을 실험 할 수 있습니다. 그러나 궁극적인 목표는 단일 색상 팔레트가 아닌 완전한 색상 팔레트를 갖는 것임을 명심하십시오. 가장 좋은 점은 색상 변수를 업데이트해야 할 때 모든 색상 스타일이 업데이트되어 다른 팔레트를 매우 쉽고 빠르게 제공한다는 것입니다. 또는 다른 말로 표현하면 기본 색상에 대해 한 번 수행 한 다음 복제하고 강조 색상을 기본으로 사용하도록 전환하여 두 번째 팔레트를 갖도록합니다.

이제 이전 팁에서 회색은 그 자체로 섹션이 필요하기 때문에 생략했습니다. 우리가 회색의 음영에 대해 이야기할 때 두 가지 상충되는 접근 방식이 있으며(말장난 의도) 일반적으로 우호적인 토론에서 고통스러운 논쟁으로 발전합니다. 한 그룹의 디자이너는 회색 색상이 다른 모든 팔레트와 마찬가지로 중간에 베이스가 있고 더 어두운 톤과 더 밝은 톤의 파생 상품이 있어야 한다는 인식을 옹호합니다. 반대 그룹은 팔레트의 한쪽 끝에 베이스를 놓고 불투명도를 가지고 재생하는 나머지 음영을 추출합니다. 대상 응용 프로그램이 하나의 모드인 경우 어둡거나 밝음은 실제로 중요하지 않습니다. 즉, 두 접근 방식 모두 대부분의 경우 잘 작동합니다.

그러나 두 환경 모두에 대한 Sketch 디자인 시스템을 설계하는 경우 불투명도 접근 방식을 사용하는 것이 좋습니다. 즉, 검은색 또는 검은색에 가까운 회색 색상 변수를 사용하고 모든 변형에 다른 불투명도를 적용해야 합니다. 예를 들어 900은 87%, 800은 74%를 사용할 수 있으며 50은 2%만 사용할 수 있습니다. 이 기능을 사용하면 밝은 테마에서 어두운 테마로 전환하는 것은 위에서 보여준 것처럼 표면 및 회색 색상 변수를 변경하는 것만큼 쉽습니다.

Sketch 디자인 시스템에서는 하나 또는 두 개 또는 세 개의 색상 스타일 그룹을 만드는 것도 고려할 수 있습니다. 채우기 외에도 윤곽선/테두리, 채우기와 윤곽선/테두리의 조합을 추가할 수 있습니다. 물론, 실제로 그러한 접근 방식을 필요로하는 구성 요소가 나타날 때까지이 결정을 연기 할 것입니다. 그렇지 않으면 불필요한 오버 헤드가 될 것입니다. 그리고 마지막으로, 저의 작은 색상 비밀 – 채우기와 테두리에 불투명도가 0 % 인 하나의 투명 색상을 만듭니다. 이렇게 하면 요소를 보기에서 제거할 수 있지만 동시에 자동 레이아웃을 방해하고 싶지 않은 경우 요소를 제자리에 유지할 수 있습니다.

타이포그래피

Sketch에서 "텍스트 스타일"이라는 이름으로 사용되는 타이포그래피로 이동하면 위에서 논의한 색상 스타일과 유사함을 알 수 있습니다. 이제 여기에서 우리가 관심을 가져야 할 주요 속성은 제목, 부제목 및 본문 텍스트를 고유하게 설명하는 글꼴 크기와 두께입니다. 또한 텍스트 변환이 있는 버튼에 대해 Indigo.Design 있는 것과 같은 내부 스타일이 있을 수 있으며, 기본 Material에서 영감을 받은 테마에서 모두 대문자로 만들 수 있습니다. 또는 아바타와 하이퍼링크에 고유한 크기와 마감 처리가 있습니다.

여기서 경험 법칙은 텍스트를 의미 있는 블록으로 구성할 수 있는 Sketch 디자인 시스템의 일부로 타이포그래피를 포함하고, 이와 같은 기사를 작성할 때 디자인 시스템 사용자가 염두에 두고 있는 모든 것을 달성할 수 있도록 구성 요소에 사용할 수 있는 충분한 옵션을 확보하는 것입니다. 아래 이미지의 왼쪽 패널에는 Sketch 용 UI 키트와 함께 번들로 제공되는 고급 텍스트 스타일 배열 Indigo.Design 있습니다.

구성 요소를 빌드할 때 텍스트가 항상 왼쪽에서 오른쪽으로 흐르는 것은 아니라는 것을 알 수 있습니다. 숫자 배지는 값이 항상 가운데에 정렬되어야 하는 특별한 요구 사항이 있을 수 있으며, 텍스트 접미사는 접두사가 반대 방향으로 가는 것과 달리 오른쪽에서 왼쪽으로 흐를 수 있습니다. 이러한 모든 시나리오를 용이하게 하려면 상위 수준 텍스트 스타일을 왼쪽, 가운데 및 오른쪽 정렬이 있는 그룹으로 분할하는 것이 편리합니다.

색상은 유사한 경로를 따르며 사용자 정의의 다음 및 마지막 계층이 되어야 합니다., 단순히 Sketch 디자인 시스템 사용자는 텍스트 정렬을 변경하는 것보다 아바타의 이니셜 텍스트에 대해 다른 색상을 원할 가능성이 훨씬 더 높기 때문입니다. 이제 아바타 타이포그래피는 구성 요소에만 적용되기 때문에 특별한 경우입니다. 따라서 제약 조건이라는 하나의 스마트 디자인 원칙을 사용하고 싶을 것입니다. 나는 Don Norman의 책 "The design of everyday things"에서 처음 읽었습니다.아바타에 대한 제약 조건은 타이포그래피가 중앙 정렬로만 제공되어 Sketch 디자인 시스템 사용자가 비자발적 오류를 범하는 것을 방지한다는 것입니다.

타이포그래피에 대한 것을 마무리하기 위해 텍스트 스타일은 색상 변수를 사용할 수 있으며 이를 정의하는 방법이라는 점을 언급해야 합니다. 어쨌든 내일 새로운 아트 디렉터가 와서 브랜드 색상을 변경한다면 Sketch 디자인 시스템을 업데이트하는 데 일주일을 보내고 싶지 않을 것입니다. 색상 변수와 이를 사용하는 텍스트 및 색상 스타일을 활용하면 이 모든 노력이 몇 번의 클릭만으로 줄어듭니다.

구성요소

마지막 팁은 구성 요소와 관련이 있습니다. 입찰가를 더 넓히기 위해 Sketch에서 부르는 기호라는 용어를 사용하겠습니다. 기호는 텍스트 및 색상과 같은 스타일이 아닌 모든 것이 될 수 있습니다. 그러나 여전히 꽤 자주 사용되며 독립형이고 일관성 있고 정의, 즉 Sketch 속어의 심볼 마스터와 연결되도록 하는 메커니즘이 필요합니다.

아이콘 세트, 그림자 또는 일러스트레이션 모음과 같은 단순한 것에서 시작하여 항목이 있는 목록과 여러 유형의 셀이 있는 그리드에 이르기까지 더 복잡한 구조의 예로 볼 수 있습니다. 그러나 왜 이것들이 구성 요소로 제공되어야 하는지 궁금할 수 있습니다. 글쎄, Sketch에서 아이콘 버튼 구성 요소를 만들 때 광범위하게 정의할 가능성이 높습니다. 그러나 특정 컨텍스트에서 사용할 때 기본 아이콘을 다른 아이콘으로 변경해야 합니다. 빈 상태 그림도 마찬가지이며 일부 대화 형 상태에도 적용 할 수 있습니다. 예를 들어, 카드가 집중되어 있을 때 그 그림자가 커지면서 카드가 튀어나오고 컬렉션의 나머지 부분 위로 떠오르는 것처럼 보입니다.

그런 다음 Sketch 디자인 시스템에서 아이콘 컬렉션에 공급할 아이콘 구성 요소를 만드는 것이 좋습니다. 머티리얼 아이콘, 멋진 폰트 또는 사용자 정의 컬렉션과 같은 타사 세트를 사용하든 기본 크기를 선택하기만 하면 됩니다. 디자인-코드 시스템 Indigo.Design의 경우 24 x 24 크기이며 아이콘 글리프가 있는 심볼을 만듭니다. 모든 아이콘의 심볼 크기가 같으면 사용자가 "원래 크기로 스왑" 확인란을 선택할 수 있습니다. 구성 요소에서 심볼 재정의로 사용하는 반면, 적용 가능한 심볼, 즉 선택할 수 있는 다른 모든 아이콘만 제공합니다.

또 다른 중요한 것은 명명인데, Indigo.Design의 예를 살펴보았으면 합니다. 이상한 특수 기호 "一"로 시작하는 "一/Overrides/Material Icons/action/settings"라는 설정 아이콘이 있습니다. 유일한 목적은 Sketch 삽입 메뉴의 맨 아래로 밀어 글리프를 직접 삽입하기 어렵게 만드는 것입니다.

Indigo.Design 에는 아이콘 글리프 자체를 렌더링하기 위한 아이콘 구성 요소가 있습니다. 따라서 글리프 컬렉션을 한 곳에 보관하여 직접 삽입하기 어렵게 만듭니다. 다음 부분은 "Overrides"이며 라인 아래로 내려오는 것이 심볼 재정의로만 사용되어야 함을 지정하는 데 사용됩니다. 그런 다음 아이콘 세트 이름 인 "Material Icons"가 있습니다. 기호 이름의 마지막 두 부분은 선택적 범주 이름과 아이콘 이름 자체를 정의합니다. 범주는 Material from Google 및 Material Extended by Infragistics와 같은 더 큰 아이콘 제품군에서 일부 조직을 만드는 데 유용합니다.

그림자와 일러스트레이션에도 동일한 전략을 적용할 수 있으며, 일러스트레이션의 경우 항상 같은 크기일 필요는 없다는 점만 있습니다. 구성 요소를 설계할 때 한 가지 더 중요한 것은 반응형으로 크기가 조정되는지 확인하는 것입니다. 즉, 36 x 36 영역에서 설정 아이콘을 사용하려면 기본 크기에서 적절하게 크기를 조정해야 합니다.

이제 더 깊이 파고들어 구성 요소를 설계하는 방법에 대해 이야기할 준비가 되었습니다. 버튼을 구성 요소의 간단하고 일반적인 예로 정의하는 것을 살펴보겠습니다. 버튼을 구별하는 첫 번째 것은 사용 상황입니다. CTA를 위한 한 가지 유형의 버튼, 다른 중요한 작업을 위한 다른 유형, 보조 작업을 위한 하나 이상의 버튼, 그리고 목록 위에 떠 있고 다른 목록 항목을 추가하는 것과 같은 상황에 맞는 작업을 수행하는 것이 필요할 수도 있습니다. 이것은 예를 들어 포함되고, 윤곽선이 있고, 평평하고, 떠 다니는 버튼이 필요하게 만듭니다. 이제 아이콘만 있는 매우 간단한 버튼을 원한다면 다섯 번째 변형이 있을 수도 있습니다.

이 버튼의 일반적인 점은 앞서 이야기한 색상 및 텍스트 스타일이 역할을 하는 몇 가지 스타일 속성이 있다는 것입니다. 그러나 특정 조건이 충족되기 전에 호버링, 포커스 또는 버튼 비활성화와 같은 일부 상호 작용 상태를 고려하고 싶을 수도 있습니다. 버튼 내부에 사용되는 요소가 콘텐츠를 제공하는 경우 아래와 같은 스마트 레이아웃을 사용하여 이전 아이콘, 레이블 및 이후 아이콘과 같은 부분을 표시하거나 숨길 수 있는 유용한 방법을 생각해 보십시오.

버튼의 상호 작용 상태를 설계하는 방법으로 이동하기 전에 스마트 레이아웃을 설정할 때 매우 주의해야 할 두 가지 사항이 있습니다. 먼저 버튼 레이블의 텍스트는 너비를 자동으로 설정하도록 구성해야 합니다. 둘째, 레이아웃의 개별 요소가 픽셀의 일부도 겹치지 않고 원래 크기에 있는지 확인해야 합니다.

이를 통해 스마트 레이아웃이 매우 잘 작동하여 아무 것도 변경할 필요가 없습니다. 그것들은 우리가 버튼을 보는 방식에 의해 정의되어야 하며 둘로 나누는 것이 좋습니다. 먼저 버튼이 화면에 나타나면 활성화되거나 비활성화될 수 있다는 사실입니다. 따라서 Indigo.Design 에서는 윤곽선 버튼을 삽입하든 플랫 버튼을 삽입하든 상관없이 이를 노출합니다. 두 번째는 단추가 쉬고 있는지 또는 키보드로 포커스가 되거나 마우스로 마우스를 가져갈 때 여부에 관계없이 사용자 상호 작용에 의해 트리거되는 상태입니다.

이러한 상태는 최종 사용자 관점에서 볼 때 진정한 상호 작용 상태이기 때문에 대신 별도의 심볼로 정의하여 Sketch 디자인 시스템의 디자이너가 심볼 재정의 패널에서 전환할 수 있도록 했습니다.

더 복잡한 또 다른 Sketch design system atom인 input을 살펴보겠습니다. Indigo.Design의 기본 테마에 있는 입력 유형(선, 상자 및 테두리) 외에도 몇 가지 더 구별되는 특성이 있습니다. 예를 들어, 힌트가 있는지 없는지 여부와 같이 삽입 메뉴에도 표시되었습니다. 이것은 값뿐만 아니라 레이블과 힌트를 푸시하는 접두사가 있기 때문에 필요했습니다.

그렇지 않은 경우 힌트에 스마트 레이아웃을 사용하고 하나의 돌로 두 마리의 새를 죽일 수 있습니다. 그러나 피할 수 없는 것은 유효성 검사 상태입니다. 완료되었거나 진행 중인 어느 정도의 사용자 상호 작용을 정의하는 유휴, 채워짐 및 집중 상태 외에도 양식 유효성 검사의 다양한 시나리오를 지원하기 위해 성공, 경고 및 오류 상태도 있습니다.

마지막으로 버튼 그룹과 카드를 살펴보겠습니다. 여러 면에서 더 복잡한 구성 요소와 패턴을 구축하는 데 사용되는 원리를 보여줍니다. 단추 그룹은 각각 7개의 단추로 구성된 수평 및 수직 컬렉션을 나타내는 두 개의 삽입 가능한 기호로 제공됩니다.

버튼 그룹에는 버튼뿐만 아니라 전체 그룹의 테두리, 배경 및 그림자 스타일링에 영향을 미치는 매우 중요한 수평 또는 수직 스마트 레이아웃이 있다는 사실 외에 특별한 것은 없습니다. 디자인 시스템 사용자가 하나 이상의 버튼을 숨기고 심볼 재정의를 심볼 없음으로 설정하면 나머지 모든 항목이 흐릅니다. 진정한 구성 요소에서 기대할 수 있듯이.

카드는 매우 다르게 보일 수 있지만 기본적으로 수직 버튼 그룹의 아키텍처를 따릅니다. 유일한 차이점은 반복되는 요소의 모음이 아니라는 것입니다. 대신, 재정의로 구성할 수 있는 다양한 변형이 있는 별도의 구성 요소로 구현되는 자체 특수 섹션이 있습니다.

미디어 부분은 이미지 또는 양식화된 맵을 렌더링할 수 있습니다. 헤더는 스마트 레이아웃을 사용하여 요소를 제거하고 나머지는 조정할 수 있도록 합니다. 작업은 다양한 콘텐츠 및 정렬에 대한 재정의와 함께 제공됩니다. 본질적으로 그것은 예를 들어 주어진 시나리오에 불필요한 단락 내용과 같은 특정 영역의 수직 스택입니다. 그것을 숨기면 다른 모든 것이 적응하고 카드의 크기가 변경됩니다.

결론적으로 Sketch 에는 타의 추종을 불허하는 힘이 하나 있습니다. 그리고 이것은 색상, 타이포그래피 및 몇 가지 기본 구성 요소의 강력한 기반을 구축한 다음 필요한 만큼 더 복잡한 레이아웃 조직에 중첩할 수 있는 가능성입니다. 이렇게 하면 기호 재정의 패널에서 몇 번의 클릭만으로 모든 모드와 구성을 사용할 수 있는 동안 원하는 결과를 얻을 수 있습니다.

구성 요소가 더 복잡하면 마스터를 선택하고 해당 재정의를 관리하고, 제약 조건을 한 번 더 현명하게 사용하고, Sketch 설계 시스템 사용자가 특정 시나리오를 사용할 수 없게 만들 수도 있습니다.