Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

@C7210?:關(guān)于Sketch 47 Beta帶來的Libraries功能。終于實現(xiàn)可以調(diào)用庫文件以及一些第三方插件。但原生功能是另一碼事,在如此重要的、可能涉及設(shè)計體系這樣龐大項目的功能上,依賴第三方解決方案的做法終歸有所牽制。

想來想去還是感到Sketch官方文檔對Libraries新功能的概念和用法解釋的最為全面和恰當(dāng),當(dāng)然Medium上還有一些很棒的實踐經(jīng)驗供參考。

要試用Libraries功能,你首先需要到Sketch官網(wǎng)下載Sketch 47 Beta版本。

Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

在“添加Libraries”這部分內(nèi)容當(dāng)中,我用到了自制的WireframeKit For Sketch(iOS)作為示意,這是一款面向交互設(shè)計師的線框稿風(fēng)格Sketch組件庫。

下面進入官方文檔正文。

優(yōu)秀的設(shè)計來自于協(xié)作。有了Libraries功能,跨文件的Symbols共享、升級和同步便得以實現(xiàn)。

什么是Libraries?

個Library本質(zhì)上就是一個普通的Sketch文件,其中的Symbols可以被其他Sketch文件調(diào)用。如果你編輯了Library當(dāng)中的Symbols,那么調(diào)用了該Library的其他Sketch文件便會收到更新通知,你可以對變更進行預(yù)覽、對比和確認(rèn),使這些Sketch文件所調(diào)用的Symbols自動更新至最新版本。

在多人協(xié)作場景中,你可以將Library文件存放在Dropbox同步文件夾或GitHub的Repository當(dāng)中,并確保其他同事?lián)碛性L問權(quán)限,這樣他們便可以在自己的本地Sketch文件當(dāng)中調(diào)用Library并使用其中的Symbols了。在你編輯了Library文件之后,他們的本地Sketch文件同樣會收到更新通知。

Libraries功能適合我嗎?

無論是獨自工作,還是團隊協(xié)作,Libraries功能都能幫你從容應(yīng)對。

我們提供了「iOS UI Design」作為默認(rèn)Library,你可以通過「Insert」菜單將常用的Symbols快速添加到文件當(dāng)中,也可以將自己的Sketch文件添加到Libraries當(dāng)中,或是打造全新的Library;無論怎樣,你都能夠在所有的Sketch文件當(dāng)中統(tǒng)一調(diào)用這些公用的Libraries,升級工作也只需在Libraries當(dāng)中一次性完成。

團隊作戰(zhàn)的設(shè)計師們則可以充分利用Libraries的同步能力來確保設(shè)計方案中的UI元素為最新版本,或是及時獲取最新的品牌風(fēng)格定義。Libraries被隔離于工作文件之外,你可以通過其存放媒介所提供的安全策略設(shè)置來確保其不會被錯誤的變更;對于任何升級變更,你也有機會在同步之前對其進行預(yù)覽確認(rèn)。

添加Libraries

要添加新的Library,你所需的僅是一個包含著Symbols定義的普通Sketch文件,就這么簡單。

當(dāng)你在本地Sketch文件當(dāng)中對Symbols進行了良好的定義,并希望在其他文件當(dāng)中進行調(diào)用的時候,你就可以將其添加為Library了。通過頂部菜單欄的「Sketch Beta」進入「Preferences」,即偏好設(shè)置(或使用快捷鍵“Command+逗號”),然后在窗口中打開「Libraries」選項卡。

Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

在這里,你會看到Sketch默認(rèn)提供的Library,即「iOS UI Design」。左側(cè)復(fù)選框的選中與否將決定這個Library是否會出現(xiàn)在Insert菜單當(dāng)中。點擊右側(cè)的“眼睛”圖標(biāo),或使用空格鍵,可以對Library進行預(yù)覽。

Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

點擊右下角的“Add Library...”按鈕,選擇你自己的Sketch文件,即可實現(xiàn)Library的添加。

Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

在上圖的范例中,我添加了自制的WireframeKit For Sketch(iOS)作為Library。

點擊左下角的管理按鈕(“齒輪”圖標(biāo)),彈出菜單,在這里你可以禁用、打開或移除當(dāng)前所選的Library。自行添加的Library在數(shù)量上沒有上限,每個Library在Symbols菜單當(dāng)中都自成體系。

Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

外部Libraries

