掃盲貼: 教你如何 6 步快速上手設計師神器 Abstract

04-30

(閱讀時間: 大約 10 分鐘)

在上篇文章中，我介紹了版本控制工具 Abstract 是如何提升設計團隊協作效率的。這篇文章則是一份更詳細的 Abstract 新手教程，並附帶一些經驗和技巧。Abstract 徹底改變我們團隊的工作方式。希望我的分享對大家能有所幫助。

請先準備好一個 Abstract 賬號和幾名小夥伴。Abstract 提供一個月的組織賬戶免費試用。相比而言，個人賬戶受限較多。所以，建議找到小夥伴後先試用組織賬戶，看看 Abstract 是否適合你的團隊。註冊需梯子，因為他們使用了 Google reCAPTCHA 」智能」驗證，既防機器人，也防中國人。??

如果你還不清楚什麼是版本控制工具 Abstract，請先看這篇介紹。

第 1 步: 創建項目

創建一個項目，然後邀請你的同事 (設計師、前端工程師、產品經理等) 加入。

什麼是項目?

項目 (project) 是團隊協作的空間。如果你是產品團隊，你可能需要創建一個 iOS 或 Android 項目。你可能還需為 UI 組件庫或者 style guides 單獨準備一個項目。除此以外，您也許還想為市場營銷工作再創建一個項目。如果你是一個創意機構，你可能需要為每個客戶都創建一個獨立項目。具體如何劃分項目取決於你們團隊組織工作的方式。

什麼是用戶角色?

Abstract 把團隊成員劃分為 2 種角色: Contributor 和 Viewer。

貢獻者 (Contributor) 是為設計師準備的，有編輯許可權。可以編輯 Sketch 文件、創建項目、創建分支、提交改動、合併分支、邀請成員等。

觀眾 (Viewer) 是為程序員、產品經理等準備的，沒有編輯許可權。目前，觀眾只可以查看項目、下載 Sketch 文件、寫評論。Abstract 曾在 2017 年 9 月表示將會推出類似 Zeplin 的 Developer Handoff 功能，允許程序員直接查看樣式標註。

團隊只需為 Contributor 付費。Viewer 是免費的，且不限人數。如果你選擇 Starter 套餐，1 個 Contributor 的席位需花費每月 9 美金；Business 對應的則是 15 美金，額外支持私有項目、Slack 集成和 Collections。這三個功能我感覺還比較雞肋。因此在 Developer Handoff 功能發布之前，推薦選擇 Starter 套餐。

除此以外，還有一個特殊的管理員 (Administrator) 角色，是專門用來給組織賬戶買單的。Contributor (或者 Viewer) 可以同時是 Administrator。

視頻教程

https://www.zhihu.com/video/954381984668106752

進階指南

你可以給項目選個顏色，便於區分。
項目的名稱和顏色可以反覆修改。一開始起名隨便點也沒問題。(點擊「三個點」圖標修改)
項目分兩種: public 和 private。需要注意的是，公開項目是指對組織內的所有成員開放訪問許可權，而不是對」大眾」開放。組織外的人無法訪問」公開」項目。
當你邀請同事加入項目後，記得提醒他們下載 Abstract 客戶端並同步項目。第一次同步的速度可能有點慢，之後會快些。

第 2 步: 導入 Sketch 文件

創建項目後，你需要添加 Sketch 文件。你可以在項目里直接創建新文件；或者導入已有的 Sketch 文件。從這以後，請始終牢記要從 Abstract 中打開這些 Sketch 文件 (點擊 Edit in Sketch)，這樣 Abstract 才能跟蹤並記錄它們的版本。

什麼是 Master?

Master 其實是一個特殊的版本。在 Abstract 中，Master 是所有其他分支的起點和終點。用戶可以從 Master 創建新分支，改動過的分支最終都將合併回 Master。這樣，就確保了 Master 是設計的唯一的真相來源 (single source of truth)。其他人打開項目的 Master 時，就知道你的設計應該是什麼樣子。

如何在項目中使用 Sketch Library?

Library 是 Sketch 47 引入的重要功能，對於構建 Design System 非常有幫助。在一個項目中，只要告訴 Abstract 哪些文件是 Library，就可以直接在其他文件中引用。(你不需要在 Sketch 的設置面板裏手動添加。) 舉個例子，在導入文件時，你可以選擇 Import Sketch File as Library。然後，打開一個普通的 Sketch 文件，你就可以在 Symbol 菜單里找到這個 Library。

視頻教程

https://www.zhihu.com/video/954382650169839616

進階指南

你可以在一個項目里添加多個 Sketch 文件。
你可以重新命名項目里的文件。
在項目的 Files 視圖裡，你可以找到文件對應的 Sketch 版本號。請確保團隊成員的 Sketch 版本號都一致。

第 3 步: 添加一個新分支

