圖層(Layer)
圖層是sketch里的基本模塊,圖形(Shapes), 分組(Groups) 和畫板( Artboards) 都是不同類型的圖層
添加圖層
直接通過工具欄的Insert按鈕就能添加各種類型的圖層

或者直接使用每個圖層對應(yīng)的快捷鍵也可以添加圖層。比如:
A: 添加面板
R: 添加矩形
O: 添加橢圓
選中圖層
- 直接在畫布上點擊要選擇的圖層
- 也可以在
The layer List里選中要選擇的圖層 - 通過按住Shift(
?)鍵,可以依次選中多個圖層 - 通過在畫布空白處拖出一個選擇框來選中的各個圖層
- 通過在畫布空白處拖出一個選擇框,并同時按住
?, 只會選中完全在框里的圖層 - 通過在畫布空白處拖出一個選擇框,并同時按住
?, 會將選中的圖層添加到當前選中的圖層列表里 - 通過在畫布空白處拖出一個選擇框,并同時按住
?, 可以實現(xiàn)反選的效果,即將已經(jīng)選中的圖層移除,沒有選中的添加到當前選中的圖層列表里 - 通過
Edit > Select > Select All in Artboard選中一個畫板里的所有圖層
選擇重疊的圖層
在多個重疊的圖層上點擊選擇的同時,按住?鍵,可以選擇當前圖層下的第二個圖層,也可以右擊從Select Layer里選擇需要選中的圖層。

圖層分組
通過給多個圖層分組,可以方便的調(diào)整一組圖層的大小,透明度等
選中要分組的多個圖層,通過Arrange > Group或者快捷鍵? + G對圖層進行分組
取消分組可以使用Arrange > Ungroup或者快捷鍵? + ? + G
當選中一個圖層組時,默認是選中整個組,如果要選中組里的單個圖層,可以雙擊圖層組,或者按住?+要選擇的圖層即可。
移動圖層
選中一個圖層后,通過拖拽即可移動圖層,拖拽的同時如果按住?, 可以顯示移動的像素信息。
使用Tidy重新整理多個圖層
選中多個圖層后,使用檢查器(Inspector)頂部的Tidy按鈕可以快速重新將多個圖層按照網(wǎng)格重新排序
智能排版
通過Tidy按鈕的布局之后,選中多個圖層, 可以智能調(diào)整圖層之間的間距或者位置
復(fù)制圖層
選中圖層之后,通過? + D鍵可以復(fù)制選中的圖層,也可以在拖拽圖層的同時,按下?鍵來復(fù)制圖層
對齊圖層
Ctrl + ? + H 垂直方向分布多個圖層
Ctrl + ? + V 水平方向分布多個圖層
調(diào)整圖層大小
選中圖層后,通過拖拽圖層的邊框可以調(diào)整圖層的大小。
拖拽的同時如果按住?鍵,可以保證拖出來的圖形寬和高都相等。用于拖拽正方形或圓形
拖拽的同時如果按住?鍵,可以保證是按照保證圖層的中心不變,按照中心縮放,而不是默認的按照某個邊進行縮放
通過檢查器調(diào)整圖層大小
可以直接在檢查器里通過設(shè)置寬和高的值來設(shè)置圖層的大小。
默認情況下,都是固定圖層左邊以及上面的邊來調(diào)整圖層大小的。
在檢查器輸入要調(diào)整的寬高的數(shù)字同時,也可以跟一些字符來控制要固定的邊。如:
-
l: 從左邊開始縮放(默認) -
r: 從右邊開始縮放 -
t: 從上面開始縮放(默認) -
b: 從下面開始縮放 -
c/m: 從中心開始縮放
比如:
設(shè)置寬度時,輸入200r, 可以實現(xiàn)固定圖層右邊不動的情況下,將寬度調(diào)整為200
設(shè)置高度時,輸入200b, 可以實現(xiàn)固定圖層下面的邊不動的情況下,將圖層高度調(diào)整為200。
同時,在設(shè)置寬和高時,也可以用一些簡單的運算, 如:
-
+加法 -
-減法 -
*乘法 -
/除法
也可以直接設(shè)置百分數(shù)。不過需要注意的是,當設(shè)置百分數(shù)時,是以圖層所在畫布的寬和高的百分比來計算的,而不是圖層本身之前的寬或高的百分比,
如: 設(shè)置寬度為10%, 就是將當前圖層的寬度設(shè)置為它所在面板寬度的10%,與圖層本身之前的寬度沒有任何關(guān)系。
在設(shè)置圖層四個角的拐角半徑時,如果只輸入一個數(shù)字,會同時設(shè)置4個角的拐角半徑。
也可以通過;作為分隔符,依次設(shè)置4個角的拐角半徑,比如對一個矩形設(shè)置為20;40;60;80,出來的效果如下:

精細的調(diào)整
如果需要進行比較精細的大小調(diào)整,可以在選中圖層的同時,使用下面的快捷鍵
-
?+→: 寬度增加1px -
?+←: 寬度減少1px -
?+?+→: 寬度增加10px -
?+?+←: 寬度減少10px
縮放圖層
當調(diào)整圖層大小時,之前對于圖層的一些設(shè)置,比如(strokes, border radii or shadow sizes)這些屬性都不會變化,如果需要讓這些屬性按照調(diào)整的比例一起變化時,可以使用Layer > Transform > Scale…或者快捷鍵? + K
畫板調(diào)整
選中畫板之后,如下圖所示:
如果使用Fit按鈕,會自動調(diào)整畫板的大小,讓它包含所有的圖層內(nèi)容。
如果候選上Adjust content on resize, 在調(diào)整畫板大小的同時,
也會調(diào)整里面的圖層大小。

布局約束
選中一個圖層之后,可以在檢查器的RESIZING里設(shè)置它相對于父容器的布局。

- 通過
Pin to Edge固定圖層的邊緣相對于父容器的位置 - 通過
Fix Size讓圖層隨著父容器的寬度和高度同步變化 - 在Preview里能預(yù)覽變化的效果