想要通過Libraries實現(xiàn)外部共享或協(xié)作?完全沒問題 。將Libraries文件存放在本地服務(wù)器、云存儲或版本控制系統(tǒng)當(dāng)中,向相關(guān)人員開放訪問權(quán)限即可。

譬如你可以將Libraries文件放置在Dropbox共享文件夾里,然后你的朋友或同事將其添加到自己的Sketch Libraries當(dāng)中,這樣你們就可以基于同一份Library文件進行工作了;對于該文件的任何變更都可以作用于每個人的本地Sketch文件。

使用Library Symbols

你可以像使用普通的本地Symbols那樣使用Library Symbols,譬如通過菜單欄的Insert ? Symbol來插入到當(dāng)前畫布中。

Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

為了與本地Symbols進行區(qū)分,Library Symbols在圖層列表中會擁有一個獨特的圖標(biāo):

Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

插入到畫布當(dāng)中的Library Symbols同樣可以通過右側(cè)檢查器面板進行替換。

Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

編輯Library Symbols

當(dāng)你準(zhǔn)備像過去那樣通過雙擊Library Symbol對其進行編輯時,Sketch會提醒你該Symbol屬于某Library,你可以在「Unlink from Library」或是「Open in Original Document」當(dāng)中進行選擇。

Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

選擇后者,Library源文件會被自動打開,并定位到該Symbol。對源文件進行編輯,意味著所有調(diào)用到這個Library的本地Sketch文件都會受到影響。

因此要注意:如果在團隊范圍內(nèi)使用Libraries,那么在編輯源文件當(dāng)中的Symbols時要保持小心。高階人員可能要對普通團隊成員的訪問權(quán)限進行把控,例如設(shè)置為“只讀”(具體設(shè)置方式需要參考你所使用的同步工具的相關(guān)說明)。

將Library Symbols本地化

如果你希望在不影響Library源文件的情況下對Symbols進行修改,那么在上文的對話框中選擇「Unlink from Library」,這樣Library Symbol便會被本地化,脫離與Library的關(guān)聯(lián);其原型也會出現(xiàn)在本地Sketch文件的“Symbols”頁面當(dāng)中。

注意:一旦Symbol脫離了與Library源文件的關(guān)聯(lián),就無法再與Library保持同步。其他未脫離關(guān)聯(lián)的Symbols則不會受到影響。

管理本地調(diào)用的Library Symbols

你可以對本地Sketch文件當(dāng)中所調(diào)用的Library Symbols進行統(tǒng)一管理,無論它們來自一個或多個Libraries。在畫布中選中某個Library Symbol,在右側(cè)檢查器面板當(dāng)中點擊該Symbol的名稱,在彈出菜單中選擇「Organize Imported Symbols…」。

Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

你可以在彈出的對話框中看到當(dāng)前文件當(dāng)中調(diào)用的全部Library Symbols。選擇其中某一個,點擊左下角的管理按鈕(“齒輪”圖標(biāo)),你可以選擇在Library源文件中編輯該Symbol,或是將其本地化。

Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

Libraries的更新與同步

Libraries的重要性不僅在于跨文件使用Symbols,同時更在于保持這些Symbols的同步更新。

我們前面已經(jīng)了解過如何編輯Library Symbols。當(dāng)你完成編輯,回到自己的本地Sketch文件當(dāng)中,你仍然可以選擇是否接受Libraries當(dāng)中發(fā)生的變更。

編輯了Library Symbols之后,回到你的本地Sketch文件,你可以在窗口右上角看到紫色的「Library Update Available 」提示。點擊之后,會有對話框提示你當(dāng)前文件中某些Symbols有待更新。

Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

在這里,你會看到發(fā)生變更的所有Symbols,并能通過「before」和「after」進行版本對比。如果你不確定其中的某些變更是否應(yīng)該更新到當(dāng)前本地文件,那么取消選中狀態(tài)不同步該項即可。

Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

在這里,所有被選中的Symbols都會在你點擊「Update Symbols」之后被同步到你當(dāng)前的本地文件當(dāng)中。

如果你不希望當(dāng)前文件當(dāng)中的某些Library Symbols被更新,也可以在同步之前就通過“Unlink from Library”將其本地化。

歡迎關(guān)注作者的微信公眾號:

Sketch 新出了Libraries功能,以后團隊協(xié)作更方便了!

「Sketch超實用神器合集」

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng) UiiiUiii.com是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章,按照我們的專欄一步步學(xué)習(xí),一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航:國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航,設(shè)計師必備:http://hao.uisdc.com

收藏 64
點贊 3

復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。