本系列將是最簡單的教程，適合沒有時間詳細研究工具的學生。

通過查看螞蟻提供的設計資源，我們可以發(fā)現(xiàn)螞蟻金服內(nèi)部大量使用，甚至還開發(fā)了針對性的插件，并導出了自己的設計規(guī)范。 這些組件、模板和插件都是幫助我們學好的好工具，本系列文章也將重點介紹它們。

我總結了下面的核心步驟，可以概括為“八個字四個字”：畫板、矩形、文本、切片。

大家可以這樣記：這是四個快捷鍵，通過對應的鍵位可以創(chuàng)建對應的圖形。

熟練使用這些快捷鍵，你將成為設計圈最帥的帥哥！

圖板

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

它內(nèi)置有多種尺寸的畫板。 常用的手機、平板電腦、臺式機都有現(xiàn)成的尺寸。 比如我們常見的X尺寸就可以直接使用。

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

長方形

任何現(xiàn)實生活中的物體都可以細分，復雜的頁面也不例外。 中國人最基本的形狀是長方形。 您可以自由修改其位置、大小、圓角半徑、不透明度、填充、邊框、陰影、模糊等元素。 基于以上功能sketch標注插件，你幾乎可以制作任何你想要的圖形。

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

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

單詞

文字是設計的靈魂。 優(yōu)秀的文案、漂亮的字體、合適的大小、合適的粗細，可以傳達出超越文字本身的美。

單擊 T 并拖動鼠標以創(chuàng)建一段文本。 右側可以調整常用文本屬性。 特殊之處在于 width 屬性。 您可以選擇[自動]調整寬度以適應高度，或選擇[固定]固定文本寬度和高度。

練習的時候我推薦的字體是平方（系統(tǒng)自帶）和文悅經(jīng)典明朝。 后臺回復關鍵詞“文悅”即可下載。 請勿將它們用于商業(yè)用途。

片

當您想要剪切畫板的一部分而不是整個畫板時，切片工具會派上用場。 只需按S拖出一個矩形，即可將虛線矩形區(qū)域內(nèi)的元素整體導出。 導出的切片和畫板預覽可以直接拖動并添加到文檔中，無需導出步驟。

尖端

在更復雜的頁面中，可能有多達100個畫板元素，因此為組件命名非常重要。 這與組織您自己的文件相同。 通過分類、標簽、預編輯版本管理，可以減少組件數(shù)量。 這些問題。

此外，還有豐富的生態(tài)系統(tǒng)——插件，這賦予了它無限的可能性。 因此，它在設計軟件的競爭中幾乎擊敗了Adobe這樣的強大對手。

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

接下來，我們來談談插件生態(tài)系統(tǒng)。

插入

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

該軟件可以直接翻譯成中文，這是很多中國用戶的必需品。

安裝

下載并解壓 .zip

雙擊完成安裝

運行時需要重新啟動安裝

使用

默認情況下，啟動時會自動翻譯成中文。 執(zhí)行插件/>> I18N 以啟用/禁用 I18N。

支持的語言

（強烈推薦?。?/p>

安裝

下載并解壓 .zip

雙擊完成安裝

使用

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

方便上傳設計稿

設計稿可通過插件上傳至語雀畫板，足不出戶即可管理設計資源。 49（及以上）版本制作的交互原型上傳后將直接同步。 也可以使用語雀熱區(qū)功能來制作。

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

第一次使用

您需要獲得授權登錄語雀賬號，前往官網(wǎng)注冊或使用手機號/釘釘?shù)卿洸⑼瓿刹僮鳌?/p>

圖片回顧

輸入圖片詳細信息后，您可以對圖片進行全局評論，更全面地與團隊成員分享您的設計想法。 委員還可以對設計稿中的某些細節(jié)提出意見。 評論后，作者或訂閱者可以及時收到相應的通知。

創(chuàng)建特定于團隊的庫

除了快速導入Ant和Ant的兩個優(yōu)質資源包之外，您還可以將精心制作的資源包上傳到語雀，與他人分享和維護您的專屬庫。

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

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

文字和圖像填充有助于快速填充設計稿sketch標注插件，使其看起來更真實。 您還可以自定義新的文字和圖片，使填充內(nèi)容更適合業(yè)務特點。

獲取海量圖標資源

通過快速搜索和調用圖標，拖拽合適的圖標進行修改和使用。如果您習慣在互聯(lián)網(wǎng)上管理圖標庫，登錄后還可以將其與項目圖標、上傳的圖標、上傳的圖標庫關聯(lián)起來和最喜歡的圖標。

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

最近推出的選擇真的很棒。

可以用這個來制作動畫，基本的定位動畫很容易做，而且是傻瓜式操作。

插件還是很多的。 您可以自己探索它們。 如果您發(fā)現(xiàn)好的插件或者在實際工作中正在使用一些插件，請在評論中告訴我。

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

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