Sketch 3Professional digital design for Mac.

特別感謝

⾼高雄前端社群

Who am I ?本名蘇雅⽂文 Karen、阿滋都是我的綽號 雲⽅方科技資訊 設計 會寫 CSS 跟 Sass

Introducing Sketch 3

http://goo.gl/elHcLb

Sketch 3 基本介紹

Sketch 3 By Bohemian Coding

www.bohemiancoding.com/sketch/

圖層區

⼯工具區

⼯工作區 設定區

⼯工具區介紹

Toolbar (⼯工具區)

• 新增物件

• 放⼤大 ／ 縮⼩小 ／ 各種編輯

• 路徑管理員

• 網格設定

• 輸出

• 可⾃自定常⽤用⼯工具列（⼯工具列右鍵） !!!

複製旋轉 使⽤用鋼筆編輯展開框線 網格管理

顯⽰示佈局

Rotate Copies (複製旋轉)• 複製物件繞成⼀一個圓

• 選擇複製數量後可調整疏密及旋轉

• 複製的數量不包含物件本⾝身

Vector (鋼筆編輯)

• 快速鍵 V

• 四種模式：直線（Straight）鏡像（Mirrored）斷開連魂結（Disconnected）不對稱（Asymmetric）

• 編輯已存在物件：在物件上點兩下就會看到節點

Vectorize Stroke (展開框線)

• 等於 illustrator 的外框筆畫

• 展開物件框線後還可更換布林⽅方式

Layout Settings (佈局設定)• 可編輯、顯⽰示佈局欄位寬度並預覽

• offset：版⾯面最左⾄至Layout距離

• Gutter on outside：最外圍要不要留空隙

• Make default：現有設定設為預設

總寬偏移列數

兩列之間寬列寬

外圍寬

將此設定設為預設

Make Grid (網格管理)

• 可⼀一次排列多個物件（⽤用於多物件的情況）

• 固定框架排列：物件以框架寬⾼高為主體計算距離

• 如果只是少量物件：Alt + 拖移，再Cmd + D

重複⾏行數

重複列數

固定框架 排列

間距

圖層區介紹

圖層區

• 融合⾴頁數 ／⼯工作區域 ／資料夾群組的概念

• 可增加多個⾴頁⾯面（Page 1）

• 顯⽰示畫板 ／ 圖層

• 顯⽰示群組 ／ 物件

• 搜尋物件

• 顯⽰示 ／ 隱藏物件、切⽚片

增減⾴頁⾯面畫板名稱

物件切⽚片群組

搜尋

顯⽰示 ／ 隱藏物件

顯⽰示 ／ 隱藏切⽚片

遮罩

被鎖定物件被隱藏物件

⼯工作區介紹

Artboard (畫板)

• 新增畫板：快速鍵 A

• 同 illustrator ⼯工作區域，可複製 ／ 修改⼤大⼩小

• 內建多種螢幕尺⼨寸可直接新增

• 畫板名稱會顯⽰示在左上⾓角

設定區介紹

樣式設定

• 上半部為通⽤用設定，有對⿑齊、坐標、套⽤用樣式...等

• 下半部為樣式設定，可做點⼩小⼩小的特效，不需要時把前⾯面的勾勾點掉

為什麼 Sketch 3 吸引我 ?

集合AI與PS好處• ⽀支援向量編輯

• 切換像素預視

• 佈局、格線顯⽰示

• ⼯工作區域

• 快速鍵操作 ／ ⾃自定快速鍵組合

• UI Kits 或 Plugin 等網路資源

常⽤用快速鍵see more：http://sketchshortcuts.com/

Name 功能 快速鍵

Vector 鋼筆 VPencil 鉛筆 P Line 線段 L

Rectangle 四⽅方形 R Oval 圓形 O

Rounded 圓⾓角四⽅方形 R Text ⽂文字 T

Artboard 畫板 ASlice 切⽚片 S

Zoom 放⼤大 Z

⾃自定快速鍵

網路資源http://goo.gl/AVy2YH

網路資源http://goo.gl/J2Xe3Z

!

來幾個好像很威的 Plugin

• Sketch Toolboxhttp://sketchtoolbox.com/

• 管理Plugin

來幾個好像很威的 Plugin

• sketch-measurehttp://goo.gl/tQ9jGY

• 跟Mark Man 類似的功能：在物件增加標⽰示註解

來幾個好像很威的 Plugin• Sizes：物件寬⾼高

• Margin or Padding：邊跟留⽩白

• Distances：物件之間距離

• Properties：物件狀態註解，如字型、邊線顏⾊色

• Coordinates：經緯度、坐標

• Settings：畫⾯面單位設定、標⽰示顏⾊色設定

• Lite：隱藏圖案，只顯⽰示標注

其他特點• 單⼀一單位（px）

• 建⽴立專屬⾃自⼰己的物件樣式(Symbol) 以及⽂文字樣式 (Text Style)

• 好⽤用的切⽚片⼯工具

• 複製 CSS 樣式

• 內建 & ⾃自製Template

• ⾃自動存檔

• 輕量軟體

Symbols & Text Style Demo

Slice (切⽚片⼯工具)

• 可⼀一次轉存多種尺⼨寸圖⽚片

• 物件切⽚片：快速鍵S +點擊想轉出的圖⽚片

• 在圖層區拖拉物件到資料夾也可以直接轉圖（但只有1x）

複製 CSS 樣式border-radius: 3px;

/* Rectangle 11: */

background: #FFFFFF;

-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.30);

box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.30);

!font-family: NotoSansHant-DemiLight;

font-size: 16px;

color: #2B5F75;

line-height: 16px;

letter-spacing: 1px;

!font-family: NotoSansHant-Regular;

font-size: 13px;

color: #555555;

line-height: 20px;

內建 & ⾃自製Template

• 內建各種樣版，不必特地記憶

• 可⾃自⾏行建⽴立樣板儲存供⽇日後套⽤用

輕量軟體

兩位數跟三位數的差別

阿都給你講就好啦

看起來好像優點很多

缺點• MAC only

• English only 網路⽂文章看⼀一段要休息半⼩小時

• 不像 Sublime text 可以永久試⽤用（請⽀支持正版）

• 無法直接開啟與直轉 psd, ai 檔但可開啓svg檔

• 使⽤用習慣差異

其他教學 ／ 資源• UI week http://uiweek.com/

• Sketch 3 Tutorials (Youtube) http://goo.gl/La1tyL

• Design + Code https://designcode.io/

Thanks!