為了提升設計系統在組織內的采用率，我所在的團隊騰訊云設計團隊研發了 Figma 插件——如意設計助手，支持使用代碼組件庫進行設計；支持 Design tokens 最佳實踐落地，Figma 內輕松切換主題與深淺模式；連接團隊設計資產，自動化交付圖標組件；交付對開發人員友好的組件代碼。

更多設計插件：

TDesign 是騰訊各業務團隊在服務業務過程中沉淀的一套企業級設計體系，具有統一的價值觀，一致的設計語言和視覺風格，幫助用戶形成連續、統一的體驗認知。在此基礎上，TDesign 提供了開箱即用的 UI 組件庫、設計指南 和相關設計資產，以優雅高效的方式將設計和研發從重復勞動中解放出來，同時方便大家在 TDesign 的基礎上擴展，更好的的貼近業務需求。

TDesign 提供了開箱即用的 UI 組件庫、設計指南和相關設計資產

一、設計系統實踐過程中遇到的挑戰

TDesign 作為一個龐大的設計體系對于設計提效具有巨大的價值，但其也同樣面臨設計系統建設中的挑戰。

①設計價值觀、設計規范的執行依賴于業務團隊設計人員的個人素養。設計價值觀作為設計系統的核心，對指導設計、設計決策起到關鍵作用，隨著維護團隊的人員變更、外部用戶的陸續使用，如何低成本地保證設計價值觀的持續一致性，是眾多設計系統面臨的重要問題。如果僅依靠個人素養，一旦產生破窗效應，設計價值觀和設計規范將很難保證。

②伴隨設計系統的迭代，組件庫更新與文檔更新不能保證同步。當下大部分的設計系統其設計資產、規范文檔、UI 組件庫等分屬多個團隊或多個源進行維護和管理，多源管理必然導致更新不一致，甚至部分數據會滯后誤導用戶，造成使用中不必要的麻煩。對于長期迭代的設計系統，多源管理幾乎是災難性的。比如設計師調整某個 Design Token 的值，并不能及時通知到下游 UI 組件庫的調整。

③設計師與開發工程師在設計系統中的工作是脫節的。設計系統建立之后，設計師在設計工具中使用設計系統元素（如 Design Tokens、設計組件）進行設計時，不能很好地表達設計邏輯，或者說表達效率低下。以 Figma 為例，設計師如果要表達與代碼組件一樣的狀態，需要提前花費大量的資源創建 Figma 組件，比如 TDesign 的按鈕組件，變體多達 1801 個。但對于組件嵌套性的業務場景這個工作量指數增長，甚至無法表達。

TDesign Button 組件變體多達 1801 個

針對設計系統建設中的挑戰，我們團隊研發如意設計系統平臺（如意 DSM），通過中心化存儲、工程化流程、工具化處理，幫助設計系統更好地落地。如意 DSM 包含組件代碼解析工具、設計系統管理端與設計工具插件（下文將要介紹的如意設計助手）等部分，整個系統從以下兩個方面著力解決設計系統建設中面臨的問題。

①確保唯一事實源。以設計樣式為例，設計師統一維護設計樣式文件，服務端存儲其鏈接，所有樣式數據從該文件解析出來并標準化存儲供下游 UI 組件庫、規范文檔消費。一旦文件變動，中心化存儲的數據相應更新并通知下游消費者，及時保證變更的一致性。

設計樣式唯一事實源

②基于代碼組件的設計。本著代碼為設計系統第一公民原則（即代碼執行結果為最終效果），抽取代碼庫中組件的信息，構建代碼組件到設計工具中 UI 的一一映射，無論是設計師還是其他角色均可通過基于代碼庫構建的 UI 快速創建原型，并便捷修改組件狀態。

基于代碼組件做設計（屬性與代碼組件一致）

二、如意設計助手是什么？

如意設計助手是一款設計工具（Figma）插件，其內部通過 HTML To Figma 轉換器，將代碼組件渲染為 Figma 組件；同時，在渲染的過程中注入組件狀態數據到圖層，利用 Figma 與插件的通信機制，讓用戶快捷、方便地編輯組件狀態屬性，以切換組件在 Figma 中的顯示。如意設計助手作為設計系統元數據的下游消費者，貫徹（代碼）組件化、Token 化設計理念，讓設計系統不僅僅停留于知識沉淀，而是通過設計系統元數據驅動上層業務設計、下游開發。

插件安裝地址：

1. 社區版： https://www.figma.com/community/plugin/1192146318523533547
2. 即時設計社區版：https://js.design/community

三、如意設計助手有哪些特色?

1. Components：使用代碼組件做設計，支持組件嵌套與多層級屬性編輯

設計助手支持使用與開發者構建產品相同的代碼組件庫做設計，簡單拖拽組件和配置組件屬性即可獲得規范化的視覺表現。

Code-to-Design 流程

如意設計助手支持接入業務 React 組件庫，目前預置騰訊公司級前端 UI 組件庫 TDesign 和騰訊云的 TeaUI 組件庫。免去手動創建 Figma Design UIKit 的繁瑣工作，設計團隊無需浪費時間來維護 UIKit 與代碼組件庫保持同步，更加專注于研究出色的用戶體驗。

①組件編輯

對于組件編輯，如意設計助手提供以下三個重要功能點：

1. 修改組件內容
2. 修改組件狀態
3. 修改組件結構

從組件面板拖拽組件到 Figma 畫布中，或者選中畫布中已有組件時，組件面板自動切換至 Design 界面，您可以進一步編輯或調整組件屬性，畫布將即時更新設計組件，具體操作如下圖所示：

