스케치 스타일 가이드, 라이브러리 및 UI 키트를 만드는 방법

모든 디자인 프로젝트는 세심한 스타일 가이드의 이점을 누릴 수 있습니다. 이 튜토리얼을 사용하여 UI 키트를 구축하고 동시에 신속한 프로토타이핑을 위한 사용자 지정(및 재사용 가능한) 라이브러리를 만듭니다.

Sketch 전문가이든 Sketch 초보자이든 상관없이 디자이너는 Sketch에서 스타일 가이드를 만드는 것이 많은 시간을 절약할 수 있는 디자인 도구 상자에 대한 귀중한 리소스가 될 수 있다는 것을 알게 될 것입니다.

스타일 가이드는 일관성을 유지하는 데 도움이 될 뿐만 아니라 훨씬 적은 번거로움으로 여러 문서에서 색상 및 아이콘과 같은 요소를 업데이트할 수 있습니다. 이 튜토리얼은 스타일 가이드 및 UI 키트를 생성하는 단계별 프로세스를 안내하며 디자이너가 Sketch 기호에 대해 더 잘 이해하고 디자인에 대해 Sketch 라이브러리를 참조하며 디자인 자산 구성에 대한 확신을 줄 것입니다.

스케치 스타일 가이드 만들기

UXPin에 따르면 "스타일 가이드는 브랜딩 규칙부터 클릭 유도문안 버튼의 경사 정도에 이르기까지 프로젝트의 모든 반복 요소를 추적하는 포괄적인 '살아 있는 문서'입니다." 스타일 가이드에는 단순한 시각적 요소부터 어휘 및 승인된 이미지에 이르기까지 모든 것이 포함될 수 있습니다. 이 튜토리얼은 구성, 색상, 아이콘, 글꼴, 텍스트 스타일 및 자산을 다룹니다.

1단계: 조직

1. 스케치 파일, 플러그인 및 글꼴 및 아이콘과 같은 기타 필요한 자산을 보관할 마스터 폴더를 만듭니다. (플러그인은 튜토리얼의 끝에서 논의될 것입니다.)
2. 새 스케치 파일을 시작하고 이름을 " Clientname Library"로 지정합니다. 예를 들어 클라이언트가 Toptal인 경우 파일 이름은 "Toptal Library"로 지정해야 합니다.

2단계: 색상

색상이 이미 선택되어 있는 경우 다음 단계는 색상을 기호로 변환하는 것입니다.

1. 이렇게하려면 동일한 크기의 사각형을 만들고 그에 따라 색상을 변경하십시오. "심볼 생성"을 클릭하고 color/ @color-name 라벨링 시스템을 사용하여 이러한 요소를 저장합니다. Color/@pink , color/@background-gray 또는 color/@FFFFF 는 적절한 레이블의 예입니다. 명명 규칙은 스타일 가이드를 체계적으로 유지하는 데 중요하므로 처음부터 모든 형식을 설정하고 준수해야 합니다.
2. 완료되면 스타일 가이드 페이지에 추가합니다.
3. 색상 팔레트의 문서 섹션에 색상 견본을 저장합니다.

유용한 단축키: R - 직사각형 도구, T - 텍스트 도구, Alt - 거리 측정.

3단계: 아이콘

아이콘을 동적 기호로 바꾸면 해당 색상을 위의 2단계에서 저장한 색상으로 쉽게 변경할 수 있습니다. 즉, 아이콘을 디자인에 배치한 후 캔버스 오른쪽의 '인스펙터'를 사용하여 '재정의'라는 간단한 드롭다운 메뉴를 통해 색상을 변경할 수 있습니다.

