本系列將是最簡單的教程，適合沒有時間仔細(xì)研究工具的同事。

通過查看螞蟻提供的設(shè)計資源，我們可以發(fā)現(xiàn)螞蟻金服內(nèi)部已經(jīng)輕裝上陣，甚至還開發(fā)了針對性的插件，并導(dǎo)出了自己的設(shè)計規(guī)范。 這樣的組件、模板、插件都是幫助我們學(xué)好的神器，本系列文章也將重點介紹它們。

我總結(jié)了下面的核心步驟sketch標(biāo)注插件，總結(jié)就是“八個字四個字”：畫板、矩形、文本、切片。

可以這樣記：這就是四個快捷鍵，對應(yīng)的熱鍵可以創(chuàng)建對應(yīng)的圖形。

熟練使用這個快捷鍵，你將成為設(shè)計圈最靚的仔！

圖板

畫板可以理解為我們看到的系統(tǒng)界面。 你在手機(jī)屏幕上看到的元素都是放在畫板里的。 請記住，所有需要放置在一個屏幕上的元素都應(yīng)該放置在一個繪圖板上！

有很多外部畫板。 常用的手機(jī)、平板電腦、臺式機(jī)都有現(xiàn)成的規(guī)格。 比如我們常見的X規(guī)范就可以直接使用。

當(dāng)你完成了多個畫板后，你可以將它們組合成一個完整的流程圖，附加注釋，然后輸出給開發(fā)或運營朋友。

圓形的

任何現(xiàn)實生活中的物體都可以細(xì)分，復(fù)雜的頁面也不例外。 最基本的形狀是圓形。 你可以自由改變它的位置、大小、圓角直徑、不透明度、填充、邊框、陰影、模糊等元素。 基于以上功能，你幾乎可以制作出任何你想要的圖形。

雙擊圓圈進(jìn)入貝塞爾曲線編輯模式。 選擇現(xiàn)有點以編輯該點的屬性，然后單擊圓形邊緣以添加編輯點。 按住 Shift 或直接拖動即可選擇并連接多個編輯點。

您還可以使用布爾運算將多個圖形組合成新的圖形，以創(chuàng)建更多不同形狀的圖案。

單詞

文字是設(shè)計的靈魂。 優(yōu)秀的文案、優(yōu)美的字體、適當(dāng)?shù)拇笮　⑦m當(dāng)?shù)拇旨?xì)相結(jié)合，可以傳達(dá)出超越文字本身的美感。

點擊T并拖動鍵盤創(chuàng)建一段文本，文本的常用屬性可以在左側(cè)調(diào)整。 比較特別的是長度屬性，可以選擇【自動】調(diào)整長度以適應(yīng)高度，也可以選擇【固定】固定文字寬度和高度。

練習(xí)時，我推薦萍方（系統(tǒng)自帶）和文悅古典清朝字體。 后臺回復(fù)關(guān)鍵詞“文悅”即可下載。 請勿將它們用于商業(yè)用途。

切成塊

當(dāng)您想要剪切畫板的一部分而不是整個畫板時，剪切工具會派上用場。 按S拖出一個圓，實線圓區(qū)域內(nèi)的元素即可整體導(dǎo)入。 導(dǎo)入剪切塊和畫板的預(yù)覽圖像可以直接拖放添加到文檔中，甚至節(jié)省了導(dǎo)入步驟。

小方法

在更復(fù)雜的頁面中，可能有多達(dá)100個畫板元素，因此為組件命名非常重要。 這與組織您自己的文件相同。 做好分類、標(biāo)簽、預(yù)估版本管理可以減少此類問題。

另外，還有豐富的生態(tài)——插件，就像國內(nèi)的插件一樣，這讓它擁有了無限的可能性，從而在設(shè)計軟件的競爭中幾乎擊敗了Adobe這樣的強(qiáng)大對手。

我們可以發(fā)現(xiàn)優(yōu)秀軟件的共同特點：核心功能近乎完美、低頻需求開放、專注于解決某個問題。

再來說說插件生態(tài)。

插入

在里面以“插件”為關(guān)鍵詞搜索，你會看到無數(shù)種類的插件，豐富得讓人眼花繚亂。 我來重點推薦幾款吧。

軟件可以直接本地化，這正是很多英文用戶所需要的。

安裝

下載并解壓 .zip

雙擊。 完成安裝

安裝運行時需要重新啟動

使用

默認(rèn)情況下，啟動時手動本地化，執(zhí)行plug-in/>>I18N來啟用/禁用I18N

語言支持

（強(qiáng)烈推薦！）

安裝

下載并解壓 .zip

雙擊。 完成安裝

使用

執(zhí)行>>工具欄或使用快捷鍵?+\\來啟用或禁用屬性選擇器兩側(cè)的全局工具欄，以快速使用插件功能

輕松上傳設(shè)計稿

設(shè)計稿可以通過插件上傳到語雀畫板，足不出戶就可以管理設(shè)計資源，上傳后直接同步49（及以上版本）的交互原型，還可以由語雀熱區(qū)功能制作

執(zhí)行>>語雀>上傳或使用快捷鍵?+alt?+A

第一次使用

登錄語雀賬號需要授權(quán)，到達(dá)官網(wǎng)注冊或使用手機(jī)號/釘釘?shù)卿浐蟛僮魍瓿伞?/p>

圖片評論

輸入圖片詳細(xì)信息后，您可以對圖片進(jìn)行全局評論，更全面地與團(tuán)隊成員分享您的設(shè)計觀點。 委員們還可以對設(shè)計稿中的某個細(xì)節(jié)提出意見。 評論后，作者或訂閱者可以及時收到相應(yīng)的通知。

構(gòu)建特定于團(tuán)隊的庫

不僅可以快速導(dǎo)出Ant和Ant兩個優(yōu)質(zhì)資源包，還可以將精心制作的資源包上傳到語雀，與他人分享和維護(hù)你的專屬庫

執(zhí)行>>語雀>同步或使用快捷鍵?+alt?+W

多類型數(shù)據(jù)快速填充

文本和圖像填充促進(jìn)設(shè)計稿的快速填充，使其看起來更真實。 您還可以自定義創(chuàng)建新的文字和圖像sketch標(biāo)注插件，使填充內(nèi)容更適合業(yè)務(wù)特點

獲取海量圖標(biāo)資源

拖放合適的圖標(biāo)，通過快速搜索和調(diào)用圖標(biāo)來更改和使用。如果您習(xí)慣在互聯(lián)網(wǎng)上管理圖標(biāo)庫，登錄后還可以鏈接到項目圖標(biāo)、上傳的圖標(biāo)、上傳的圖標(biāo)圖書館和最喜歡的圖標(biāo)

執(zhí)行>>圖標(biāo)>或使用快捷鍵?+alt?+I

最近出來的精選確實不錯。

這個可以用來制作動畫，基本的位移動畫不成問題，而且是白癡式的操作。

插件還是很多的，大家可以自行探索，如果你找到好的插件或者你在實際工作中正在使用一些插件，請在評論中告訴我。

文中提到的三個插件可以在公眾號后臺找到

如有侵權(quán)請聯(lián)系刪除！