Sketch에서 패턴 라이브러리를 만드는 방법

웹 디자인의 일관성으로 어려움을 겪은 적이 있습니까? 이것은 특히 대규모로 작업 할 때 너무 자주 발생합니다. 다행히도 패턴 라이브러리가 도움이 될 것입니다!



패턴 라이브러리는 페이지를 빌드하는 데 재사용 할 수있는 사용자 인터페이스 디자인 요소의 모음입니다. 예를 들어 탐색, 단추, 단락, 제목 및 양식이 있습니다. 전체 페이지 대신 개별 요소를 디자인함으로써 재사용 가능성을 적극적으로 장려하여 일관성 있고 유지하기 쉬운 디자인을 만듭니다.



패턴 라이브러리를 구현하기 전에 디자인 도구가 재사용 가능한 요소를 처리 할 수 ​​있는지 확인해야합니다. 지난 2 년 동안 제가 사용했던 디자인 도구는 인터페이스 및 패턴 라이브러리에 완벽한 경량 벡터 기반 도구 인 Sketch였습니다. 왜 완벽할까요? 예를 들어 보겠습니다.

웹 사이트 전체에서 여러 번 사용되는 버튼 요소가 있고이를 변경하기로 결정했다고 가정 해 보겠습니다. 일반적으로 해당 버튼의 각 인스턴스를 통해 수동으로 변경해야합니다. Sketch가 아닙니다. 이 소프트웨어에는 특수한 종류의 레이어 그룹 인 심볼이라는 기능이 포함되어 있습니다. 심볼을 변경하면 다른 모든 인스턴스에 자동으로 적용됩니다. 재사용 가능한 요소 작업에 적합합니다.



좋아, 내가 Sketch의 칭찬을 불러 주면 충분합니다. 튜토리얼을 시작하겠습니다! Sketch 사본이 없습니까? 단순히 머리 위로 여기 무료 평가판을 다운로드하십시오.

01 단계

아트 보드 설정

아트 보드 설정

시작하기 전에 무료 Google 글꼴이 있는지 확인하세요. 소스 Sans Pro 설치되었습니다. 새 문서를 만든 다음 삽입> 아트 보드로 이동하여 새 아트 보드를 삽입합니다 (키보드 단축키 : A). 아트 보드는 화면 크기로 사용할 고정 캔버스입니다. 왼쪽 레이어 목록에 'Artboard 1'이 추가 된 것을 확인할 수 있습니다. 오른쪽의 Inspector 패널에서 Width를 1280px로, Height를 2000px로 설정합니다.



02 단계

그리드 만들기

그리드 만들기

이제 그리드를 만듭니다. Artboard 1을 선택한 상태에서보기> 캔버스> 레이아웃 표시 (키보드 단축키 : Ctrl + L)로 이동합니다. 기본 그리드가 나타납니다. 이제 편집 만하면됩니다. Artboard 1이 선택된 상태에서보기> 캔버스> 레이아웃 설정으로 이동합니다. 총 너비를 1080px, 열 수를 12, 거터 너비를 30px, 열 너비를 60px로 설정합니다. 외부 거터가 선택되어 있는지 확인하십시오. 중앙 단추를 클릭하십시오.

03 단계

버튼 만들기

월마트 스트레이트 토크에서 갤럭시 s7
버튼 만들기

이제 아트 보드와 그리드가 설정되었으므로 콘텐츠를 추가 할 차례입니다. 이 튜토리얼에서는 4 가지 유형의 패턴 라이브러리 요소를 만들 것입니다. 버튼부터 시작하겠습니다. 버튼 배경을 만들려면 삽입> 모양> 직사각형 (단축키 : R)으로 이동합니다. Inspector에서 Width를 280px로, Height를 44px로 설정합니다. Radius를 3px로 설정하고 채우기 색상을 # 1A9DD3으로 설정합니다.

04 단계

텍스트 삽입 및 서식 지정

텍스트 삽입 및 서식 지정

이제 텍스트를 추가합니다. 삽입> 텍스트 (단축키 : T)로 이동합니다. 서체를 Source Sans Pro, Weight를 Bold, Color를 #FFFFFF, Size를 16pt로 변경하고 가운데 정렬 아이콘을 클릭합니다. 텍스트가 배경 중앙에 오도록 배치합니다. 두 레이어를 모두 선택하고 정렬> 그룹 레이어로 이동합니다 (단축키 : Cmd + G). 그룹을 선택한 상태에서 레이어> 심볼 만들기로 이동합니다. Sketch가 기호의 이름을 지정하라는 메시지를 표시하므로 Button을 입력합니다. 기호는 보라색 레이어 아이콘으로 인식 할 수 있습니다.

