當前位置:
首頁 > 最新 > Sketch 47 Libraries功能圖文詳解

Sketch 47 Libraries功能圖文詳解

每日勞作到充實和興奮的即將飛起,唯一的擔心便是一周一周積攢的內容與想法會因缺乏時間而難以形成文字。固然痛快吃喝與縱情玩樂可以作為對自己一周忙碌的犒賞,但這下午時光用來坐在辦公區吧台前敲敲鍵盤也是愜意不過。

外面烈日當頭又秋意四溢,說起來也是浮躁不安。苦的是美式,涼的是風,平靜而縱情的是朴樹。「關於未來,就請你坦然,不要離開,不要離開」。

正事是關於Sketch 47 Beta帶來的Libraries功能。終於。可以被調用的庫文件。一些第三方插件早已實現,確實,但原生功能是另一碼事;在如此重要的、可能涉及諸如設計體系這樣龐大項目的功能上,依賴第三方解決方案的做法終歸有所牽制。

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

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

Sketch官方文檔並未配圖,本文所有圖片均來自我個人的操作演示。

在「添加Libraries」這部分內容當中,我用到了自製的WireframeKit For Sketch(iOS)作為示意。這是一款面向交互設計師的線框稿風格Sketch組件庫,有興趣的朋友可以在這裡了解詳情。

下面進入官方文檔正文。

優秀的設計來自於協作。有了Libraries功能,跨文件的Symbols共享、升級和同步便得以實現。

什麼是Libraries?

一個Library本質上就是一個普通的Sketch文件,其中的Symbols可以被其他Sketch文件調用。如果你編輯了Library當中的Symbols,那麼調用了該Library的其他Sketch文件便會收到更新通知,你可以對變更進行預覽、對比和確認,使這些Sketch文件所調用的Symbols自動更新至最新版本。

在多人協作場景中,你可以將Library文件存放在Dropbox同步文件夾或GitHub的Repository當中,並確保其他同事擁有訪問許可權,這樣他們便可以在自己的本地Sketch文件當中調用Library並使用其中的Symbols了。在你編輯了Library文件之後,他們的本地Sketch文件同樣會收到更新通知。

Libraries功能適合我嗎?

無論是獨自工作,還是團隊協作,Libraries功能都能幫你從容應對。

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

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

添加Libraries

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

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

在這裡,你會看到Sketch默認提供的Library,即「iOS UI Design」。左側複選框的選中與否將決定這個Library是否會出現在Insert菜單當中。點擊右側的「眼睛」圖標,或使用空格鍵,可以對Library進行預覽。

點擊右下角的「Add Library...」按鈕,選擇你自己的Sketch文件,即可實現Library的添加。

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

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

外部Libraries

想要通過Libraries實現外部共享或協作?完全沒問題 - 將Libraries文件存放在本地伺服器、雲存儲或版本控制系統當中,向相關人員開放訪問許可權即可。

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

使用Library Symbols

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

為了與本地Symbols進行區分,Library Symbols在圖層列表當中會擁有一個獨特的圖標:

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

編輯Library Symbols

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

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

因此要注意:如果在團隊範圍內使用Libraries,那麼在編輯源文件當中的Symbols時要保持小心。高階人員可能要對普通團隊成員的訪問許可權進行把控,例如設置為「只讀」(具體設置方式需要參考你所使用的同步工具的相關說明)。

將Library Symbols本地化

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

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

管理本地調用的Library Symbols

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

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

Libraries的更新與同步

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

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

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

在這裡,你會看到發生變更的所有Symbols,並能通過「before」和「after」進行版本對比。如果你不確定其中的某些變更是否應該更新到當前本地文件,那麼取消選中態不同步該項即可。

在這裡,所有被選中的Symbols都會在你點擊「Update Symbols」之後被同步到你當前的本地文件當中。

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

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 Beforweb 的精彩文章:

TAG:Beforweb |