由於公司分享會需要和同事們分享 Sketch App 的學習經驗，於是整理了一些內容，讓有想學習 Sketch 的捧油參考唷！

Sketch 簡介

  • Bohemian Coding 團隊開發 (2010, 荷蘭)
  • Mac Only
  • $99美元 ( 供兩台電腦 )
  • UI Mockup ( Web/App 皆可 )
  • 內建多種版型
  • 可將元件設為Symbol重複利用
  • 輸出方便
  • 資源豐富( 外掛與範本 )
  • 搭配Zeplin、Marvel、Flinto做線上互動




為何使用 Sketch

Sketch 可將設計師想法更完整呈現，使 Designer 與 Developer 溝通更順暢。



工具介紹

  • 工具列
  • 圖層列表
  • 畫布區
  • 屬性編輯區



Plugin

  • Sketch Toolbox
  • Icon-Font
  • Lorem Ipsum
  • Content Generation
  • Dynamic Button
  • Constraints
  • Copy & Paste Shadows
  • Style Drop
  • Clipboard Fill
  • Long Shadows
  • Magic Mirror



Template Kit

  • Sketch Foundation Kit
  • Bootstrap3



檔案輸出

  • 一次存多種尺寸
  • 一秒存好檔



Share 平台

  • Zeplin
  • Invision



結論

  • 容易上手
  • 善用 Plugins、Template
  • 設計師可以更專注於使用者體驗設計上
  • 提高設計師與工程師的溝通效率
  • 透過討論平台，更真實呈現設計師想法



相關連結