1. 아이콘을 기호로 저장합니다(가능한 경우 자산 유형에 대해 .svg 사용).
2. 심볼 페이지로 이동하여 아이콘을 찾아 이전에 저장한 색상의 기본 색상으로 마스킹합니다. 이렇게 하려면 아이콘 위에 색상 기호를 오버레이하고 도구 모음에서 "마스크"를 클릭합니다(또는 마우스 오른쪽 버튼을 클릭하고 팝업 메뉴에서 "마스크" 선택).
3. 아이콘을 마스킹한 후 Inspector의 "Fills" 섹션 아래에 있는 확인란을 선택 취소하여 채우기를 제거합니다.
4. 스타일 가이드 페이지에서 아이콘을 구성합니다. 같은 섹션에서 활성 및 비활성 아이콘의 색상과 기타 중요한 색상 사양을 지정하는 것이 좋습니다.

4단계: 텍스트 스타일

글꼴이 선택되면 H1, H2, H3, H4, H5, 본문, 링크, 캡션, 레이블 등의 텍스트 스타일을 지정할 차례입니다. 웹 타이포그래피에 대한 좋은 참조는 Typecast의 이 블로그 게시물입니다.

1. 필요한 만큼 많은 스타일에 대해 크기, 두께, 문자 및 줄 간격을 선택합니다.
2. 단어를 작성하고(텍스트 도구인 T를 누를 때 "뭔가 입력"이 자동으로 나타납니다) 선택한 스타일 세부 사항을 반영하도록 서식을 지정합니다.
3. "새 텍스트 스타일 만들기"를 클릭합니다.
4. 스타일 가이드 페이지에서 텍스트 스타일을 구성합니다.

5단계: 자산

이제 재미있는 부분을 위해. 이제 이전 단계를 모두 결합하여 일부 자산을 만들 차례입니다. 자산이 이미 생성된 경우 일관성을 위해 이미 선택한 텍스트 스타일, 아이콘 및 색상을 사용하여 자산을 다시 생성하는 것이 가장 좋습니다. 예를 들어, 작업 중인 디자인 문서에는 디자인이 설명하지 않은 다양한 회색 색상이 있을 수 있으므로 자산을 다시 생성하면 선택한 색상의 일관성이 보장됩니다. 이름을 일관되게 유지하고 자산이 생성될 때 스타일 가이드 페이지에 자산을 추가하는 것을 잊지 마십시오.

다음은 작업할 몇 가지 제안 자산입니다.

버튼

1. 버튼을 기본 색상으로 마스킹하고 채우기를 제거하여 아이콘처럼 이러한 동적 기호를 만듭니다.
2. 텍스트를 항상 중앙에 유지하려면 텍스트 상자의 너비를 버튼과 같게 하고 텍스트를 가운데에 맞춥니다.
3. 일관성을 유지하려면 저장된 텍스트 스타일을 사용해야 합니다.
4. 버튼/ 버튼 이름 명명 시스템을 사용하여 이러한 요소를 기호로 저장합니다.
5. 재정의 기능을 사용하여 레이블과 색상을 변경합니다.

검색 바

1. 검색 필드와 필드 자체 내에서 사용되는 아이콘 및 텍스트에 크기 조정 제약을 적용합니다.
2. 이전에 문서 색상 팔레트에 저장한 텍스트 스타일과 색상을 적용하는 것을 잊지 마십시오.
3. 검색 을 제목으로 사용하여 이 요소를 기호로 저장하거나 검색 유형이 다른 경우 search/standard 및 search/no-icon 과 같은 레이블 시스템을 준수합니다.

라디오 버튼과 체크박스

1. 심볼 안에 심볼이 있을 수 있으며 이를 테스트하는 좋은 방법은 지능형 라디오 버튼과 체크박스 자산을 만드는 것입니다.
2. 먼저 버튼 자산 자체를 만듭니다. 확인란/선택 및 확인란/선택 해제 를 예제 레이블로 사용하여 이 요소를 기호로 저장합니다.
3. 이제 입력을 생성합니다. 확인란 기호 옆에 자리 표시자 텍스트를 추가한 다음 전체 자산을 기호로 변환합니다. 이것은 이제 입력이므로 자산을 그대로 저장하는 것이 좋습니다. 따라서 좋은 레이블은 input/checkbox/selected 및 input/checkbox/deselected 입니다.