05 단계

기호 사용

기호 사용

방금 만든 것과 같이 Symbol에 대한 모든 변경 사항은 해당 Symbol의 다른 모든 인스턴스에 적용됩니다. 유일한 문제는 Symbol 내부의 버튼 텍스트를 변경하면 다른 모든 버튼의 텍스트도 변경된다는 것입니다. 이러한 일이 발생하지 않도록하려면 텍스트 레이어를 선택하고 Inspector에서 Exclude Text Value from Symbol 확인란을 선택합니다. 이제 복제 버튼을 만들어 보겠습니다. 삽입> 기호> 버튼으로 이동합니다.

06 단계

행동의 상징

중요한 요소가 아닌 모니터를 구입할 때
행동의 상징

작동중인 기호를 보려면 버튼 하나의 배경색을 변경하십시오. 둘 다 색상이 어떻게 변하는 지 확인하십시오. 그러나 한 버튼의 텍스트를 변경해도 다른 버튼의 텍스트는 변경되지 않습니다. 스타일 만 동기화되고 텍스트 문자열은 동기화되지 않습니다. 즉, 예를 들어 모두 동일한 스타일을 공유하는 가입, 지금 구매 및 연락하기 버튼을 만들 수 있습니다.

07 단계

계속 진행하기 전에 Sketch에서 측정이 어떻게 작동하는지 아는 것이 중요합니다. 버튼 하나를 선택하고 Alt 키를 누른 상태에서 두 번째 버튼 위에 마우스를 올려 두 버튼 사이의 거리를 표시합니다. 이것은 디자이너가 항상 사용하는 기능 일뿐만 아니라 정확한 픽셀 측정을 정기적으로 계산해야하는 개발자에게 완벽한 기능입니다.

08 단계

제목 시작하기

제목 시작하기

다음은 제목입니다. 제목은 재사용 가능한 텍스트 요소이므로 기호 대신 텍스트 스타일 기능을 사용하는 것이 중요합니다. 텍스트 레이어를 삽입하고 제목 수준 1을 입력합니다. 서체를 Source Sans Pro로, 두께를 굵게, 색상을 # 3A4654로, 크기를 37pt로 변경합니다. 레이어> 공유 스타일 만들기로 이동합니다. Inspector에서 강조 표시된 텍스트가 있음을 알 수 있습니다. Sketch는 문자 스타일의 이름을 지정하라는 메시지를 표시하므로 H1을 입력합니다.

09 단계

제목 크기

제목 크기

마지막 단계를 반복하여 H1 ~ H6 요소를 만듭니다. 내 제목 글꼴 크기는 H1 : 37pt, H2 : 31pt, H3 : 25pt, H4 : 21pt, H5 : 18pt 및 H6 : 15pt입니다. 각 제목은 텍스트 스타일이므로 변경 사항은 다른 모든 인스턴스에 적용됩니다. 나는 Jeremy Church의 유형 비율 도구 내 제목의 크기를 결정합니다. Type Scale은 선택한 비율에 따라 비례적인 글꼴 크기를 선택하기 위해 모듈 식 스케일을 사용합니다.

10 단계

텍스트 스타일 구성

텍스트 스타일 구성

방금 만든 텍스트 스타일을 구성하려면 삽입> 스타일 텍스트> 텍스트 스타일 구성으로 이동합니다. 여기에서 텍스트 스타일을 삭제하고 이름을 바꿀 수 있지만 순서를 변경할 수는 없습니다. 텍스트 스타일은 알파벳순으로 정렬되므로 첫 번째 단어가 같은 유사한 요소의 이름을 지정합니다. 심볼을 구성하는 동일한 프로세스를 따르십시오. 좋아요, 우리는 버튼과 제목을 다루었습니다! 하지만 이미지는 어떻습니까?

11 단계

아바타 만들기

아바타 만들기

아바타의 경우 너비와 높이가 모두 130px 인 이미지와 직사각형을 삽입합니다. 직사각형의 반경을 65px로 지정합니다. 두 레이어를 그룹화하고 이미지 뒤에 직사각형을 배치합니다. 직사각형 레이어를 마우스 오른쪽 버튼으로 클릭하고 마스크로 사용을 선택합니다. 이제 원형 아바타가 있습니다. 아바타를 정사각형으로 만들려면 새 모양을 삽입하는 대신 반경을 편집하기 만하면되기 때문에 실제 원 대신 반경 설정이있는 직사각형을 사용했습니다.

12 단계

