Sketch web design 之 Symbol

如果要讓我選出Sketch最好用的功能，那我肯定會選擇Symbol，在UI設計中當你熟練掌握Symbol了以後，就能夠大大提高設計效率，並且獲得意想不到的效果，那麼Symbol有什麼作用呢？

• 將常用元素做成組件，方便全局快速修改和調用。
• 可以基於組件的基礎上分別修改裡面的可變元素，例如文案、圖片等。
• 靈活、可嵌套、可變形。

讓我們看看如何製作一個列表的Symbol：

1、使用形狀、圖片和文字工具製作好一個列表組。

2、選中列表組，點擊"Create Symbol"，並且將該Symbol命名為"list"。

3、創建成功，看到右側能夠自定義的內容區域，這裡的文案和圖片都能修改。

4、點擊工具欄的"Make Grid"，設置"Rows=5"、"Margin=0"、"Columns=1"，也就是5行1列，間距為0。

5、確認以後得到5行列表。

6、可以選中某個列表項，在右側隨意修改文字。

7、同時，為了結合 Craft插件 快速替換其他幾個列表的頭像，需要去掉"list" Symbol外的編組（Command+Shift+G），然後把頭像的形狀名稱改為"avatar"。

8、回到頁面中，選中另外四個圖層，打開Craft插件中的插入圖片功能，點擊後選中"avatar"圖層，確認快速替換頭像。

9、同時為了在不同布局中使用該列表Symbol，我們需要調整Symbol裡面頭像和文本的"Resizing"模式，因為我們需要把它們固定在左邊，使得調整列表寬度的時候它們不會變形和移動，所以把"Resizing"的模式改為"Pin to corner"。

這樣設置以後，調整列表寬度就不會改變內容的形狀和位置了，同樣為了達到其他的目的，可以嘗試使用另外幾個Resizing模式（點擊放大查看gif動畫）。

推薦閱讀：