本文探討了在設(shè)計系統(tǒng)中維護圖標(biāo)庫的實用技巧，尤其是針對 figma 用戶的具體方法。文章涵蓋了圖標(biāo)庫的組織、管理和更新的多種方案，并對字體圖標(biāo)和 SVG 圖標(biāo)的優(yōu)缺點進行了對比，同時還提供了一些關(guān)于圖標(biāo)尺寸、自適應(yīng)圖標(biāo)和雙色圖標(biāo)的建議。
圖標(biāo)是界面設(shè)計中不可或缺的核心元素之一。設(shè)計師應(yīng)當(dāng)構(gòu)建一個組織嚴(yán)謹(jǐn)?shù)膱D標(biāo)庫，便于實現(xiàn)靈活的更新和擴展。同時，針對設(shè)計系統(tǒng)而言，在代碼層面建立順暢的圖標(biāo)更新機制也尤為重要。
很多出色的文章都闡述了圖標(biāo)的作用，但通常焦點更集中于圖標(biāo)本身的設(shè)計過程。
在這篇文章中，我將探討圖標(biāo)庫組織的一些關(guān)鍵部分，并分享一些實用技巧，以幫助在維護設(shè)計系統(tǒng)中的Figma圖標(biāo)庫時避免出現(xiàn)常見問題。
圖標(biāo)庫設(shè)置
在使用 Figma 進行設(shè)計時，圖標(biāo)和所有組件應(yīng)集管理，還是建獨立資源庫？
這兩種方法各有其特點和適用場景。歸根結(jié)底，如何選擇關(guān)鍵在于團隊規(guī)模及設(shè)計系統(tǒng)的成熟性階段。
在團隊規(guī)模較小且設(shè)計系統(tǒng)仍處于初步構(gòu)建階段時，將所有內(nèi)容集中于一個文件中會更加高效。當(dāng)設(shè)計系統(tǒng)被拆分為多個獨立的 Figma 文件時，設(shè)計師在使用過程中可能會遇到復(fù)雜性，甚至因適配個人需求額外創(chuàng)建各種庫，這種不統(tǒng)一的分散管理方式可能會加劇混亂局面。
Figma 中的組件庫可能會包含大量內(nèi)容，組件列表過長時容易導(dǎo)致用戶迷失方向。
與之相對，若團隊規(guī)模較大且具備成熟的流程體體系，獨立維護的代碼庫反而能夠帶來更高的靈活性與適應(yīng)性：
便捷的權(quán)限管理：圖標(biāo)庫可由專屬團隊獨立維護，大幅提升協(xié)作效率，顯著精簡工作流程。
高效的版本控制：支持為圖標(biāo)建立獨立的版本管理體系，實現(xiàn)快速回滾和精修迭代。
適配多場景圖標(biāo)庫：能夠支持面向不同平臺或產(chǎn)品的多套圖標(biāo)庫設(shè)計，通過 Figma 標(biāo)準(zhǔn)化的替換庫功能，無縫切換組件與圖標(biāo)庫的組合應(yīng)用。
另外，獨立的 Figma 圖標(biāo)庫能夠顯著提升品牌視覺更新的效率：只要你事先制定好統(tǒng)一的命名規(guī)范，并在庫的每一次更新中始終保持一致（確保舊版圖標(biāo)與新版圖標(biāo)具有一對一映射關(guān)系），在進行圖標(biāo)風(fēng)格調(diào)整時，僅需簡單地替換原庫即可。而所有關(guān)聯(lián)的組件及最終設(shè)計稿將自動同步至全新的圖標(biāo)集合。
字體還是 SVG？字體圖標(biāo)作為設(shè)計領(lǐng)域的一項經(jīng)典存在，已有數(shù)十年的發(fā)展歷史（可追溯至上世紀(jì) 90 年代，其最初的商業(yè)化字體符號集問世）。即便在如今多變的設(shè)計趨勢中，字體圖標(biāo)依然占據(jù)著重要地位。對很多設(shè)計師而言，F(xiàn)ontAwesome 是一個耳熟能詳?shù)拿?，甚至已?jīng)成為實際項目中的日常工具。而在移動端設(shè)計領(lǐng)域，Material Symbols（即 Material Design Icons 的字體化版本）備受青睞。與此同時，蘋果的 SF Symbols 也已深度融入其生態(tài)中，被廣大開發(fā)者和設(shè)計師所關(guān)注與使用。那么問題來了，字體圖標(biāo)究竟憑什么表現(xiàn)如此出色？它的核心價值究竟是什么？
首要優(yōu)勢在于集成的便捷性：只需安裝所需的字體文件，完整的圖標(biāo)集便立即可啟用。之后即可通過系統(tǒng)自帶的標(biāo)準(zhǔn)字體管理工具或字體瀏覽器輕松預(yù)覽和操作整個圖標(biāo)庫。
MacOS 中的字體冊
也可以嘗試使用 Figma 插件。這類工具選擇多樣，例如，Symbol Icon Browser 插件高效整合三大主流圖標(biāo)字體庫，讓字體圖標(biāo)的查閱和調(diào)用流程變得更加便捷流暢。
另外，采用字體格式的圖標(biāo)庫，在絕大多數(shù)場景下，與使用獨立文件（如 SVG）的方式相比，可以實現(xiàn)顯著的體積節(jié)約。在某些特定應(yīng)用中，字體圖標(biāo)還能極大提升設(shè)計組件的工作效率：由于圖標(biāo)能夠像純文本一樣被管理，其在縮放和與文本對齊時的操作體驗會更加簡潔直觀，顯著優(yōu)化了設(shè)計流程。
圖標(biāo)和標(biāo)簽屬于同一文本塊
然而，即便這些方案具備許多優(yōu)勢，我卻觀察到設(shè)計師們更傾向于采用獨立的圖像文件作為圖標(biāo)，并將其整合為一個資源庫。這背后的原因是什么呢？
總結(jié)起來，給字體庫添加新圖標(biāo)并非易事，因此在大多數(shù)情況下都會局限于字體庫中現(xiàn)有的圖標(biāo)資源。盡管這對大多數(shù)項目而言已經(jīng)是綽綽有余，但實際上仍然可以實現(xiàn)擴展，自定義補充新圖標(biāo)的可能性依舊存在。
舉個例子，如果你正在使用 Font Awesome，可以直接向 Fonticons（即 Font Awesome 背后的開發(fā)團隊）支付額外費用，以在你的圖標(biāo)庫中新增所需的自定義圖標(biāo)。
向 Font Awesome 添加新圖標(biāo)
針對 Material Symbols，Google 表示會免費開放獲取。用戶只需通過 GitHub issue 提交需求即可。不過，需滿足一些規(guī)定和條件。
對于 Material Symbols 的圖標(biāo)請求
借助 SF Symbols，您可以利用專屬應(yīng)用高效完成個人化操作與設(shè)計。
https://developer.apple.com/sf-symbols/
然而，對于開發(fā)者而言，使用該庫的前提是接受被限定于蘋果平臺的限制，因為這一字體集合在其他操作系統(tǒng)上并不適配。如果你希望擺脫預(yù)設(shè)字體集合的局限性，可以嘗試?yán)孟?Fontello 這樣的開放性工具，按需生成一套定制化的字體集合，從而更靈活地滿足跨平臺應(yīng)用的設(shè)計需求。
總體而言，將圖標(biāo)整合到字體集中，相較于直接使用 SVG 文件來說操作相對繁瑣一些。畢竟，使用 SVG 文件時，設(shè)計師和開發(fā)者只需在 Figma 內(nèi)即可完成資源的最終準(zhǔn)備用，不需要額外借助其它工具或服務(wù)進行加工處理。
如果你追求更高的靈活性——例如賦能設(shè)計師自由定制專屬圖標(biāo)，或希望在代碼里實現(xiàn)圖標(biāo)的動效優(yōu)化，那么 SVG 無疑是你的不二之選。
從另一個角度來看，如果默認(rèn)的圖標(biāo)庫已經(jīng)能夠全面滿足你的設(shè)計需求，或者你的項目專注于單一平臺（例如蘋果），那么選擇使用字體圖標(biāo)可能會是一個更高效且便捷的解決方案。
圖標(biāo)的大小如何？
隨著顯示技術(shù)和設(shè)備的演進，圖標(biāo)設(shè)計的尺寸規(guī)格也在不斷調(diào)整和優(yōu)化。早期圖標(biāo)主要為小尺寸、低分辨率的屏幕環(huán)境而設(shè)計。隨著大尺寸高分辨率顯示設(shè)備的普及，高分辨率圖標(biāo)設(shè)計的需求也應(yīng)運而生。
為移動設(shè)備進行設(shè)計時，復(fù)雜性顯著提升，特別是在需要考慮不同屏幕密度的情況下。在 SVG 廣泛普及之前，這通常意味著需要為同一個圖標(biāo)準(zhǔn)備多種分辨率的版本。例如，為 Android 設(shè)計標(biāo)準(zhǔn)的 24 x 24 基礎(chǔ)圖標(biāo)時，還需額外生成不同尺寸的資源，以適配各種設(shè)備需求：例如 2 倍分辨率的 48 x 48、3 倍分辨率的 72 x 72，甚至包括某些不太常見的比例，如 1.5 倍。
這個問題的核心在于如何為不同屏幕分辨率優(yōu)化同一套圖標(biāo)，以確保在各種設(shè)備上都能夠清晰呈現(xiàn)。隨著 SVG 的流行（直到 2020 年蘋果才在 Xcode 12 中正式支持 SVG 格式），這一挑戰(zhàn)基本上被解決了。不過，我仍偶爾會接觸到采用傳統(tǒng)工作流依賴 PNG 格式的項目。然而，在日常的設(shè)計實踐中，經(jīng)常會遇到需要在同一界面中應(yīng)用不同尺寸圖標(biāo)的需求，如何協(xié)調(diào)它們的尺寸與一致性仍然是設(shè)計的難點之一。
Figma UI 中的不同尺寸的圖標(biāo)
大多數(shù)情況下，僅對圖標(biāo)進行縮放就能滿足需求。然而，對于某些圖標(biāo)，簡單縮放可能會導(dǎo)致美感缺失或無法保持最佳視覺效果。自適應(yīng)圖標(biāo)提供了一個全面解決方案，它們根據(jù)每種視覺大小調(diào)整適配的筆畫粗細(xì)與圖標(biāo)樣式，從而確保精準(zhǔn)且和諧美觀的展示。一些領(lǐng)先的現(xiàn)代字體圖標(biāo)集已經(jīng)支持使用自適應(yīng)圖標(biāo)，進一步提升可用性與視覺一致性。
SF Symbols 權(quán)重和比例
另一種優(yōu)化圖標(biāo)尺寸的策略是響應(yīng)式圖標(biāo)設(shè)計。早在 2013 年，Joe Harrison 率先提出了一種根據(jù)圖標(biāo)縮放比例動態(tài)調(diào)整其細(xì)節(jié)表現(xiàn)層次的技術(shù)方法。值得注意的是，他不僅概念化了這一創(chuàng)意，還提供了具備實踐價值的原型解決方案，為業(yè)界實現(xiàn)提供了實操參考。
響應(yīng)式圖標(biāo)
該項目上線后迅速引爆話題，首日點擊量突破 20,000 次。目前，Smashing Magazine、UX Mag 和 Designmodo 等知名媒體均對其進行了詳細(xì)報道，引領(lǐng)設(shè)計領(lǐng)域就網(wǎng)站未來在響應(yīng)式元素（如圖標(biāo)）應(yīng)用上的趨勢展開了深層次探討。
該方法的核心痛點在于實現(xiàn)過程的高復(fù)雜度。具體而言，它在人力投入上具有極大的挑戰(zhàn)性，因為每個圖標(biāo)都需要手動適配多種尺寸和精細(xì)化程度的版本。這也導(dǎo)致規(guī)范制定的門檻顯著提高——不同的尺寸常常需對應(yīng)多樣化的網(wǎng)格設(shè)計和一系列定制化規(guī)則，使得整體設(shè)計流程更加繁瑣復(fù)雜。
如果你擁有一支專業(yè)且能快速制作不同尺寸圖標(biāo)的插畫師團隊，那么選擇響應(yīng)式圖標(biāo)設(shè)計無疑是一個理想方案，因為它能夠大幅提升整體的用戶體驗質(zhì)量。
如果你需要獨立維護整個圖標(biāo)庫（除了維護設(shè)計系統(tǒng)外），我更傾向于建議你聚焦于一個單一尺寸，例如 24x24dp 這一標(biāo)準(zhǔn)規(guī)格。
圖標(biāo)組件設(shè)置
讓我們來看看組織圖標(biāo)組件最常見的設(shè)置：
所有基礎(chǔ)圖標(biāo)默認(rèn)設(shè)定為一個標(biāo)準(zhǔn)尺寸（例如 24dp），其余規(guī)格則通過按比例縮放得到。。
使用扁平化設(shè)計風(fēng)格，注重描邊和形狀。在進行圖標(biāo)縮放時，確保描邊寬度隨比例動態(tài)適配是關(guān)鍵。每個圖標(biāo)需制作成獨立的設(shè)計組件，方便使用和維護。
最終交付的文件統(tǒng)一采用 SVG 格式。
為確保該設(shè)置能夠高效運轉(zhuǎn)，可參考以下核心指南與實用建議。
一致的層級設(shè)置
設(shè)計師常常會提出這樣的問題：在組件中替換圖標(biāo)后，如何確保其顏色樣式始終保持一致？
圖標(biāo)來源：https://fonts.google.com/icons
請確保圖標(biāo)內(nèi)部的圖層設(shè)置規(guī)范統(tǒng)一，包括以下方面：
圖層命名一致性
字母格式（大小寫）保持統(tǒng)一
圖層的數(shù)量、結(jié)構(gòu)和排序嚴(yán)格對齊
當(dāng)在 Figma 中替換布局中的組件時，只有在內(nèi)部結(jié)構(gòu)完全匹配的情況下，實例的自定義屬性才會實現(xiàn)無縫繼承。
在為圖標(biāo)設(shè)定顏色時，真正著色的部分并非組件本身（因為組件僅作為容器），而是其內(nèi)部的矢量形狀層。否則，帶色彩的圖標(biāo)看起來就只是一個單獨的有色矩形。值得一提的是，F(xiàn)igma 通過圖層的命名規(guī)則來記錄顏色配置信息。換句話說，對 Figma 來說，這相當(dāng)于一個分配了具體顏色值的「變量」。
在替換圖標(biāo)的過程中，F(xiàn)igma 會根據(jù)新圖標(biāo)中具有相同變量名的圖層來進行適配。如果變量名無法對應(yīng)匹配，F(xiàn)igma 將自動使用組件原始設(shè)計中設(shè)定的默認(rèn)顏色進行渲染。
不同的圖層名稱可能會重置自定義顏色設(shè)置
Figma 在圖層名稱中區(qū)分大小寫：
字母大小寫也很重要
還有層的數(shù)量和順序：
Figma中圖層的默認(rèn)順序是從底部開始
只有在結(jié)構(gòu)統(tǒng)一時，一切才能夠正常運行：
圖標(biāo)中的圖層保持一致時，交換操作不會出現(xiàn)問題
形狀合并
圖標(biāo)設(shè)計往往是由多個形狀元素相互疊加組成的。如果每個元素都存儲在獨立的圖層中，不同圖標(biāo)之間的層級數(shù)量將會出現(xiàn)差異，這可能會在圖標(biāo)替換或進一步編輯時引發(fā)操作上的不一致性和潛在問題。
針對這個問題，F(xiàn)igma 提供了一種高效且直接的解決方案——你可以使用合并選擇功能，將多個形狀圖層無縫整合為單一對象：
Figma 中的形狀合并
在應(yīng)用合并功能時，它會將每個形狀保留為獨立的圖層，但整體上又將這些構(gòu)成的元素視作一個單一的平面化形狀。可以說，合并功能本質(zhì)上是一種"打包"形式。另外，我發(fā)現(xiàn)這項功能在解決另一類問題時同樣表現(xiàn)出色。
假設(shè)你改變圖標(biāo)的樣式：
簡單風(fēng)格更改
通常，圖標(biāo)會被單獨設(shè)計后納入到組件庫中。在需要引入全新圖標(biāo)的場景下，只需為其設(shè)計一個全新的組件并更新至庫中，流程簡潔高效。
當(dāng)在設(shè)計系統(tǒng)中需要更新一個已經(jīng)被廣泛使用的現(xiàn)有圖標(biāo)時，直接替換組件可能會導(dǎo)致潛在的破壞性修改。 Figma 會為每個組件（乃至每個圖層元素）分配一個唯一標(biāo)識符（ID）。因此，即便新創(chuàng)建的組件名稱與舊組件一致，它仍然會生成一個全新的 ID。由于設(shè)計中所有實例都依賴于舊 ID，新組件的引入意味著我們需要逐一在每個設(shè)計中手動替換，顯著增加了維護成本及復(fù)雜性。
若在組件主容器框架內(nèi)替換圖像，其組件 ID 通常不變，因此所有實例之間的綁定關(guān)系依舊會保持。同時，各實例將自動同步更新內(nèi)容。需要注意的是，這種操作可能會對實例中的自定義配色方案產(chǎn)生影響，需額外檢查是否保留了原有的顏色設(shè)置。
當(dāng)形狀僅僅被替換時，顏色將被重置
圖層的名稱在保持不變的同時，每個圖層背后其實還有其獨立的唯一 ID。正如我們前面提到的，對 Figma 而言，這一 ID 不隨圖標(biāo)變更發(fā)生改變至關(guān)重要。而合并選擇功能正是實現(xiàn)這一機制的關(guān)鍵操作：你可以使用合并選擇來為圖標(biāo)形狀創(chuàng)建一個嵌套容器。這樣一來，你無需擔(dān)心可視化效果受到限制，可以自由地在這個容器中調(diào)整圖標(biāo)的形狀而不影響其唯一標(biāo)識。
打包圖標(biāo)有助于避免圖標(biāo)顏色重置
必須從一開始就應(yīng)用此操作，因為如果在重新修改前才進行調(diào)整，而資源圖標(biāo)已被他人使用，此方法將無法奏效。
扁平化筆畫和形狀
通常情況下，圖標(biāo)的設(shè)計會優(yōu)先采用描邊樣式，這能夠幫助你始終保持統(tǒng)一的描邊權(quán)重。同時，在 Figma 工具中還可以靈活應(yīng)用圓角效果，這對體現(xiàn)復(fù)雜圖標(biāo)的精致細(xì)節(jié)尤為高效。然而，如果在最后的圖標(biāo)組件中將描邊樣式保持為動態(tài)描邊，可能會存在一系列與縮放有關(guān)的適配問題：
若采用自適應(yīng)圖標(biāo)，這類表現(xiàn)通常是符合預(yù)期甚至是設(shè)計上必要的。然而，在多數(shù)場景中，圖標(biāo)需按照比例進行精確縮放。另外，當(dāng)導(dǎo)出為 SVG 格式時，特定情況下的圓角效果及不同的描邊對齊方式（如內(nèi)部、外部或居中）可能會引發(fā)不可控或意外的渲染問題。
建議對所有圖標(biāo)的筆觸樣式與幾何形態(tài)進行統(tǒng)一扁平化設(shè)計處理。
很抱歉，這種基礎(chǔ)操作并不總能奏效。在 Figma 中，它只是對視覺效果進行簡化處理，線條依然會保留為描邊屬性。此時，可以利用一個便捷的小技巧：將聯(lián)合選擇器內(nèi)的圖形，嵌套到另一個聯(lián)合選擇器中。然后，對嵌套的外層聯(lián)合選擇器執(zhí)行 扁平化操作，而不是直接處理內(nèi)部的圖層結(jié)構(gòu)。
嵌套包裝器
設(shè)置約束為縮放
最后一步是配置適配性的縮放參數(shù)：需為所有圖標(biāo)層級設(shè)定雙向縮放限制條件：
約束 雙色圖標(biāo)
雙色圖標(biāo)雖不算新鮮元素，但如今已在現(xiàn)代設(shè)計領(lǐng)域中廣泛流行，為網(wǎng)頁和應(yīng)用界面注入時尚前衛(wèi)的視覺效果。2021 年，Apple 通過在 SF Symbols 3 中引入新渲染模式，使 Xcode 支持多彩圖標(biāo)，進一步提升了多色設(shè)計的靈活性與易用性。
https://developer.apple.com/sf-symbols/
然而，高效掌握和使用 SF Symbols 仍具一定門檻。此外，正如前文所提及的，這套圖標(biāo)庫僅適用于 Apple 生態(tài)系統(tǒng)。如果需要針對多平臺統(tǒng)一用戶界面并采用雙色圖標(biāo)方案，可能需要考慮使用諸如 Font Awesome 這樣的開源矢量圖標(biāo)庫（同樣支持雙色圖標(biāo)）?；蛘?，可以通過疊加兩層實現(xiàn)雙色調(diào)手動生成所需 SVG 圖形，從而滿足跨平臺的兼容性需求。
雙色圖標(biāo)，包含 2 個形狀
請注意，如果同時使用單色和雙色圖標(biāo)，切換時可能會出現(xiàn)問題 —— 第二色調(diào)對應(yīng)的圖層配色會被系統(tǒng)初始化。
看完覺得寫得好的，不防打賞一元，以支持藍(lán)海情報網(wǎng)揭秘更多好的項目。
感謝您的支持，我會繼續(xù)努力的!
打開支付寶掃一掃，即可進行掃碼打賞哦
手機直接保存圖片,掃一掃識別二維碼,即可進行掃碼打賞哦
