[Design 원데이] 스케치 툴 (3)

1. 상태바

1) 기본 설정

375 x 44, 375 x 44, 375 x 52 크기의 Rectangle 도형을 생성하고, icon material 사이트에서 아이콘을 다운로드한다. (arrow, notification, search, home, collections)

기본 설정

2) 정리, 그룹핑, Symbol화

Large Title을 감싸는 Rectangle을 제외하고 Rectangle 삭제 및 Boarder, Opacity 설정

정리, 그룹핑, Symbol화

3) 옵션 항목 Symbol화

옵션 항목 Symbol화

4) 다른 Artboard 생성 후 옵션 항목 확인

다른 Artboard 생성 후 옵션 항목 확인

※ 일반적으로 Text의 경우 (Extra Bold, 32) / (Bold, 17) 사용
※ 색상 처리 할때 Global 색상 저장은 어떤 Sketch파일이든 사용 가능한 옵션이며, Document 옵션은 해당 Sketch파일 내에서만 허용하는 옵션

 

 

 

2. Tab 바

가장 하단에서부터 34 간격을 띄우고 375 x 50 크기의 Rectangle을 생성한다. 이 후, 만들어진 Rectangle을 Tab 바에 넣을 항목 만큼 나누어 설정한다. (Tab 바인 만큼 Fix position when scrolling 옵션 선택)

Tab 바

※ Tab 바에 넣을 글자 크기는 일반적으로 9 혹은 10 크기를 사용하며, 색상은 #F9F9F9를 많이 사용

 

 

 

3. 화면 연결

Inspector 창의 Prototyping옵션을 이용하여 화면 연결이 가능하고, Symbol의 경우 Symbol 페이지에서 Prototyping Target 처리 및 애니메이션 설정을 할 수 있다.

화면 연결

※ 화면 연결 후 Preview 기능을 통해 동작을 확인할 수 있으며, iPhone은 Sketch Mirroring을 통해 실제 앱에서 동작하는 모습 확인 가능

 

 

 

4. Zeplin

1) Zeplin 생성 및 업로드

'Command + Control + E' 단축키로 쉽게 업로드가 가능하다.

Zeplin 생성 및 업로드

2) Stylguid 업로드

색상은 자동으로 업로드가 되고, 아이콘의 경우 Export 설정을 통해 업로드를 할 수 있다. Symbol도 같이 업로드가 되며, 어디에 사용되었는지 확인이 가능하다.

Styleguid 업로드

 

 

 

5. Flinto

1) Sketch 생성, Flinto 연동

맥에서만 사용 가능하며 앱을 디자인(화면전환 및 애니메이션)하는 프로그램이다. 완벽하게 한글화 되어있는 제품이며 Sketch와 연동이 가능하다.

Sketch 생성, Flinto 연동

2) Switch 동작

Switch 동작

3) 하트 동작

더블 탭 시 동작하며 타이머 링크를 통해 다시 초기 상태도 돌아가도록 설정한다.

하트 동작

※ 각 Artboard의 미리보기는 각 Artboard 마다 홈 화면으로 설정하여 실행

---

[참고] www.youtube.com/channel/UCog3NWIh6P9MsPctuqYdp5A/videos