Sketch 3

Derek Hong

Improve your work-flow efficiency

洪得翔 Derek

研發處前端工程師

F2eTW 社群版工清潔工

以前的心願是用劇場拯救世界

現在的心願是哪天可以不用VM

What is Sketch ?

是一套強大的介面設計軟體
介面簡潔、易學 ~~猴子都會用~~
出圖便利神速、節省大量時間
強大的套件擴充功能以及資源支持

Frond-end Friendly ＝前端愛妳

好sketch，不買嗎？

Why Sketch ?

可是瑞凡...

Mac only

好MAC，不買嗎？

Power of Sketch

快速掃過sketch的強大功能

1. 快速檢閱元素間的距離

2. 神速取色器（搭配色碼表更強大）

3. 快速選取命名圖層

4. 多重選取圖層

5. 使用命名規則快速命名圖層

6. 一鍵畫出等距元素

7. Artboard

8.一鍵輸出css語法

/* Button Background: */
background: #FFFFFF;
border-radius: 4.5px;
/* Cancel: */
font-family: HelveticaNeue-Medium;
font-size: 21px;
color: #037AFF;
line-height: 26px;
/* Activity Background: */
background: rgba(252,252,252,0.70);
background: rgba(248,248,248,0.60);
border-radius: 4.5px;
/* Icon Shape: */
background: #FFFFFF;
/* Middle: */
background: #686871;
/* Ring 1: */
border: 1px solid #686871;
/* Ring 2: */
border: 1px solid #686871;
/* Ring 3: */
border: 1px solid #686871;
/* Ring 4: */
border: 1px solid #686871;
/* AirDrop. Tap to turn: */
font-family: HelveticaNeue-Medium;
font-size: 11px;
color: #000000;
letter-spacing: 0.3px;
line-height: 13.5px;
/* Base: */
background-image: linear-gradient(-180deg, #67FF81 0%, #01B41F 100%);
/* Bubble: */
background: #FFFFFF;
/* Message: */
font-family: HelveticaNeue;
font-size: 11px;
color: #000000;
letter-spacing: 0.2px;
line-height: 12px;
/* Base: */
background-image: linear-gradient(-180deg, #1E51EE 0%, #19E6FF 100%);
/* Envelope: */
background: #FFFFFF;
/* Mail: */
font-family: HelveticaNeue;
font-size: 11px;
color: #000000;
letter-spacing: 0.2px;
line-height: 12px;
/* Icon Shape: */
background: #FFFFFF;
/* More: */
background: #686871;
/* More: */
font-family: HelveticaNeue;
font-size: 11px;
color: #000000;
letter-spacing: 0.2px;
line-height: 12px;
/* Icon Shape: */
background: #FFFFFF;
/* More: */
background: #686871;
/* More: */
font-family: HelveticaNeue;
font-size: 11px;
color: #000000;
letter-spacing: 0.2px;
line-height: 12px;
/* Separators: */
background: rgba(0,0,0,0.25);