스케치에서 디자인 시스템 만들기 3
심벌을 현명하게 선택하라.
심벌이 많을수록 유용하고 강력한 디자인 시스템을 만들 수 있다.
초기 단계에서 수백 개의 심벌을 만드는 것은 쉽지 않지만 한 번 만들어 놓으면 필요에 따라 작은 추가 작업만으로 원활하게 작업할 수 있다.
심벌을 만드는은 디자인 시스템을 만드는 시간의 대부분을 차지할 것이다. 생각보다 많은 시간을 할애해야 할 것이다.
로마가 하루아침에 지어지지 않았듯이 마스터 심벌을 만드는 일도 마찬가지이다.
긴 시간이 소요되지만 나중에 제품을 설계할 때 이전보다 훨씬 빠르고 간단하게 제품을 설계하려면 필요한 일이다.
항상 작은 기호부터 시작하라.
마스터 심벌을 만들 때 보통 버튼부터 시작을 하게 된다.
언급한 것처럼, 버튼과 같은 작은 심벌은 모든 프로젝트에서 가장 많이 사용되므로 작은 심벌들을 필요로 하는 Modal, Card, Calendar처럼 큰 심벌들을 만들기 전에 가장 먼저 만드는 것이 좋다.
아래와 같이 Primary를 만들고
보조 버튼을 만들었다.
그리고 다음과 같은 베리에이션을 만들었다.
Button / Primary / Large / Default
Button / Primary / Large / Icon
Button / Primary / Large / Left Icon
Button / Primary / Large / Right Icon
'Large' 스타일뿐만 아니라 이전에 만든 다른 텍스트 스타일을 사용하여 'Medium' 및 'Small' 스타일도 만들었다.
앞에서 언급했듯이 이와 같은 디자인 시스템과 같은 경우에는 최대한 많은 것들을 만들어 놓는 것이 좋다.
그런 다음, 다음과 같은 베리에이션이 있는 Fields & Inputs를 만들었다.
Fields & Inputs / Standard / Large / Default
Fields & Inputs / Standard / Large / Default + Label
Fields & Inputs / Standard / Large / Text Area
다시 'Large' 및 'Small'로 크기를 변형하여 데스크톱 및 모바일 모두를 위한 디자인을 만들었다.
작은 심벌은 큰 심벌의 일부가 된다.
이전에 Buttons 및 Fields Symbols에서 했던 것처럼 훨씬 더 큰 Symbol (예 : Card, Modal)의 일부로 Avatars와 같은 작은 심벌을 만들었다.
그리고 Place holder들을 만들고
Seek Bars도 만들었다.
이러한 방법으로 큰 Symbol 내부에 작은 Symbol들을 적용할 수 있다.
큰 심벌 (예 : Card)을 먼저 전체적으로 만든 다음 구성되는 모든 요소 (예 : Button, Place holder, Avatar 등)를 더 작은 심벌로 분리하는 것을 좋아하는 사람들도 있다.
개인적으로는 작은 심벌을 먼저 디자인해서 모두 준비해 두는 것을 좋아한다. 그러면 더 큰 심벌을 만들 때 최종 디자인으로 만족할 때까지 사용 가능한 것들을 빠르게 적용해 볼 수 있기 때문이다.
다음은 추가로 만들어볼 수 있는 요소들이다.
Avatars
Button Groups
Calendars
Cards
Charts
Comments
Maps
Media Controls (Video & Audio)
Modals
Notifications
Pagination
Placeholders
Tooltips
이와 같은 디자인 시스템은 끊임없이 진화한다. 정적 상태로 유지되지 않는다. 시스템에 멋진 물결 모양의 차트 기호를 추가해도 큰 문제는 아니다. 언제든지 돌아와서 수정하거나 나중에 추가할 수도 있다.
충분한 사용 사례를 다룰 수 있는 일반적인 UI 요소들을 제자리에 배치해 두는 것으로 초기 시스템을 잘 만들 수 있을 것이다.
앞서 언급했듯이 디자인 시스템을 구축하는 것은 시간이 오래 걸리며, 일부는 처음부터 디자인 시스템을 구축하는 이유에 대해 의문을 제기하기도 하지만 구축을 한 후의 만족도는 정말 클 것이다. 더 이상 빈 캔버스를 바라보며 디자인 프로젝트를 시작하는 것에 대해 걱정할 필요가 없을 것이다.
원문 출처 : https://medium.com/sketch-app-sources/how-to-build-a-design-system-in-sketch-part-three-7d5c7e9acb10
