很可惜 T 。T 您現在還不是作者身份，不能自主發(fā)稿哦～
如有投稿需求，請把文章發(fā)送到郵箱tougao@appcpx.com，一經錄用會有專人和您聯系
咨詢如何成為春羽作者請聯系：鳥哥筆記小羽毛（ngbjxym）
本文探討了在設計系統(tǒng)中維護圖標庫的實用技巧，尤其是針對 figma 用戶的具體方法。文章涵蓋了圖標庫的組織、管理和更新的多種方案，并對字體圖標和 SVG 圖標的優(yōu)缺點進行了對比，同時還提供了一些關于圖標尺寸、自適應圖標和雙色圖標的建議。
圖標是界面設計中不可或缺的核心元素之一。設計師應當構建一個組織嚴謹的圖標庫，便于實現靈活的更新和擴展。同時，針對設計系統(tǒng)而言，在代碼層面建立順暢的圖標更新機制也尤為重要。
很多出色的文章都闡述了圖標的作用，但通常焦點更集中于圖標本身的設計過程。
在這篇文章中，我將探討圖標庫組織的一些關鍵部分，并分享一些實用技巧，以幫助在維護設計系統(tǒng)中的Figma圖標庫時避免出現常見問題。
在使用 Figma 進行設計時，圖標和所有組件應集管理，還是建獨立資源庫？
這兩種方法各有其特點和適用場景。歸根結底，如何選擇關鍵在于團隊規(guī)模及設計系統(tǒng)的成熟性階段。
在團隊規(guī)模較小且設計系統(tǒng)仍處于初步構建階段時，將所有內容集中于一個文件中會更加高效。當設計系統(tǒng)被拆分為多個獨立的 Figma 文件時，設計師在使用過程中可能會遇到復雜性，甚至因適配個人需求額外創(chuàng)建各種庫，這種不統(tǒng)一的分散管理方式可能會加劇混亂局面。
Figma 中的組件庫可能會包含大量內容，組件列表過長時容易導致用戶迷失方向。
與之相對，若團隊規(guī)模較大且具備成熟的流程體體系，獨立維護的代碼庫反而能夠帶來更高的靈活性與適應性：
便捷的權限管理：圖標庫可由專屬團隊獨立維護，大幅提升協(xié)作效率，顯著精簡工作流程。
高效的版本控制：支持為圖標建立獨立的版本管理體系，實現快速回滾和精修迭代。
適配多場景圖標庫：能夠支持面向不同平臺或產品的多套圖標庫設計，通過 Figma 標準化的“替換庫”功能，無縫切換組件與圖標庫的組合應用。
另外，獨立的 Figma 圖標庫能夠顯著提升品牌視覺更新的效率：只要你事先制定好統(tǒng)一的命名規(guī)范，并在庫的每一次更新中始終保持一致（確保舊版圖標與新版圖標具有一對一映射關系），在進行圖標風格調整時，僅需簡單地替換原庫即可。而所有關聯的組件及最終設計稿將自動同步至全新的圖標集合。
字體圖標作為設計領域的一項經典存在，已有數十年的發(fā)展歷史（可追溯至上世紀 90 年代，其最初的商業(yè)化字體符號集問世）。即便在如今多變的設計趨勢中，字體圖標依然占據著重要地位。對很多設計師而言，FontAwesome 是一個耳熟能詳的名字，甚至已經成為實際項目中的日常工具。而在移動端設計領域，Material Symbols（即 Material Design Icons 的字體化版本）備受青睞。與此同時，蘋果的 SF Symbols 也已深度融入其生態(tài)中，被廣大開發(fā)者和設計師所關注與使用。那么問題來了，字體圖標究竟憑什么表現如此出色？它的核心價值究竟是什么？
首要優(yōu)勢在于集成的便捷性：只需安裝所需的字體文件，完整的圖標集便立即可啟用。之后即可通過系統(tǒng)自帶的標準字體管理工具或字體瀏覽器輕松預覽和操作整個圖標庫。
也可以嘗試使用 Figma 插件。這類工具選擇多樣，例如，Symbol Icon Browser 插件高效整合三大主流圖標字體庫，讓字體圖標的查閱和調用流程變得更加便捷流暢。
另外，采用字體格式的圖標庫，在絕大多數場景下，與使用獨立文件（如 SVG）的方式相比，可以實現顯著的體積節(jié)約。在某些特定應用中，字體圖標還能極大提升設計組件的工作效率：由于圖標能夠像純文本一樣被管理，其在縮放和與文本對齊時的操作體驗會更加簡潔直觀，顯著優(yōu)化了設計流程。
圖標和標簽屬于同一文本塊
然而，即便這些方案具備許多優(yōu)勢，我卻觀察到設計師們更傾向于采用獨立的圖像文件作為圖標，并將其整合為一個資源庫。這背后的原因是什么呢？
總結起來，給字體庫添加新圖標并非易事，因此在大多數情況下都會局限于字體庫中現有的圖標資源。盡管這對大多數項目而言已經是綽綽有余，但實際上仍然可以實現擴展，自定義補充新圖標的可能性依舊存在。
舉個例子，如果你正在使用 Font Awesome，可以直接向 Fonticons（即 Font Awesome 背后的開發(fā)團隊）支付額外費用，以在你的圖標庫中新增所需的自定義圖標。
針對 Material Symbols，Google 表示會免費開放獲取。用戶只需通過 GitHub issue 提交需求即可。不過，需滿足一些規(guī)定和條件。
借助 SF Symbols，您可以利用專屬應用高效完成個人化操作與設計。
然而，對于開發(fā)者而言，使用該庫的前提是接受被限定于蘋果平臺的限制，因為這一字體集合在其他操作系統(tǒng)上并不適配。如果你希望擺脫預設字體集合的局限性，可以嘗試利用像 Fontello 這樣的開放性工具，按需生成一套定制化的字體集合，從而更靈活地滿足跨平臺應用的設計需求。
總體而言，將圖標整合到字體集中，相較于直接使用 SVG 文件來說操作相對繁瑣一些。畢竟，使用 SVG 文件時，設計師和開發(fā)者只需在 Figma 內即可完成資源的最終準備用，不需要額外借助其它工具或服務進行加工處理。
如果你追求更高的靈活性——例如賦能設計師自由定制專屬圖標，或希望在代碼里實現圖標的動效優(yōu)化，那么 SVG 無疑是你的不二之選。
從另一個角度來看，如果默認的圖標庫已經能夠全面滿足你的設計需求，或者你的項目專注于單一平臺（例如蘋果），那么選擇使用字體圖標可能會是一個更高效且便捷的解決方案。
隨著顯示技術和設備的演進，圖標設計的尺寸規(guī)格也在不斷調整和優(yōu)化。早期圖標主要為小尺寸、低分辨率的屏幕環(huán)境而設計。隨著大尺寸高分辨率顯示設備的普及，高分辨率圖標設計的需求也應運而生。
為移動設備進行設計時，復雜性顯著提升，特別是在需要考慮不同屏幕密度的情況下。在 SVG 廣泛普及之前，這通常意味著需要為同一個圖標準備多種分辨率的版本。例如，為 Android 設計標準的 24 x 24 基礎圖標時，還需額外生成不同尺寸的資源，以適配各種設備需求：例如 2 倍分辨率的 48 x 48、3 倍分辨率的 72 x 72，甚至包括某些不太常見的比例，如 1.5 倍。
這個問題的核心在于如何為不同屏幕分辨率優(yōu)化同一套圖標，以確保在各種設備上都能夠清晰呈現。隨著 SVG 的流行（直到 2020 年蘋果才在 Xcode 12 中正式支持 SVG 格式），這一挑戰(zhàn)基本上被解決了。不過，我仍偶爾會接觸到采用“傳統(tǒng)工作流”依賴 PNG 格式的項目。然而，在日常的設計實踐中，經常會遇到需要在同一界面中應用不同尺寸圖標的需求，如何協(xié)調它們的尺寸與一致性仍然是設計的難點之一。
大多數情況下，僅對圖標進行縮放就能滿足需求。然而，對于某些圖標，簡單縮放可能會導致美感缺失或無法保持最佳視覺效果。自適應圖標提供了一個全面解決方案，它們根據每種“視覺大小”調整適配的筆畫粗細與圖標樣式，從而確保精準且和諧美觀的展示。一些領先的現代字體圖標集已經支持使用自適應圖標，進一步提升可用性與視覺一致性。
另一種優(yōu)化圖標尺寸的策略是響應式圖標設計。早在 2013 年，Joe Harrison 率先提出了一種根據圖標縮放比例動態(tài)調整其細節(jié)表現層次的技術方法。值得注意的是，他不僅概念化了這一創(chuàng)意，還提供了具備實踐價值的原型解決方案，為業(yè)界實現提供了實操參考。
該項目上線后迅速引爆話題，首日點擊量突破 20,000 次。目前，Smashing Magazine、UX Mag 和 Designmodo 等知名媒體均對其進行了詳細報道，引領設計領域就網站未來在響應式元素（如圖標）應用上的趨勢展開了深層次探討。
該方法的核心痛點在于實現過程的高復雜度。具體而言，它在人力投入上具有極大的挑戰(zhàn)性，因為每個圖標都需要手動適配多種尺寸和精細化程度的版本。這也導致規(guī)范制定的門檻顯著提高——不同的尺寸常常需對應多樣化的網格設計和一系列定制化規(guī)則，使得整體設計流程更加繁瑣復雜。
如果你擁有一支專業(yè)且能快速制作不同尺寸圖標的插畫師團隊，那么選擇響應式圖標設計無疑是一個理想方案，因為它能夠大幅提升整體的用戶體驗質量。
如果你需要獨立維護整個圖標庫（除了維護設計系統(tǒng)外），我更傾向于建議你聚焦于一個單一尺寸，例如 24x24dp 這一標準規(guī)格。
讓我們來看看組織圖標組件最常見的設置：
所有基礎圖標默認設定為一個標準尺寸（例如 24dp），其余規(guī)格則通過按比例縮放得到。。
使用扁平化設計風格，注重描邊和形狀。在進行圖標縮放時，確保描邊寬度隨比例動態(tài)適配是關鍵。每個圖標需制作成獨立的設計組件，方便使用和維護。
最終交付的文件統(tǒng)一采用 SVG 格式。
為確保該設置能夠高效運轉，可參考以下核心指南與實用建議。
一致的層級設置
設計師常常會提出這樣的問題：“在組件中替換圖標后，如何確保其顏色樣式始終保持一致？”
請確保圖標內部的圖層設置規(guī)范統(tǒng)一，包括以下方面：
圖層命名一致性
字母格式（大小寫）保持統(tǒng)一
圖層的數量、結構和排序嚴格對齊
當在 Figma 中替換布局中的組件時，只有在內部結構完全匹配的情況下，實例的自定義屬性才會實現無縫繼承。
在為圖標設定顏色時，真正著色的部分并非組件本身（因為組件僅作為容器），而是其內部的矢量形狀層。否則，帶色彩的圖標看起來就只是一個單獨的有色矩形。值得一提的是，Figma 通過圖層的命名規(guī)則來“記錄”顏色配置信息。換句話說，對 Figma 來說，這相當于一個分配了具體顏色值的「變量」。
在替換圖標的過程中，Figma 會根據新圖標中具有相同變量名的圖層來進行適配。如果變量名無法對應匹配，Figma 將自動使用組件原始設計中設定的默認顏色進行渲染。
Figma 在圖層名稱中區(qū)分大小寫：
還有層的數量和順序：
只有在結構統(tǒng)一時，一切才能夠正常運行：
形狀合并
圖標設計往往是由多個形狀元素相互疊加組成的。如果每個元素都存儲在獨立的圖層中，不同圖標之間的層級數量將會出現差異，這可能會在圖標替換或進一步編輯時引發(fā)操作上的不一致性和潛在問題。
針對這個問題，Figma 提供了一種高效且直接的解決方案——你可以使用“合并選擇”功能，將多個形狀圖層無縫整合為單一對象：
在應用合并功能時，它會將每個形狀保留為獨立的圖層，但整體上又將這些構成的元素視作一個單一的平面化形狀?？梢哉f，合并功能本質上是一種"打包"形式。另外，我發(fā)現這項功能在解決另一類問題時同樣表現出色。
假設你改變圖標的樣式：
通常，圖標會被單獨設計后納入到組件庫中。在需要引入全新圖標的場景下，只需為其設計一個全新的組件并更新至庫中，流程簡潔高效。
當在設計系統(tǒng)中需要更新一個已經被廣泛使用的現有圖標時，直接替換組件可能會導致潛在的破壞性修改。 Figma 會為每個組件（乃至每個圖層元素）分配一個唯一標識符（ID）。因此，即便新創(chuàng)建的組件名稱與舊組件一致，它仍然會生成一個全新的 ID。由于設計中所有實例都依賴于舊 ID，新組件的引入意味著我們需要逐一在每個設計中手動替換，顯著增加了維護成本及復雜性。
若在組件主容器框架內替換圖像，其組件 ID 通常不變，因此所有實例之間的綁定關系依舊會保持。同時，各實例將自動同步更新內容。需要注意的是，這種操作可能會對實例中的自定義配色方案產生影響，需額外檢查是否保留了原有的顏色設置。
圖層的名稱在保持不變的同時，每個圖層背后其實還有其獨立的唯一 ID。正如我們前面提到的，對 Figma 而言，這一 ID 不隨圖標變更發(fā)生改變至關重要。而“合并選擇”功能正是實現這一機制的關鍵操作：你可以使用“合并選擇”來為圖標形狀創(chuàng)建一個嵌套容器。這樣一來，你無需擔心可視化效果受到限制，可以自由地在這個容器中調整圖標的形狀而不影響其唯一標識。
必須從一開始就應用此操作，因為如果在重新修改前才進行調整，而資源圖標已被他人使用，此方法將無法奏效。
扁平化筆畫和形狀
通常情況下，圖標的設計會優(yōu)先采用描邊樣式，這能夠幫助你始終保持統(tǒng)一的描邊權重。同時，在 Figma 工具中還可以靈活應用圓角效果，這對體現復雜圖標的精致細節(jié)尤為高效。然而，如果在最后的圖標組件中將描邊樣式保持為“動態(tài)描邊”，可能會存在一系列與縮放有關的適配問題：
若采用自適應圖標，這類表現通常是符合預期甚至是設計上必要的。然而，在多數場景中，圖標需按照比例進行精確縮放。另外，當導出為 SVG 格式時，特定情況下的圓角效果及不同的描邊對齊方式（如內部、外部或居中）可能會引發(fā)不可控或意外的渲染問題。
建議對所有圖標的筆觸樣式與幾何形態(tài)進行統(tǒng)一扁平化設計處理。
很抱歉，這種基礎操作并不總能奏效。在 Figma 中，它只是對視覺效果進行簡化處理，線條依然會保留為描邊屬性。此時，可以利用一個便捷的小技巧：將聯合選擇器內的圖形，嵌套到另一個聯合選擇器中。然后，對嵌套的外層聯合選擇器執(zhí)行 “扁平化操作”，而不是直接處理內部的圖層結構。
設置約束為“縮放”
最后一步是配置適配性的縮放參數：需為所有圖標層級設定雙向縮放限制條件：
雙色圖標雖不算新鮮元素，但如今已在現代設計領域中廣泛流行，為網頁和應用界面注入時尚前衛(wèi)的視覺效果。2021 年，Apple 通過在 SF Symbols 3 中引入新渲染模式，使 Xcode 支持多彩圖標，進一步提升了多色設計的靈活性與易用性。
然而，高效掌握和使用 SF Symbols 仍具一定門檻。此外，正如前文所提及的，這套圖標庫僅適用于 Apple 生態(tài)系統(tǒng)。如果需要針對多平臺統(tǒng)一用戶界面并采用雙色圖標方案，可能需要考慮使用諸如 Font Awesome 這樣的開源矢量圖標庫（同樣支持雙色圖標）?；蛘撸梢酝ㄟ^疊加兩層實現雙色調手動生成所需 SVG 圖形，從而滿足跨平臺的兼容性需求。
請注意，如果同時使用單色和雙色圖標，切換時可能會出現問題 —— 第二色調對應的圖層配色會被系統(tǒng)初始化。
本文為作者獨立觀點，不代表鳥哥筆記立場，未經允許不得轉載。
《鳥哥筆記版權及免責申明》 如對文章、圖片、字體等版權有疑問，請點擊 反饋舉報
我們致力于提供一個高質量內容的交流平臺。為落實國家互聯網信息辦公室“依法管網、依法辦網、依法上網”的要求，為完善跟帖評論自律管理，為了保護用戶創(chuàng)造的內容、維護開放、真實、專業(yè)的平臺氛圍，我們團隊將依據本公約中的條款對注冊用戶和發(fā)布在本平臺的內容進行管理。平臺鼓勵用戶創(chuàng)作、發(fā)布優(yōu)質內容，同時也將采取必要措施管理違法、侵權或有其他不良影響的網絡信息。
一、根據《網絡信息內容生態(tài)治理規(guī)定》《中華人民共和國未成年人保護法》等法律法規(guī)，對以下違法、不良信息或存在危害的行為進行處理。
1. 違反法律法規(guī)的信息，主要表現為：
1)反對憲法所確定的基本原則；
2)危害國家安全，泄露國家秘密，顛覆國家政權，破壞國家統(tǒng)一，損害國家榮譽和利益；
3)侮辱、濫用英烈形象，歪曲、丑化、褻瀆、否定英雄烈士事跡和精神，以侮辱、誹謗或者其他方式侵害英雄烈士的姓名、肖像、名譽、榮譽；
4)宣揚恐怖主義、極端主義或者煽動實施恐怖活動、極端主義活動；
5)煽動民族仇恨、民族歧視，破壞民族團結；
6)破壞國家宗教政策，宣揚邪教和封建迷信；
7)散布謠言，擾亂社會秩序，破壞社會穩(wěn)定；
8)宣揚淫穢、色情、賭博、暴力、兇殺、恐怖或者教唆犯罪；
9)煽動非法集會、結社、游行、示威、聚眾擾亂社會秩序；
10)侮辱或者誹謗他人，侵害他人名譽、隱私和其他合法權益；
11)通過網絡以文字、圖片、音視頻等形式，對未成年人實施侮辱、誹謗、威脅或者惡意損害未成年人形象進行網絡欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法規(guī)禁止的其他內容；
2. 不友善：不尊重用戶及其所貢獻內容的信息或行為。主要表現為：
1)輕蔑：貶低、輕視他人及其勞動成果；
2)誹謗：捏造、散布虛假事實，損害他人名譽；
3)嘲諷：以比喻、夸張、侮辱性的手法對他人或其行為進行揭露或描述，以此來激怒他人；
4)挑釁：以不友好的方式激怒他人，意圖使對方對自己的言論作出回應，蓄意制造事端；
5)羞辱：貶低他人的能力、行為、生理或身份特征，讓對方難堪；
6)謾罵：以不文明的語言對他人進行負面評價；
7)歧視：煽動人群歧視、地域歧視等，針對他人的民族、種族、宗教、性取向、性別、年齡、地域、生理特征等身份或者歸類的攻擊；
8)威脅：許諾以不良的后果來迫使他人服從自己的意志；
3. 發(fā)布垃圾廣告信息：以推廣曝光為目的，發(fā)布影響用戶體驗、擾亂本網站秩序的內容，或進行相關行為。主要表現為：
1)多次發(fā)布包含售賣產品、提供服務、宣傳推廣內容的垃圾廣告。包括但不限于以下幾種形式：
2)單個帳號多次發(fā)布包含垃圾廣告的內容；
3)多個廣告帳號互相配合發(fā)布、傳播包含垃圾廣告的內容；
4)多次發(fā)布包含欺騙性外鏈的內容，如未注明的淘寶客鏈接、跳轉網站等，誘騙用戶點擊鏈接
5)發(fā)布大量包含推廣鏈接、產品、品牌等內容獲取搜索引擎中的不正當曝光；
6)購買或出售帳號之間虛假地互動，發(fā)布干擾網站秩序的推廣內容及相關交易。
7)發(fā)布包含欺騙性的惡意營銷內容，如通過偽造經歷、冒充他人等方式進行惡意營銷；
8)使用特殊符號、圖片等方式規(guī)避垃圾廣告內容審核的廣告內容。
4. 色情低俗信息，主要表現為：
1)包含自己或他人性經驗的細節(jié)描述或露骨的感受描述；
2)涉及色情段子、兩性笑話的低俗內容；
3)配圖、頭圖中包含庸俗或挑逗性圖片的內容；
4)帶有性暗示、性挑逗等易使人產生性聯想；
5)展現血腥、驚悚、殘忍等致人身心不適；
6)炒作緋聞、丑聞、劣跡等；
7)宣揚低俗、庸俗、媚俗內容。
5. 不實信息，主要表現為：
1)可能存在事實性錯誤或者造謠等內容；
2)存在事實夸大、偽造虛假經歷等誤導他人的內容；
3)偽造身份、冒充他人，通過頭像、用戶名等個人信息暗示自己具有特定身份，或與特定機構或個人存在關聯。
6. 傳播封建迷信，主要表現為：
1)找人算命、測字、占卜、解夢、化解厄運、使用迷信方式治?。?br /> 2)求推薦算命看相大師；
3)針對具體風水等問題進行求助或咨詢；
4)問自己或他人的八字、六爻、星盤、手相、面相、五行缺失，包括通過占卜方法問婚姻、前程、運勢，東西寵物丟了能不能找回、取名改名等；
7. 文章標題黨，主要表現為：
1)以各種夸張、獵奇、不合常理的表現手法等行為來誘導用戶；
2)內容與標題之間存在嚴重不實或者原意扭曲；
3)使用夸張標題，內容與標題嚴重不符的。
8.「飯圈」亂象行為，主要表現為：
1)誘導未成年人應援集資、高額消費、投票打榜
2)粉絲互撕謾罵、拉踩引戰(zhàn)、造謠攻擊、人肉搜索、侵犯隱私
3)鼓動「飯圈」粉絲攀比炫富、奢靡享樂等行為
4)以號召粉絲、雇用網絡水軍、「養(yǎng)號」形式刷量控評等行為
5)通過「蹭熱點」、制造話題等形式干擾輿論，影響傳播秩序
9. 其他危害行為或內容，主要表現為：
1)可能引發(fā)未成年人模仿不安全行為和違反社會公德行為、誘導未成年人不良嗜好影響未成年人身心健康的；
2)不當評述自然災害、重大事故等災難的；
3)美化、粉飾侵略戰(zhàn)爭行為的；
4)法律、行政法規(guī)禁止，或可能對網絡生態(tài)造成不良影響的其他內容。
二、違規(guī)處罰
本網站通過主動發(fā)現和接受用戶舉報兩種方式收集違規(guī)行為信息。所有有意的降低內容質量、傷害平臺氛圍及欺凌未成年人或危害未成年人身心健康的行為都是不能容忍的。
當一個用戶發(fā)布違規(guī)內容時，本網站將依據相關用戶違規(guī)情節(jié)嚴重程度，對帳號進行禁言 1 天、7 天、15 天直至永久禁言或封停賬號的處罰。當涉及欺凌未成年人、危害未成年人身心健康、通過作弊手段注冊、使用帳號，或者濫用多個帳號發(fā)布違規(guī)內容時，本網站將加重處罰。
三、申訴
隨著平臺管理經驗的不斷豐富，本網站出于維護本網站氛圍和秩序的目的，將不斷完善本公約。
如果本網站用戶對本網站基于本公約規(guī)定做出的處理有異議，可以通過「建議反饋」功能向本網站進行反饋。
(規(guī)則的最終解釋權歸屬本網站所有)