【經驗分享】Figma 產品設計工作坊
從 0 到 1 的產品設計入門與 Figma 實作教學
你好！這是設計烏邦圖的經驗分享系列，設計烏邦圖未來希望紀錄一些設計相關的主題，目前想到的包括產品設計與管理/設計策略與營運/未來設計職涯/新科技與設計趨勢，敬請期待！在今年三月中時，我收到 Reborn 設計學院 Elise 的邀請前往中央大學講授一場 UIUX 產品設計的工作坊，我將內容劃分產品設計的入門講座 + Figma 的實際操作演練，並且在工作坊的最後出了一道介面設計的題目交由學生分組去執行。這次的分享滿有趣的一點是，大部分的參與者是財金系的大學生，也有少部分是就讀研究所，大多是沒有設計經驗或是對於產品設計師這個角色沒太多概念，因此教學上我要更提醒自己很多專有名詞要額外解釋，工具的操作上也要循序漸進，算是滿有趣的經驗。
產品設計核心概念
工作坊的前半個小時，我快速解釋了一些設計的觀念，包括 UI & UX 的定義和 Design Thinking 的流程說明，也推薦了一些我當時轉職成設計師時看過的書籍。另外我也提到設計師在職場中所扮演的角色，以及 Figma 在實際設計工作流程中可以扮演的角色。
Figma 最大的特點應該是網頁版操作以及即時協作，加上操作容易上手，因此用來做腦力激盪、流程規劃、介面設計、原型製作都非常的適合。也難怪 Figma 在去年的 UX 工具調查中包辦了幾乎所有設計流程中的項目 (User Flows、UI Design、Prototyping、Handoff、Design Systems、Versioning)
Figma 基礎介紹與介面設計練習
介紹完產品設計的基本認識後，就開始進入實際操作 Figma 的環節，教室雖然是用 Windows XP 但只要瀏覽器打得開就有辦法使用 Figma (笑)。這個部分主要在介紹 Figma 的工作環境，包括基礎工具像是形狀、顏色、文字等介紹，也講解了一下 Figma 比較特別的 Frame 和 Group 的群組概念。我把 Group 比喻為黏土揉在一起，物件被 Group 起來後縮放就會一起變形，相較之下 Frame 比較像是把東西放進抽屜，物件被放到 Frame 裡面後即使 Frame 再怎麼移動縮放他也頂多是位置會變化。
這個階段我也邀請同學們運用所學到的基礎工具，來製作一張個人的自我介紹名片。老實說實作時間比我想像中的還要長，大家都很賣力的想要把自己的名片設計好，不知不覺中也慢慢熟悉了 Figma 的操作。
午餐過後我們進入了進階的操作課程，這個階段我主要介紹了元件（Component）和自動排版（Auto Layout），並且運用一些實例來操作給大家看，過程中實作了一個可以切換狀態的按鈕元件，以及臨摹 YouTube App 的影片清單介面。這個環節原本也要預留時間讓大家找一個介面去做臨摹，但有鑒於發現大家操作會花特別多時間而先省略掉了，不過在進入到分組作業時間前，我也介紹了三個我認為很實用的 Plugin 幫助大家操作時可以更省時間：Material Design Icons 用來快速置入 Icons、Unsplash 用來貼上各種圖片、Lorem ipsum 用來放入假字到介面中。
分組作業與呈現
工作坊的最後一個環節，是分組作業的時間，我出了一道題目是關於製作一個音樂 App 的兩個畫面：歌單頁面與播放頁面。整個過程大概一個鐘頭多，同組的學生們會分兩隊製作兩個畫面，搜集靈感的同時也要嘗試用 Figma 的協作功能一起製作介面。這個作業不要求做得多精美，主要是要大家練習課堂中學到的實作技巧，盡可能的發揮創意，並嘗試解釋自己的設計理念，其實有點像是讓同學練習當個產品設計師是什麼樣的感覺。
以下是五組同學們的作品呈現，每一組都有一些有趣的巧思，我相信透過作業也能幫助大家對 Figma 的實際操作有更深刻的認識！
小結
這次算是我第一次準備設計工具實作的工作坊，熟悉設計工具只是成為設計師的第一小步，更重要的還是設計相關的基礎觀念以及團隊協作等各種軟實力，因此這次的工作坊也有帶入一些設計核心概念的介紹，幫助學生從更宏觀的角度去了解設計的流程以及工具扮演的角色。這次回想起來時間的掌控上還算順利，有即時調整每一個段落所需要的時間，之後也許需要依照參與者的程度給予不同挑戰，才不會讓內容顯得太簡單或太困難。總之，感謝 Reborn 與 FinxChance 的合作才有這次的活動，希望學生也能透過這次的學習更知道設計師這個角色在職場上的定位與發展，以及對 Figma 的操作上有更進一步的認識。
謝謝你的閱讀！如果喜歡這篇文章，歡迎追蹤設計烏邦圖，也可以幫忙轉貼分享這篇文章，或是純粹幫我拍拍手鼓勵鼓勵也行👏👏👏，希望有一天能和你聊聊設計！