하지만 이미지를 바꾸고 싶다면 어떻게해야할까요? 좋아, 아마도 당신은 그것을 묻지 않았지만 그것은 적절한 이미지 바꾸기라는 깔끔한 기능으로 나를 인도합니다. 아바타를 선택하고 레이어> 이미지> 바꾸기로 이동합니다. 다른 사진을 선택하십시오. Sketch는 자동으로 새 이미지의 크기를 조정하고 기존 이미지로 전환합니다. 생각보다 자주 사용하게 될 것입니다. 시간을 크게 절약 할 수 있습니다!

13 단계

Content Generator for Sketch로 사용자 사진 가져 오기

Content Generator for Sketch로 사용자 사진 가져 오기

자신의 이미지를 삽입하는 대안은 Sketch 용 콘텐츠 생성기 Timur Carpeev의 플러그인. 모양을 만들고 플러그인> 콘텐츠 생성기 스케치 플러그인> 페르소나> 사진으로 이동하면됩니다. 사용자 사진을 사용자 인터페이스 , 모양 채우기로 삽입합니다. Sketch 플러그인 커뮤니티는 훌륭합니다.

14 단계

색상 견본

색상 견본

다음은 색상 견본입니다! 패턴 라이브러리에서 일반적으로 사용되는 색상을 문서화하는 것이 중요합니다. 너비와 높이가 120px 인 사각형을 삽입하고 채우기 색상을 # 1A9DD3으로 지정합니다. 이 단계를 # 3A4654, # 475361, # 8793A1 및 # EFF0F1 색상으로 반복합니다. 또한 색상 견본을 만들기위한 플러그인 조디 헤븐 너. 플러그인> 견본으로 이동하여 위에 5 개의 16 진수 값을 입력합니다.

15 단계

색상 라이브러리 구축

색상 라이브러리 구축

견본을 선택하고 Inspector에서 채우기 색상을 클릭합니다. 색상 선택기의 맨 아래에 전역 색상과 문서 색상이라는 두 섹션이 있습니다. 전체 색상은 작성한 모든 Sketch 문서에 저장되며 문서 색상은 각 문서에 고유합니다. 문서 색상 섹션에 색상을 추가하여 고유 한 색상 라이브러리를 구축합니다.

16 단계

자주 사용되는 색상

자주 사용되는 색상

문서 색상 외에도 Sketch는 문서에서 일반적인 색상을 자동으로 선택하고 사용 빈도를 나타냅니다! 이 기능은보기에서 숨겨 지지만 색상 선택기에서 액세스 할 수 있습니다. 색조 및 불투명도 슬라이더의 오른쪽 영역을 클릭하십시오. 자주 사용되는 색상이라는 제목의 팝업이 표시됩니다 .... Sketch는 색상이 얼마나 자주 사용되었는지뿐만 아니라 어디에서 사용되었는지 알려줍니다.

17 단계

가정

가정

마지막 단계를 보려면 자원 이 튜토리얼과 함께 제공되며 글꼴 Source Code Pro가 설치되어 있는지 확인하십시오. 리소스에서 HTML은 각 요소와 함께 포함됩니다. 이렇게하면 올바른 HTML 태그와 클래스 이름이 개발에 사용됩니다. 적절한 경우 사용 메모를 제공 할 수 있습니다. 이에 대한 좋은 예는 그리드 시스템에서 열 클래스, 열 오프셋 등에 대한 정보를 갖는 것이 유용합니다.

18 단계

사람들이 요소로 이동할 수 있는지 확인하십시오.

사람들이 스크롤 할 필요가 없도록 요소로 이동할 수 있는지 확인

리소스에서 헤더에 Jump to… 선택기가 있음을 알 수 있습니다. 패턴 라이브러리는 길 수 있으므로 팀 구성원이 전체 페이지를 스크롤하지 않고도 요소로 빠르게 이동할 수 있어야합니다. 이에 대한 예는 List Apart 패턴 라이브러리Anna Debenham의 패턴 라이브러리 .

douchebag을 다루는 방법

그게 다야! 이제 패턴 라이브러리로 작업하는 방법을 알았습니다. 지금해야 할 일은 자신의 라이브러리에 대한 영감을 찾는 것입니다. 나는 방문하는 것이 좋습니다 웹 사이트 스타일 가이드 리소스 많은 훌륭한 기사, 도구 및 예제를 찾을 수있는 Anna Debenham 및 Brad Frost가 작성했습니다.

: 리처드 차일드

Richard Child는 디자인 컨설턴트입니다. 이 기사는 원래 272 호에 게재되었습니다. 넷 매거진 .

마음에 드 셨나요? 읽어보세요!