前言

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

譯文：

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

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

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

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

△ Components in Figma by Rasmus Andersson

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

Fgima是如何為我節(jié)省時間的？讓我們看看傳統(tǒng)的設(shè)計過程和Figma設(shè)計過程的對比。

設(shè)計過程對比

1. 傳統(tǒng)設(shè)計過程

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

2. Figma設(shè)計過程

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

換一種說法，就是你可以從一開始就使用components來畫線框圖，當(dāng)你這么做時，在線框圖確認(rèn)后，你需要做的就只是更新components。這將會把他們從一開始的簡單的幾何形狀變成細(xì)節(jié)完善的設(shè)計組件，這樣就完美的把線框圖變?yōu)橐粋€高精質(zhì)量原型了。

具體怎么做呢？

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

1. 創(chuàng)建線框圖

在這一步之前，你應(yīng)該在紙上畫過草稿了，在這之后，現(xiàn)在是時候?qū)⑺麄冏優(yōu)閿?shù)字化的線框圖了。

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

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

△?Every text style is a component

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

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

△?My Airbnb UI library

用這個方法建立所有的組件，比如：Buttons, Inputs, Dropdowns, Navbars, Cards, Labels, Footers等等。我一般先在屏幕中設(shè)計這些組件，用頁面需要的內(nèi)容來創(chuàng)建，然后再拖進UI庫中，將其變?yōu)榻M件，最后再拷貝回頁面中。

△?My Airbnb wireframes

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

2. 為線框圖添加交互

在你做好線框圖，創(chuàng)建好UI組件庫之后，現(xiàn)在應(yīng)該為線框圖添加交互了。幸運的是，F(xiàn)igma可以非常輕松的做到這一點。

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

△?Making the wireframes interactive

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

3. 設(shè)計體系風(fēng)格化

一旦你的可交互的線框圖被確認(rèn)后，現(xiàn)在可以創(chuàng)建風(fēng)格化的設(shè)計體系了。在這一步中，你向UI組件庫中建立的Component加入品牌設(shè)計原則、顏色和設(shè)計細(xì)節(jié)等等，然后就可以將你的線框圖轉(zhuǎn)變?yōu)橐粋€高質(zhì)量的設(shè)計原型了。

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

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

△?A basic UI library for Airbnb

4. 精打細(xì)磨

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

△?My Airbnb prototype

最終的原型完成！現(xiàn)在你可以發(fā)送鏈接給老板得到最終的確認(rèn)了，然后，將其交付給開發(fā)人員，告訴他們?nèi)绾螐腇igma下載圖片，同時告訴他們還可以直接在原型上標(biāo)注問題。

△?Adding a comment on the prototype

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

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

歡迎關(guān)注作者微信公眾號：「彩虹BOOK」