Figma 初學者會這些就可以開始玩了!

Vanessa
·
·
IPFS
·
不會設計軟體的人,第一次打開 Figma 應該有點不知所措,希望這篇新手流程,給你一點信心!

在摸索 Figma 之前,我可是連 Photoshop、illustrator 都不會啊。這篇就是想用簡單的步驟,幫你快速建立手感~

1/ 選裝置、拉個方形

首先在左上方,點個看起來像井字鍵的 Frame,右上方就會出現一排手機裝置的大小,比如我的是 iPhone 8 Plus 選個手機開始做吧!

接著拉個方形出來,快捷鍵按 R,方形下方也可以用線條或別的形狀可以玩~
學會方形超重要,是手機介面的資訊或圖片欄位,也是製作按鈕的最基礎!

至於旁邊的 T,應該看得出來是拉文字框用的,就跟做簡報差不多,在右排也可以選字型、設定大小~

2/ 做出圓角和上色

把方形弄出來了,要怎麼做出按鈕的外型?在方形內部點一下會顯示四角的圓點,按住圓點往內縮,就會有圓弧出現啦~

在右排的 Design 欄位可以看到,圓弧的角度變成 40,從這邊更改數字也可以喔!

幫方形換個顏色,在 Fill 這邊點開,找自己想要的顏色,或是套用色碼。

3/ 設定元件和常用色

有了前兩步,應該就可以做出有字的按鈕造型了,試著把形狀和字都一起選取起來,然後按正上方的四個菱形,就是設成一個元件(Component)的意思,這樣要設計好幾個頁面的相同按鈕時,就可以直接用這個元件囉!(記得在左排修改方便自己辨識的命名)

貫穿在每一頁會有統一要用到的品牌主要、次要顏色,不用每次重新複製色碼,可以把常用的顏色在 Fill 這邊按+號並命名,之後要套用顏色就可直接選~(Text style 整理常用字型也是一樣作法)

4/ 做出可互動的原型

要讓你的頁面連接起來、按鈕可以點擊,就需要在工作區的右排,從 Design 切換到 Prototype,移到你要增加互動設計的位置,點一下就會出現+號,拉著箭頭到要連接的頁面就可以啦,別忘了返回到上一頁也要連喔!


5/ 善用模板和 icon 素材

如果你不是要做設計師,其實不用太糾結美醜問題,尤其在初期溝通時,wireframe 的呈現重點應該是在資訊架構和使用流程是否符合需求,過於細節的視覺元素反而會讓討論失焦。

而且很多常見的 icon 其實已經有現成的可以用了,比如 Google 提供的 icon 資料庫,選你需要用的下載 SVG 檔,再上傳到 figma,可以再修改顏色和大小 。

官方有提供各種模板素材包,或是參考 figma 社群提供的各種 UI kit,閒暇時多觀察別人為何這樣設計的方式,可能會比直接讀設計規範更有效率地吸收。比如我之前發想 IG 貼文時其實就是有用到這個模板給我的靈感。




更細節的應用技巧,Figma 都有課程教學影片,不習慣英文的話,也推薦我有在上 Hahow 的「產品設計實戰:用Figma打造絕佳UI/UX」課程。不過我之前是搭配 UX 觀念在學的,並沒有打算繼續深入學習 UI 設計,所以問我太專業的技巧問題,我恐怕無法回答XD

希望以上幾個簡單步驟可以幫到有興趣入門的朋友,接下來就多學多玩啦,加油!


CC BY-NC-ND 2.0 授权

喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!