6단계: 스타일 가이드를 사용하세요!

스타일 가이드를 만들기 위해 이 모든 작업을 수행하는 것은 실제로 프로젝트를 보다 원활하게 실행하는 경우에만 유용합니다. 모든 자산이 생성되면 디자인 중인 문서에 라이브러리를 적용할 차례입니다. Sketch에서 "Preferences -> Add Library..."로 이동하여 라이브러리 문서를 추가합니다.

프로젝트 디자인 파일에 라이브러리를 추가하면 기호 섹션에서 라이브러리와 해당 기호에 액세스할 수 있습니다. 라이브러리 옵션으로 Sketch와 함께 제공되는 iOS UI 디자인 라이브러리와 최근에 가져온 라이브러리를 볼 수 있습니다.

기호를 업데이트하려면 기호 자체를 두 번 클릭하면 라이브러리 문서가 나타납니다. 변경을 완료했으면 디자인 문서로 돌아가서 오른쪽 상단 모서리에 있는 업데이트 버튼을 클릭합니다.

보너스: 텍스트 스타일 가져오기/내보내기

텍스트 스타일은 라이브러리와 함께 저장되지 않지만 Sketch용 공유 텍스트 스타일 플러그인이 이를 해결합니다. 플러그인을 다운로드했으면 라이브러리 문서로 이동한 다음 메뉴로 이동합니다. "플러그인 -> 공유 텍스트 스타일 -> 내보내기..." 이 파일을 라이브러리 문서와 동일한 폴더에 저장합니다. 그런 다음 디자인 문서에서 "플러그인 -> 공유 텍스트 스타일 -> 텍스트 스타일 가져오기..." 메뉴로 다시 이동하여 방금 저장한 파일을 가져옵니다. 텍스트 스타일이 나타납니다.

보너스: 색상 팔레트 가져오기/내보내기

텍스트 스타일과 유사하게 문서 색상은 Sketch 라이브러리에 저장되지 않지만 Sketch Palettes 플러그인은 이를 해결합니다. 위와 동일하게 "Plugins -> Sketch Palette -> Document Colors -> Save Palette"를 사용하여 팔레트를 내보내고 "Plugins -> Sketch Palette -> Document Colors -> Load Palette"로 가져옵니다. 다른 라이브러리 문서와 동일한 폴더에 저장하는 것을 잊지 마십시오.

보너스: 글꼴

InVision의 Craft는 Sketch 소프트웨어를 한 단계 업그레이드하는 플러그인 모음입니다. Craft를 사용하면 이미지를 스톡 사진으로 교체하고, 프로토타입을 만들고 InVision과 동기화하고, 라이브러리를 만드는 등의 작업을 수행할 수 있습니다. Craft가 다운로드되면 문서에서 "cmd-shift-c"를 누르면 스타일시트가 생성됩니다. 글꼴이 여기에 나열됩니다.

위에 요약된 6단계를 따르면 크고 작은 디자인 프로젝트가 더 원활하게 실행되고 최종 결과가 더 세련될 것입니다. 고유하거나 매우 구체적인 경우 스타일 가이드, 라이브러리 및 UI 키트를 하나의 클라이언트에 사용할 수 있으며, 와이어프레임 및 프로토타입과 같은 표준 UI 요소가 지속적으로 생성되는 경우 여러 프로젝트에 사용할 수 있습니다. 처음에 이러한 Sketch UI 구성 요소를 적절하게 만드는 데 시간을 할애하면 많은 프로젝트에서 많은 시간을 절약할 수 있습니다.

Toptal Design 블로그에 대한 추가 정보:

• 스타트업에 스타일 가이드가 필요한 이유
• 스케치의 타이포그래피에 대해 모를 수도 있는 것들
• 최고의 스케치 플러그인 50개의 최종 목록
• Adobe XD vs. Sketch - 나에게 적합한 UX 도구는 무엇입니까?
• 효과적인 디자인 프레임워크를 구축하는 방법(무료 스케치 UI 프레임워크 포함)