Figma 初學者會這些就可以開始玩了！ - Vanessa (@vanessalai)

5/ 善用模板和icon 素材. 如果你不是要做設計師，其實不用太糾結美醜問題，尤其在初期溝通時，wireframe 的呈現重點應該是在 ... UIDesign自學設計FigmaFigma初學者會這些就可以開始玩了！發布於2021年6月14日翻譯分佈式入口不會設計軟體的人，第一次打開Figma應該有點不知所措，希望這篇新手流程，給你一點信心！在摸索Figma之前，我可是連Photoshop、illustrator都不會啊。

這篇就是想用簡單的步驟，幫你快速建立手感～1/選裝置、拉個方形首先在左上方，點個看起來像井字鍵的Frame，右上方就會出現一排手機裝置的大小，比如我的是iPhone8Plus選個手機開始做吧！ 接著拉個方形出來，快捷鍵按R，方形下方也可以用線條或別的形狀可以玩～學會方形超重要，是手機介面的資訊或圖片欄位，也是製作按鈕的最基礎！至於旁邊的T，應該看得出來是拉文字框用的，就跟做簡報差不多，在右排也可以選字型、設定大小～ 2/做出圓角和上色把方形弄出來了，要怎麼做出按鈕的外型？在方形內部點一下會顯示四角的圓點，按住圓點往內縮，就會有圓弧出現啦～ 在右排的Design欄位可以看到，圓弧的角度變成40，從這邊更改數字也可以喔！ 幫方形換個顏色，在Fill這邊點開，找自己想要的顏色，或是套用色碼。

3/設定元件和常用色有了前兩步，應該就可以做出有字的按鈕造型了，試著把形狀和字都一起選取起來，然後按正上方的四個菱形，就是設成一個元件（Component）的意思，這樣要設計好幾個頁面的相同按鈕時，就可以直接用這個元件囉！（記得在左排修改方便自己辨識的命名） 貫穿在每一頁會有統一要用到的品牌主要、次要顏色，不用每次重新複製色碼，可以把常用的顏色在Fill這邊按＋號並命名，之後要套用顏色就可直接選～（Textstyle整理常用字型也是一樣作法） 4/做出可互動的原型要讓你的頁面連接起來、按鈕可以點擊，就需要在工作區的右排，從Design切換到Prototype，移到你要增加互動設計的位置，點一下就會出現＋號，拉著箭頭到要連接的頁面就可以啦，別忘了返回到上一頁也要連喔！ 5/善用模板和icon素材如果你不是要做設計師，其實不用太糾結美醜問題，尤其在初期溝通時，wireframe的呈現重點應該是在資訊架構和使用流程是否符合需求，過於細節的視覺元素反而會讓討論失焦。

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

官方有提供各種模板素材包，或是參考figma社群提供的各種UIkit，閒暇時多觀察別人為何這樣設計的方式，可能會比直接讀設計規範更有效率地吸收。

比如我之前發想IG貼文時其實就是有用到這個模板給我的靈感。

更細節的應用技巧，Figma都有課程教學影片，不習慣英文的話，也推薦我有在上Hahow的「產品設計實戰：用Figma打造絕佳UI/UX」課程。

不過我之前是搭配UX觀念在學的，並沒有打算繼續深入學習UI設計，所以問我太專業的技巧問題，我恐怕無法回答XD希望以上幾個簡單步驟可以幫到有興趣入門的朋友，接下來就多學多玩啦，加油！支持作者喜歡我的文章嗎？別忘了給點支持與讚賞，讓我知道創作的路上有你陪伴。

馬特市大都會博物館，歡迎愛看書、看展、看好設計的人來相聚～ 🌟當期特展｜感受經濟學FeelingEconomyCCBY-NC-ND2.0版權聲明23412看不過癮？一鍵登入，即可加入全球最優質中文創作社區登入