建立設計組件庫時，要將其當作屬于自己的項目或者產品，去定位、規劃、與相關人員溝通、設計、開發、跟蹤和迭代。

前段時間，我在兩個設計師交流群和一些設計BBS發現了同樣的問題：

有設計師根據目前主流的設計系統（比如Ant Design等），設計出了適合自己公司產品的設計組件庫，但是設計方案給到前端工程師時，才得知：目前產品的前端框架是基于VUE的，或者更老一點的前端框架，所以現階段使用React的Ant Design設計系統不合適。

當時發現這個問題之后，就想分享一點我個人在公司建立設計組件庫的經驗，幫助那些要給公司建立設計組件庫的朋友們。

所以，本文將從「項目思維」的角度，分享如何在公司從0-1建立「設計組件庫」。

首先，要明確一點：如果我們承擔起了建立「設計組件庫」這項工作，則需要將它當成一個屬于自己的項目或產品，去規劃、設計、開發、跟蹤。在職場里，資源會向「有想法、有目標、有擔當」的員工傾斜。有了這種項目經理的認知，我想你在建立設計規范的道路上成功邁出了第一步。

下面是具體的幾個步驟：

一、明確目標和用戶

目標：統一產品體驗、提升協作效率、迭代技術框架。

所以，能滿足上述目的的設計組件庫，才是一個真正意義上的設計組件庫，因為，完整的組件庫不僅僅是Axure元件庫、Sketch Symbol等設計軟件的組件，而是要深入到開發層。

簡單點說，我們做的Axure和Sketch組件，工程師需要將它們封裝成代碼層的組件，才能提升從設計到開發的協作效率。相反，如果只是設計軟件層面的組件，是無法從本質上達到設計組件庫的目標的。

說完目標，我想你已經知道設計組件庫的用戶是誰了：設計師、工程師、甚至產品經理。

二、提前與關鍵人溝通

關鍵人1：領導或老板

我們在職場里，只要是自己主動想做一點事，首先必須要獲得領導的認同和支持。因為不僅是從上下級關系的角度，還是人力資源的角度考慮，如果得不到領導的支持，那幾乎是很難搞定一件事情的，畢竟話語權和資源分配權在領導手里。

所以，首先要和領導說清楚現階段做設計組件庫的意義和好處，特別是對部門和他的好處。至于溝通的技巧，可以參考我的這篇文章《兩個步驟，提升你的溝通能力》。

當然，有時候領導出于對時間、人力成本的考慮，會告訴你目前公司的項目進度和團隊規模，還不需要急著做「設計組件庫」。遇到這種情況，我個人認為設計師也別太勉強了，我們自己先將設計軟件層面的設計組件做好，然后和領導說下：雖然現在不做，但希望工程師在開發過程中留個心，這些組件以后是要形成前端組件庫的。

如果要說服老板答應做這件事，思路如下：

1. 設計組件庫能提高協作效率。具體大家都知道，我不啰嗦了。（這是站在研發效率和時間成本的角度）
2. 設計組件庫能成為公司的技術資產，新同事來公司后可以快速調用和上手，就算有同事離職，也不會對產品的整體體驗造成影響。（這是站在公司招聘成本的角度）
3. 設計組件庫可以讓產品體驗統一，有助于公司建立統一的產品品牌認知，方便銷售和運營包裝、運營、策劃產品方案。（這是站在銷售運營部門的角度）

總之，要讓老板覺得：雖然老板可能不知道什么是設計師組件庫，但聽你這么一說，覺得不做這個是對公司的損失，確實要考慮做。

關鍵人2：前端工程師

職場里人人都希望被尊重、被提前告知，而不是突如其來的需求，特別是勤勤懇懇、任勞任怨的工程師（大多數），如果沒有前端工程師，我們的設計組件庫就是PNG。

所以，在開工前，一定要和那個技術不錯的前端工程師聊聊做設計組件庫的事情，其中最重要的是確定好：選擇什么樣的前端框架。

如果組件庫服務的是B端或者中后臺系統，那其實有很多可參考的開源組件框架：Ant Design、ElemetUI、Layui等，注意不同的框架用到的前端技術不一樣，兼容的瀏覽器版本也不一樣，這要根據你們技術情況作選擇。

如果覺得開源框架的風格和你們的產品不統一，那就需要二次設計和開發封裝。

關鍵人3：研發主管

如果你的領導既管產品設計，也管研發，那恭喜你，溝通成本就會很小。如果前端工程師的領導不是你的領導，那最好讓你的領導幫忙去和前端工程師的領導溝通好，畢竟你要用到研發部門的人力資源。

如果兩個部門領導之間溝通不暢，那問題就比較復雜了。這時候除非你是設計Leader，否則我不太建議你去強推設計組件庫這件事。

關鍵人4：設計師、產品經理

這里的設計師指的是需要輸出設計組件庫設計稿的設計師，如果需要其他設計師的幫助，也是要提前溝通好的，設計一家親，有了設計組件庫，大家有福同享嘛。

至于產品經理，基本上從他的角度去告知他一下就可以了，產品經理比較關心產品的統一體驗，產品研發進度等，所以有了設計組件庫，體驗和效率的問題會有效提升。

BTW：如果你一人既會設計、又會前端、也會前后端聯調，那請忽略前2個步驟。

三、立項啟動

搞定了目標、用戶、前端技術、關鍵人之后，我們需要把「設計組件庫」當成一個項目去運作，而我們自己就是項目經理，帶領關鍵人從0-1建立設計組件庫。

在和關鍵人都溝通確認好之后，寫一封項目啟動的郵件，把背景、意義、目標、責任人、相關資源、里程碑計劃、風險等信息寫清楚，這就算把這個項目啟動了。

四、小步快跑，組織評審

先將常用的組件輸出設計文檔，然后讓工程師評審確認一下。設計組件可以小步快跑，快速迭代，不要急著一次迭代完。

五、時刻溝通，關注進度

一般情況下，「設計組件庫」這項工作的優先級應該是公司里比較低的，工程師通常會在項目閑暇時間做這件事，所以時刻保持與工程師的溝通，維護好人際關系，關注你的項目進度。

六、應用與測試

當前端工程師封裝好組件庫后，就可能會應用在近期的開發里，待到測試時，我們自己要記得測試組件庫的可用性。

七、孵化產品，迭代組件庫

當設計組件庫投入使用后，我們需要時刻關注組件的適用性和優化，已有的組件能否滿足新的業務需求等等。就像迭代產品一樣，迭代設計組件庫。

總結

1. 全鏈路是視角和思維的全鏈路

所謂的全鏈路設計師，我認為是視角和思維上的全鏈路，也就是能站在上下游各角色的角度，審視和推動自己的設計工作。真正的有實力，是能在有限的資源里，把工作做出色，用小成本實現大價值。

2. 做不出來，怎么辦？

如果思路對了、方法對了、盡力溝通了，前端工程師也盡力開發了，最后因為時間、成本等因素沒做出來，怎么辦？

我想說，其實結果已經不重要了。雖然沒收獲最終成果，但在這過程中收獲了團隊的信任、老板的關注、自己的經驗。老板和同事能看到我們的全局思考和工作方式，甚至是領導力。雖然今天沒成，但以后如果有機會，老板可能會第一個想到你。
事實上，實際工作中的情況要比本文描述的復雜很多，如果你在實際推動工作中有問題，歡迎與我交流。

#專欄作家#

王晗陵，微信公眾號：設計意志（ID：D-Minder），人人都是產品經理專欄作家。關注交互/UI設計領域及職場能力，擅長需求分析、用戶體驗和原型設計。

本文原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議