레이어

레이어에 적용하는 색, 선, 그라데이션, 이미지, 필터, 그림자 등을 레이어 스타일로 합친 라이브러리입니다. 스케치에서 레이어 스타일을 적용하는 방법은 Layer Style, Color palette, Symbol가 있으며 여기서는 주로 레이어 스타일과 심볼을 이용합니다. 되도록 Craft와 같이 자체적으로 처리되는 플러그인보다 Json 데이터로 스케치 내부에서 작동하는 방향으로 제작 중입니다.

색, 선, 그림자, 이미지, 그라데이션을 기본으로 나누며 각 스타일에 따라 세부 항목이 나뉘었습니다. 서비스 하나를 설계할 때 필요한 최소한의 스타일을 모았습니다. 필요에 따라 각 항목을 확장해 나갈 수 있습니다.

Primary, Secondary 색이 필요한 상황에서 사용할 색입니다. 기본적으로 밝은 색(300) 기본색(500) 어두운 색(700)을 사용합니다.
Mono 색보다 다양한 단계를 사용합니다. 000(검은색) ~ 999(흰색) 단계입니다.
Misc 주색과 무채색 외에 색으로 성공, 실패와 같은 정보를 전달할 때 쓰입니다.

테두리

Rectangle/Round 다양한 영역에 사용되는 박스 형태로 주로 각진 네모와 둥근 네모를 사용합니다.
Black/Grey/Grey-filled/misc 선색과 배경 색이 나뉩니다.

그림자

01/02/03 공간감을 표현하기 위한 그림자입니다.

이미지

Rectangle/Oval 이미지가 들어가는 기본형인 각진 네모와 프로필 등에 쓰이는 원형 이미지를 사용합니다.
Dimmed/Blur 이미지 위에 적용되는 필터입니다.

그라데이션

Warm/Cool/Mono: 그라데이션은 다양한 색이 담길 수 있기 때문에 색의 큰 개념인 따뜻함/차가움/무채색으로 나눴습니다.

첨부 파일

Github: DesignCompass-layerstyle.sketch