前言

當我開始使用Figma時，就想充分利用軟件特性重新規劃設計流程，正好看到這篇設計經驗，我覺得很有幫助，分享給大家。Medium上獲贊超過3K的熱門文章，為你的下個項目省下90%的時間。

譯文：

近一年，我開始用Figma來做UI/UX設計過程，這為我節省了很多工作時間，它真正的改變了我的設計流程。

Figma有非常符合直覺的使用體驗，除此之外，我喜歡它的原因還有：這是一條非常完整的工作流，我可以用它來做所有的設計過程：線框圖、設計稿、設計體系、圖標庫、原型和溝通合作。

我不想說服你一定要使用Figma，相反，我想向你展示如何通過簡單的技巧在下個項目中節省時間。

這就歸功于Figma的一個重要功能：Components（組件）.

△ Components in Figma by Rasmus Andersson

Figma中的Components和Sketch中的Symbols非常相似，但是Figma中的Components更靈活易用。

Fgima是如何為我節省時間的？讓我們看看傳統的設計過程和Figma設計過程的對比。

設計過程對比

1. 傳統設計過程

傳統的設計過程一般是先在一款app中設計線框圖原型，然后在其他軟件中做UI設計，比如說Sketch，最后用其他軟件交付研發。這個交互過程并不友好，很浪費時間，而且在線框圖和最終交付的原型圖之間差別較大。

2. Figma設計過程

在Figma中，你可以跳過前面2步直接創建可交互的線框圖，同時創建一個UI庫，最后更新你先前創造的UI components就可以了。

換一種說法，就是你可以從一開始就使用components來畫線框圖，當你這么做時，在線框圖確認后，你需要做的就只是更新components。這將會把他們從一開始的簡單的幾何形狀變成細節完善的設計組件，這樣就完美的把線框圖變為一個高精質量原型了。

具體怎么做呢？

這里有一些具體的步驟可供參考。

1. 創建線框圖

在這一步之前，你應該在紙上畫過草稿了，在這之后，現在是時候將他們變為數字化的線框圖了。

在你開始畫界面之前，你要做的第一步是創建一個UI框架庫，這是一個讓你可以重復利用UI組件和設計原則的地方。

你首先要創建的是文字樣式，分別為各類文本創建一個組件：H1、H2、H3、H4、P、Small等，用這個標題字體就可以，先不用過多的考慮設計樣式。

△?Every text style is a component

現在，在屏幕中添加文本的時候，必須從UI組件庫中調取相關的文本。為什么？因為當你進行到設計階段的時候，如果你想要修改所有界面的文本效果，你就可以一次性在組件庫中修改，然后所有內容就都會跟著變化了。

這個概念適用于所有組件。

△?My Airbnb UI library

用這個方法建立所有的組件，比如：Buttons, Inputs, Dropdowns, Navbars, Cards, Labels, Footers等等。我一般先在屏幕中設計這些組件，用頁面需要的內容來創建，然后再拖進UI庫中，將其變為組件，最后再拷貝回頁面中。

△?My Airbnb wireframes

在項目結尾時，所有在你設計稿中的元素都應該是一個個Component，這不僅是為了節省工作時間，更是為了保持產品的一致性，這在UI/UX設計中是非常重要的一點。

2. 為線框圖添加交互

在你做好線框圖，創建好UI組件庫之后，現在應該為線框圖添加交互了。幸運的是，Figma可以非常輕松的做到這一點。

你只需要在Prototype模式下，將元素拖動到它需要鏈接的頁面中就可以了。記住如果鏈接到一個原始組件下，那么所有的拷貝項都會應用同樣的鏈接，示例如下。

△?Making the wireframes interactive

下一步就是將可交互的線框圖拿給老板們看，在prototype上直接獲取反饋和意見。

3. 設計體系風格化

一旦你的可交互的線框圖被確認后，現在可以創建風格化的設計體系了。在這一步中，你向UI組件庫中建立的Component加入品牌設計原則、顏色和設計細節等等，然后就可以將你的線框圖轉變為一個高質量的設計原型了。

△?A style change on a component applies on all its instances

我喜歡提前向老板們展示一些設計規范，在給他們看所有的設計圖之前就針對設計風格來獲取反饋，我還喜歡添加一些UI組件在上面，讓他們看看這些組件是怎么組合設計的。

△?A basic UI library for Airbnb

4. 精打細磨

一旦設計風格和規范被確認了，就剩下更精確的打磨UI交互了。接下來需要確認每個元素都在相應的位置，每個交互都鏈接到正確的頁面。而且有些元素可能不是組件，也同樣需要精細化設計，或者需要補充到組件中。確保原型可以正常交互，并且確保所有的鏈接都正常運轉。

△?My Airbnb prototype

最終的原型完成！現在你可以發送鏈接給老板得到最終的確認了，然后，將其交付給開發人員，告訴他們如何從Figma下載圖片，同時告訴他們還可以直接在原型上標注問題。

△?Adding a comment on the prototype

你也可以通過分享公共鏈接來測試你的設計原型，從用戶那里獲取反饋。

就是這么簡單！希望我的設計過程可以幫助你在下一個項目中節省時間。

歡迎關注作者微信公眾號：「彩虹BOOK」