如何使用Figma簡化UI / UX工作流程

如何使用Figma簡化UI / UX工作流程

如何使用Figma簡化UI / UX工作流程,教程,彩虹BOOK,翻譯文章站酷網,中國設計師互動平台。

譯文:

近一年,我開始用Figma來做UI/UX設計過程,這為我節省了很多工作時間,它真正的改變了我的設計流程。
Figma有非常符合直覺的使用體驗,除此之外,我喜歡它的原因還有:這是一條非常完整的工作流,我可以用它來做所有的設計過程:線框圖、設計稿、設計體系、圖標庫、原型和溝通合作。
我不想說服你一定要使用Figma,相反,我想向你展示如何通過簡單的技巧在下個項目中節省時間。
這就歸功於Figma的一個重要功能:Components(組件).

Components in Figma by Rasmus Andersson

Figma中的Components和Sketch中的Symbols非常相似,但是Figma中的Components更靈活易用。
Fgima是如何為我節省時間的?讓我們看看傳統的設計過程和Figma設計過程的對比。

設計過程對比

-

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

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”,Thanks!

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。