還記得“一次性設計”嗎？對，就是我今天產(chǎn)出的這個東西只用一次，下一次碰到新的類似的場景用不上它。就好像一次性碗筷，用完即仍，不僅僅沒有辦法復用，而且無體系、非模塊的處理方式也十分摧殘我們的精力。
原子設計解決的就是這個問題，基于原子產(chǎn)出的設計可以大大提升設計本身的復用率，只需要花費很少的時間，就可以用組件迅速的搭建出一個頁面。
而Sketch的核心大招——symbol功能，恰恰對應了原子設計的理念，基于symbol創(chuàng)建的組件可以多個頁面復用，并且復用后的樣式可以基于定義的樣式庫自由改動，而不影響symbol本身。（后續(xù)所有翻譯都統(tǒng)稱symbol為組件）
在創(chuàng)建組件之前，我們需要先定義styling（樣式）。
新版本的Sketch中除了以往我們熟知的字符樣式和圖層樣式外，還新增了顏色變量這個新的功能。這個我們放后面著重說。
1. 創(chuàng)建與復用一個樣式
字符樣式：
調(diào)整好一個字符后，通過新建即可將其定義到字符樣式庫，之后我們想對某些文本信息復用樣式，直接在外觀面板中調(diào)用（可以直接搜索對應的字號，方便快捷）
圖層樣式：
而我們所能定義的圖層樣式通常可以包含“樣式”面板中所有的選項。填充、邊框、陰影、內(nèi)模糊及模糊這些樣式都可以定義到庫中。具體創(chuàng)建與調(diào)用方法和字符樣式一致，這里不細講。
2. 神奇的顏色變量
69版本新增了一個顏色變量的功能。這個顏色變量的神奇之處就在于，形狀和文字圖層都可以共用一個顏色，修改了顏色變量即可實現(xiàn)全局更新。
舉個栗子
我想把這倆貨換個顏色來更契合我高冷的氣質(zhì)。
在以往，我們需要在fill（填充）、border（邊框）和text（字符）三個地方進行修改，才可以全部更換。
但是如果我們使用顏色變量，那就可以一鍵修改。
如何使用顏色變量？還是這個按鈕的例子。
首先，我們給主色創(chuàng)建一個顏色變量。創(chuàng)建好會它會自動在顏色變量面板中生成。
之后，確保我們的對象都使用了顏色變量（色板icon處于激活狀態(tài)就是正在使用）
之后，我們只需要在變量中一鍵修改，即可迅速實現(xiàn)文本、填充和線框的全局迭代，非常非常的方便。（是不是有點像Ai的重新著色？）
當然，如果你是想替換別的顏色，cmd+shift+F即可實現(xiàn)一鍵替換。（不限于顏色變量）
3. 顏色變量的劣勢
可惜的是，覆蓋層目前依然僅支持圖層樣式和字符樣式，而沒有顏色變量的選項。你沒有辦法直接在組件中更換變量。也就是說，我想在頁面中添加一個新顏色的按鈕，那只能通過增加新的symbol來實現(xiàn)，這無疑增加了維護、迭代的難度。
所以，在Sketch對顏色變量有所行動之前，我建議組件庫依舊使用圖層樣式來搭建顏色庫。
比如我們要創(chuàng)建一個按鈕，直接在頂部工具欄點選“創(chuàng)建組件”這個菱形即可。
△ 舊版Sketch是個環(huán)狀加載icon
默認選擇的“發(fā)送組件到組件頁面”是指，你創(chuàng)建的這個組件不僅僅反映在當前的圖層中，同時將生成一個Symbol Source（后面統(tǒng)一翻譯為源組件）反映在組件頁面中。
如果我們在一個頁面中想復用到這個按鈕，可以在菜單欄或者工具欄中直接調(diào)用。
不過一旦組件過多，查找某個組件其實是相當吃力的，不過！Sketch在69版本推出了一個“組件視圖”功能，在這個可視化的宮格視圖下，你可以迅速找到你需要的組件。選中后右鍵點擊置入即可實現(xiàn)調(diào)用。
但是，這些并非最快捷的調(diào)用方法。
還記得Mac的“spotlight（聚焦搜索）”嗎？自從習慣了聚焦搜索，我很久沒有再去訪達的文件夾手動找東西了？梢哉f這是mac系統(tǒng)得以高效辦公的一個精髓所在，你幾乎不需要在“找東西”上花費任何精力。
Sketch大概是吸收到了spotlight的創(chuàng)意，在69版本中同時上線了“Insert Menu（插入菜單）”的功能。只需要按下快捷鍵C，即可呼出一個面板。
面板采用了和組件視圖一致的更易辨識和區(qū)分的宮格布局。你可以通過側(cè)邊導航或者全局搜索迅速定位到你想要的組件，拖拽或者雙擊即可實現(xiàn)迅速調(diào)用！最高效、也最推薦的調(diào)用方法，沒有之一。
1. 我對組件本身有意見
對組件本身有意見可以理解為想在源頭修改，即修改源組件。
可以雙擊圖層中的組件or組件視圖中的組件，進入組件頁面編輯。當對源組件進行編輯后，所有已經(jīng)復用好的組件都會跟隨變化。（敲黑板，不到萬不得已一定要謹慎修改！唉說多了都是淚）
2. 我對組件樣式有意見
如果僅僅是樣式的問題，那就很好辦了。
我們只需要在右側(cè)的Overrides（覆蓋層）面板中替換成我們想要的樣式即可，這些樣式來自我們之前對顏色、文本樣式的預先定義。我們只是改動原子，所以并不會影響到源組件本身。
組件選擇器中選擇即可，不用多說。（如果組件存在嵌套，則覆蓋層也可以進行子組件的替換）
當你想要對一些事物進行高效管理時，分組是最關(guān)鍵的手段之一。
而Sketch的symbol可以通過格式化的命名來高效地編組管理。
Sketch獨特的命名格式是：xxx/…/xxx
“/”這個符號可以實現(xiàn)父子集的劃分，/之前的內(nèi)容是/之后內(nèi)容的父級，一次“/”即可實現(xiàn)一次編組，可以進行嵌套。
比如這四種不同的按鈕組件，就可以在各自名稱前加入“按鈕/”來將它們統(tǒng)一歸納到“按鈕“組中。
但是，一旦組件多起來，一個個的命名編組是一件非常痛苦的事情。
沒事，我們神奇的69版本又一次解決了這個痛點。
現(xiàn)在，我們不需要在把精力花費在這些沒有技術(shù)含量的重復勞動力上面，只需要不斷地創(chuàng)造它們，然后ctrl+G，Duang~Duang~，完美解決。而且也支持通過解組、拖曳來實現(xiàn)編組的調(diào)整。（現(xiàn)在我唯一后悔的就是沒早點升級Sketch版本）
我在之前的原子設計文章中提到，原子設計的核心就在于它以原子、分子、組織、模板和界面這五個層級為基礎，來一步步進行搭建。
而其中原子到分子、分子到組織、組織到模板的過程就屬于嵌套。落實到組件庫中，主要對應著原子到分子的嵌套。
下面這個按鈕就是典型的一個嵌套行為。我們希望這種文字+icon形式的按鈕能夠?qū)崿F(xiàn)形狀、圖標的自由搭配，因此提前將各個形狀和圖標作為原子制定好symbol，然后再嵌套，成為一個新的分子組件。
嵌套過程也很簡單，我們只需要選中原子（形狀組件、圖標組件和文本），進行二次創(chuàng)建即可。
最后，我們可以在覆蓋層自由地配置原子。
僅僅改動icon和形狀就能適配到不同的場景。即便后面業(yè)務有新的類似的功能需求，我們只需要在組件庫中增加icon、形狀即可。
不過，如果我們僅僅負責建立組件，而不考慮組件內(nèi)容發(fā)生變化后的動態(tài)響應是遠遠不夠的。這部分相對比較難懂，我單獨放在了下篇進行講解~
Sketch搭建組件庫的上篇就此結(jié)束，很多地方會涉及到Sketch69版本上線的新功能，暫未更新的童鞋強烈建議去升級下版本，你會切實感受到不為工具所累的爽快感。
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。