在開始設計工作前，你還需要添加一個新分支。點擊 New Branch 創建分支，你對設計文件的改動將被保存在這個分支里。想一想你手頭上的計劃，挑一個任務作為分支的名稱，比如」修改導航欄」。

什麼是分支?

分支 (branch) 允許你對 Master 的副本做修改。Abstract 不允許用戶直接編輯 Master 文件。每位 Contributor 都可以創建分支，並且只有分支的主人能改動分支里的文件。這樣，大家可以放心地在自己的分支里做設計，而不必擔心源文件被同時編輯。

視頻教程

https://www.zhihu.com/video/954382683929845760

進階指南

分支的名稱可以修改。(點擊「三個點」圖標修改)
分支最好儘快合併到 Master。比如，我們團隊會在每周四檢查，把差不多完工的分支合併掉。
你可以在一個已經存在的分支上再創建一個子分支。子分支可以先合併到分支。如果你想給其他人的作品挑毛病的話，這可能有點用。??
你可以修改分支的狀態，幫助隊友理解你的工作情況。

第 4 步: 編輯文件，並提交

現在，你可以雙擊 Files 視圖裡文件，打開 Sketch 做設計了。

當你編輯完保存 (?S) 文件時，Sketch 的界面下方會出現一個提示框。點擊 Preview & Commit 提交改動。

什麼是提交?

每個提交 (commit) 都對應一個版本。提交的時候，你應該寫一句簡單的描述。這樣，提交歷史就一目了然，便於其他人理解。提交應儘可能小，儘可能頻繁。如果發現錯誤，你可以很輕鬆地恢復到之前的提交。

視頻教程

https://www.zhihu.com/video/954383465794293760

進階指南

如果你只想打開文件，不編輯、也不需要 Abstract 記錄改動，可以在打開文件時點擊 Open Untracked。
在 Commits 視圖 (提交歷史) 里，你可以將當前版本恢復到之前的某一時刻。
在 Sketch 里保存文件不等同於提交。你可以丟棄 (discard) 已保存但還未提交的更改。試試點擊 Preview & Commit 旁邊的箭頭。

程序員似乎對 commit messages 有很大的執念。但說實話，我的提交歷史完全不符合最佳實踐，都是毫無意義的「checkpoint」。不過似乎沒什麼大問題。我們幾個設計師並不會互相檢查提交記錄。??

提交一定要頻繁。提交不要錢，也不會佔用過多的硬碟空間。Abstract 只會存儲改動的部分。而且，如果出現問題 (Sketch 崩潰)，提交歷史可以幫我們快速恢復。

如果你改動了一個 Nested Symbol，在提交的時候，可能會發現很多 Symbols 和 Artboards 也顯示為」已改動」。這是因為這些 Symbols 和 Artboards 引用了這個 Nested Symbol。它們的畫板上會有一個灰色的 Edited 標示，說明是非視覺改動。Abstract 對非視覺改動做了一些優化，確保它們的預覽圖不會佔用硬碟和帶寬。

第 5 步: 審閱改動

接下來，邀請你的同事給你一些反饋吧。

什麼是評論和批註?

在合併到 Master 前，團隊成員可以針對畫板寫評論。這可以簡化並加快設計團隊的反饋流程。相比開會或者微信群，Abstract 允許我們在畫板上添加批註 (annotations)，以便於其他人清楚地知道你所指的是什麼。需要注意的是，一旦合併到 Master，這些評論將被隱藏。不過，你仍然可以在 Master 的提交歷史中找到它們。

視頻教程

https://www.zhihu.com/video/954383502888697856

進階指南

點擊 Compare 可以查看當前版本和之前的區別。
在 Files 視圖裡，如果 Page 右側有評論圖標，表示這裡面有評論。

第 6 步: 合併!

如果分支沒什麼問題，就合併到 Master 吧。

什麼是合併?

合併 (merge) 會把分支里的副本整合到 Master 文件。大部分時候，你根本不需要操心。點擊藍色的 Merge Branch 按鈕，Abstract 會自動把文件合併好。如果你在分支里添加了 3 個 Symbols，Master 文件里也會多出 3 個 Symbols。

有時候 Merge Branch 的按鈕會顯示為 Update from Master。這意味著 Master 被更新過，勇敢地點擊按鈕即可。舉個例子，你和另外一位設計師同時從 Master 創建了兩個分支。你負責導航欄，他負責註冊流程。如果他的工作先完成，並已把合併分支。你可能就需要先更新一下 Master 才能合併。

偶爾也可能會出現合併衝突，需要人工解決。舉個例子，如果你和另外一位設計師都修改了某個按鈕 Symbol 的樣式，Abstract 會在合併的時候要求你在兩個畫板中選一個。換而言之，衝突發生在畫板維度。為了避免衝突，建議使用 Library 文件建立原子化的設計系統。(這恐怕要留到下一篇文章再講了。)

視頻教程