快速了解Figma進階五大功能

Figma超方便的自動排版功能Auto Layout

這功能算是Figma裡面最重要的功能,以往在排列設計元素時,都需要手動一個一個去調整,但Auto Layout這功能可以根據你的內容物,自動作延伸以及排列,省去許多手動調整的時間。

將數個設計元素框選起來後,按下Shift+A,就會變成自動排列,再利用屬性調整,可以自動橫排或是直排,並且可統一調整元素之間的間距,達到設計版面的一至性。

另外Auto Layout常常會搭配Constraint來使用,在作響應式網頁時非常的方便。

figma_auto layout
Figma_auto layout
figma_auto layout
Auto Layout設定

了解Figma裡的設計元件Component

設計元件的相關基礎設定

Figma裡面的組件實際上會有兩個元素:

1.元件本體 – Components
2.元件分身 – Instance

這兩個元素,有一些因果關係跟特性,需要先了解:
1.元件本體Style變化會影響分身,但是分身變Style化後,元件本體Style改變就無法影響分身
2.分身若有變化,可將變化後的Style重置,但分身可變化的屬性只有:文字、填色、筆畫、效果、尺寸
3.分身可交換不同的分身元件
4.已經成為本體的元件無法再恢復,但分身元件可以

元件的使用時機,在於需要大量修改設計的時候,例如:畫面上有許多的Button,若想要統一置換顏色,就可以利用元件的特性,一次性的修改。

所以通常我們會先設計的元件本體,然後複製分身,放置在各個設計畫面裡頭,這樣若有需要大量修改,只要修改本體,分身就會統一的修改。然而,我們也可以針對元件分身做變更,變更時並不會影響元件本體。

在實際操作上,通常會開一個新的頁面,把所有的元件本體放進去,統一管理。另外,散佈在各頁面裡的分身元件,可以利用面本上的按鈕,找到本體,進而做修改。

figma_components
figma-Components特性

元件變數(Component Set Variants)的使用

若一個元件裡面有不同的狀態,就可以設為不同的變數。通常會用在有不同狀態的Button,變數之間的取名不可以重複,若重複介面上就會顯示錯誤的訊息。

利用這個方式,可以大量減少元件的數量,利用變數去替換。

figma_components set
Component Set as Variants

元件庫(Library)的使用

如何上傳和維護元件庫?
設計師只需要將已經完成的元件和樣式放置一個檔案中,然後可以根據當前的文件已有的元件和樣式直接建立共享元件庫,只需要在Assert的Library入口進入元件庫介面,通過元件庫介面中的上傳(Publish)功能,完成上傳,團隊成員就可以獲得該元件庫內容。

後續維護元件庫的工作,只需要在該文件上進行修改和完善,隨後回到Library窗口進行更新。

如何使用團隊成員已上傳的元件庫?
在Library介面,團隊已公開元件庫會以List的形式展開,設計師只需要從面板裡面挑選,點擊或著是拖拉到畫面裡,即可調用該元件庫的內容,如:元件,顏色樣式,字體系統等。

Figma_Library

善用Figma網格系統

Grid System

在數位產品中,我們會遇到許多不同的螢幕尺寸,而網格系統可以幫助我們在設計版面的時候,有一個版面規範可以遵循。

利用網格系統,就可以更好的去對齊畫面裡所有的設計元素,讓所有的畫面更有一至性。

另外,在交付時,也可以讓工程師在開發的時候,更清楚的要怎麼針對不同的裝置尺寸去做設定,進而減少許多溝通上的成本。

8 Point Grids

業界主流的8pt網路間距可以更好的幫助我們快速的做出設計決策,讓設計有一定的規則可循,更可以減少我們和工程師溝通的時間,在設計除錯時也能更精準。

figma_ grid system
Grid System

打造Figma設計系統 (Design System)

顏色系統 (Color System):

設計系統的目的在於建立起良好的規範,定義好之後,會讓整體的設計風格一至,進而可以發佈成共享樣式,讓團隊的其他成員也可以運用得到。

通常會定義以下幾種設定:

主要色(Primary Color):通常會是品牌色,並使用在重要文字或是主按鈕上
次要色(Secondary Color) : 通常使用在提示訊息或次要文字按鈕上
輔助色(Complementary Color) :其他訊息以及相關輔助按鈕或是標籤(Tag)
警告色(Alert) : 通常用在錯誤訊息或警告操作上

在定義色彩的時候,要記得不要設定太多的顏色,避免整個產品看起來花花綠綠的,通常主色就是品牌色或是公司的代表色。

命名原則:
顏色類型 / 顏色名稱 
Primary / Blue
Secondary / Green

若不知道怎麼樣去設計顏色系統,可去參考一些現有的設計系統,例如:ios-Human Interface Guidelines Andriod- Google Material Design , Ant Desing…等等。

figma_color system

文字樣式系統 (Text System):

文字系統樣式設定,會稍微複雜一點點,但是只要掌握好規則,之後就可以順利上手。

文字樣式設計的重點:
1.字體家族一定要先選定,通常英文設定:Roboto,中文設定:思源黑體
2.一開始可設定H1~H6常用的文字樣式,粗細不要太多種(2~3種),隨著設計頁面的增加,再去做調製增減
3.需要設定的樣式:字型(Font-Family),大小(Font-Size),粗細(Font-Weight),行高(Line-Height)
4.行高建議設定為1.4 (140%)-1.6(160%)倍的字級,如果是大標(超過24px),可以考慮用小一點,例如:1.25(125%)倍得行高
5.Figma裡面有針對文字作彈性的調整,例如:對齊方向,容器寬高,顏色樣式,對於想要精確的間距,一定要善用容器寬高這項功能。

text_system

文字樣式只要整理起來再搭配色彩樣式,產品的整體設計風格就會非常的一致,在這個部分,需要大家多花點心思去整理設計系統,之後如果要更改, 就可以快速的變換,另外工程師在實作的時候,也可以根據你定義的樣式,快速地去做一些設定。


Figma教學相關系列文章

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

相關文章

UIUX設計師如何因應AI人工智慧的到來

UIUX設計師如何因應AI人工智慧的到來?

在這個快節奏的工作環境裡,UIUX設計師每天都得應對各式各樣的事情,像是處理設計截止日期、應付不斷變化的用戶需求,還有跟上科技的飛速更新。

但是,隨著人工智慧技術的蓬勃發展,我們似乎正站在一個轉捩點:AI的興起即將徹底改變UIUX設計的工作方式和流程。

閱讀全文 »
Adobe firefly Image 3

Adobe Firefly Image 3 : AI創意新境界

AI生成進展飛速,Adobe 在今年四月底 Adobe Max 2024大會上宣佈推出 Firefly Image 3, 這是Adobe自己開發的第三代圖像引擎,生成的能力相比半年前推出的 Firefly Image 2 有了明顯的提升,就讓我們來看看Firefly Image 3有哪些新的特點

閱讀全文 »