②表單設計

表單是中后臺管理系統中常見的設計模式，雖然 TDesign 提供了表單的設計組件，但基本上為原子組件，加上 Figma 組件特性的功能性、靈活性有限，設計師仍需要花費大量時間和精力來拼搭表單。

根據表單設計模式和設計師的操作習慣，如意設計助手支持自由的添加、刪除、拖動排序表單項；輕松設置表單布局、對齊方式和狀態；表單類型可在文本框、下拉列表、單選框、復選框、日期選擇器等多種表單元素間便捷切換；組件屬性支持下鉆式編輯，從表單到表單項到表單原子元素，可層層配置屬性，可在短時間內快速配置出一個包含多類表單元素和狀態的表單。即使您在畫布中選中表單元素圖層，設計助手會聯動的跳轉到對應組件的配置面板，便于對組件屬性做再次調整。

具體操作如下圖所示：

2. Design Tokens：支持最佳實踐落地，輕松切換主題與深淺模式

Design tokens 是設計系統自定義主題和設計流程自動化的基礎。Token 是存儲視覺設計屬性的命名實體。我們使用 token 來代替硬編碼值，以便為 UI 開發維護一致且可擴展的視覺系統。但是目前的設計工具無法全面支持 design tokens 實踐，在 Figma 中僅有 Color、Text 和 Effect Styles，無法使用 Border Radius、Spacer 等其他常用 token。僅依靠這三類 Styles 來組織和實現具有深淺模式、多主題的設計系統，是非常棘手的難題。（注：Figma 剛發布 Dev Mode 新特性，支持自定義顯示審查面板，使用 Design Tokens 更好地連接設計與開發）

我們遵照 W3C 社區小組制定的《Design Tokens Format Module》標準文件格式，按照最佳實踐的三層結構（基礎類 - 語義類 - 組件類）組織方式，為 Design Tokens 維護一個"唯一可信數據源"。通過插件可突破 Figma Styles 的單層引用限制，輕松調用設計系統的 Design Tokens 做設計，實現設計稿在深淺模式、主題間自由切換。

①使用 Tokens 做設計

設計助手可根據當前選擇的 Figma 圖層類型自動推薦相關類型的 Tokens 供您選擇，減少干擾。當您編輯矩形圖層時，助手會推薦顏色、陰影、邊框、圓角等樣式 token，而文本圖層則會推薦顏色、typography 等樣式 token。相應的，在「Code」面板中的生成 CSS 代碼中，會使用對應 CSS 變量值，而非硬編碼值。

具體操作如下圖所示：

②一鍵切換組件庫主題與深淺模式

為了適應更多的應用場景，設計系統一般都提供深淺模式和多套主題。設計師在特定主題下完成設計后，如果需要在其他主題或模式下預覽效果，手動調整一遍效果會浪費很多時間。

設計助手可以輕松實現效果切換。選中「Frame」類型的圖層，切換「Design」面板內的主題后，所有組件都將一鍵切換至對應的主題。任何新建或移動到該 Frame 上的組件都會自動跟隨該 Frame 的主題。

3. Icons: 連接團隊設計資產，自動化交付圖標組件

插件「社區版」采用 React Icons 項目資源，其中涵蓋了包括 Material Design、Remix、Tabler、Feather 等在內的 29 個流行的開源圖標庫。而「內網版」則連接了騰訊云圖標庫，其中包含了4.5萬+ 的業務圖標、品牌LOGO和網絡開源圖標庫等素材。用戶只需一鍵拖拽，即可生成 Figma 矢量資源，并隨意編輯。

此外，插件「內網版」提供自動化交付圖標組件的能力。從設計師完成圖標設計，到最終交付給業務開發者使用，其中間過程的多項耗時任務，助手可以幫您完全自動化執行，涉及任務有：創建工蜂項目、創建與申請合并請求、執行 CI 流水線生成 React 組件、更新說明文檔、發布新版本 NPM 包、企業微信通知相關人等。

圖標自動化交付流程

圖標自動化交付流程界面

4. Code: 交付對開發人員友好的組件代碼

通常，設計師與前端開發是基于不同的「組件庫」工作，設計師使用設計組件庫，而開發使用前端組件庫，兩者對組件屬性的理解與定義可能存在不一致，就會增加前端開發對設計稿的理解成本和映射成前端組件的轉譯偏差。

設計師與開發基于不同的「事實來源」工作

我們采用「code-to-design」的方法，通過插件用代碼組件做設計，免除制作設計組件庫，統一設計、開發的組件來源。同時插件還提供「design-to-code」能力，使開發人員可以直接獲取組件代碼。插件在渲染組件的同時將相關的狀態數據寫入圖層，并在審查組件代碼時基于組件圖層保存的狀態數據生成 AST（抽象語法樹），并最終在 Code 面板上輸出對應的組件代碼。

以上簡要介紹了如意設計助手的核心功能，歡迎安裝我們的插件體驗更多的功能。目前，插件已經在 Figma 和即時設計社區上架。

我們將持續提升產品設計中高頻設計模式的設計效率，如列表、表格、圖表、表單、布局等；探索借助 AGI 的能力，使用自然語言智能化生成產品界面的實踐方式。同時，我們通過建設如意設計系統平臺（如意 DSM），提升業務團隊自助式便利化接入、管理自有設計系統的能力，將支持從 Figma 設計庫、NPM 及代碼倉庫中導入組件、design tokens，并與這些數據源保持同步，為我們的插件提供唯一的數據來源。

如果您在使用過程遇到任何問題，歡迎在評論區交流反饋。