Welcome to Figma classroom — 五十人協力的設計實驗!
Collaboration, iteration, design pipeline in Figma and FramerWeb
十月中收到大學老師的邀請，希望我能回到交通大學帶 IOC 5179: User-Centered Interaction Design Fall 2019 這門課的 hi-fi prototyping 單元。
課中主要介紹 Figma 跟提到一點 FramerWeb 這兩個設計工具，並在 Figma 上用遊戲化的方式帶領學生從初步認識 UI、Atomic Design、iOS/Android Guideline、到製作 Prototype。當中所發生的對話、互動、與我自己對於設計工具的心得是這個文章主要想記錄的，附上文章段落:
- 為什麼要製作 Prototype，到底誰有需求
- 🎨 課程介紹與挑選工具考量
- 🕹 遊戲化團體學習模式
- 👨🏻🏫 實作、觀察、與心得
P.S. 課程素材在此: 講義投影片 / 課程關卡檔案 / 課程 Prototype 範例，本篇文章閱讀時間約十分鐘。
Lichin 的個人文章搬新家了，歡迎拜訪 🙌
https://designtips.today/articles前言: 為什麼要製作 prototype，到底誰有需求?
開始工作後就體會到了 80/20 法則，有時候一個需求提出進入提案、討論就佔據了約八成的資源和時間，包括產品部門、設計師、工程部門的溝通會議，其中畫面呈現的風格、外部使用者測試、可行性評估都需要讓大家了解且能夠 align 在一起。透過 Prototype，可以有效限制想像確保大家認知一至，提早發現問題、驗收假設，我想這是它在進實際開發前的使用目的。
🎨 課程介紹與挑選工具考量
交大這門由 張永儒Yung-Ju Chang 老師開的 User-Centered Interaction Design 是以使用者經驗為中心的團體課程，學生組成有交大、清大、成大，系所則跨越資工系、應藝所、服科所…組成背景多元是這門課的特色，在討論上會有更多種觀點跟思維脈絡; 但另外一個角度，因為系所、年級、修課時間的差異，學生間很難同時出現在同一個地點開會。
綜合以上，多人協作、跨作業系統的工具是主要考量點，以及對於學生有永久免費的方案，我選擇了 Figma。如果好奇 Figma 在業界的使用流程情境，歡迎服用 Jasmine Lin 的工具介紹文:
一大清早就搭著公車從台北下去新竹，回到老師的課第一個被嚇到的是，教室又裝潢的更漂亮了（誤）大約十點後整個教室就坐滿了人，其實心裏蠻緊張的，沒有助教卻要帶將近五十人的實作課程還是有難度。
給了簡單自我介紹後，就讓大家從 Figma 官網註冊並進入今日課程的專案裡。只能說 Figma 讓加入的門檻降到幾乎為 0，超過半數的學生不到三分鐘就透過信箱註冊成功進入我的專案裡了。
🕹 遊戲化團體學習模式
在製作 Prototype 之前的暖身就是要先…學會使用這個設計工具! 由於我也是第一次使用多人協作的功能，所以在正式進入 User Interface 前跟大家玩了些小遊戲，透夠畫筆與評論兩個功能，學生很快就發現這個工具方便的地方，即時多人在網頁上的共編就跟 Google Doc 使用起來沒什麼兩樣:
通過了第一個練習，大家因為能互相察看對方在做什麼，有些人就更專注於表現自己所建立的物件，這好比遊戲化機制中的 創造和回饋（Empowerment of Creativity & Feedback），互相激勵的方式會比講師一個個去提醒、檢查來得有效果，同時也會在過程中，出現新鮮又跳躍的創意:
如第二個練習: 建立單色圓形與方形。這個任務主要是想要調查這們課的學生組成，由每個學生自己建出一個形狀後，拖曳進去相對應的代表區塊內 (大約有 90% 交大生 / 10% 清大生…等等)。當我回去檢查的時候，各種漸層、圓形內嵌入校狗圖片、模糊文字 的元件四散，雖然教室快失控了，但同時算達成目的，甚至在達成目的外，看到了不少同學有趣的嘗試。
簡單圖形元件上手後，開始說明 User Interface 在建立時需要優先思考的顏色、字級、風格與模組化問題，有系統的建立，能提升回頭修改時所耗費的工時，也能統一管理這些元件 (components)。
介紹系統化的同時，也給學生兩大手機系統的介面素材，幫助稍後小組練習可以不用什麼都從零打造，基於這些元件可以更快的建立簡單的頁面。
另外，我也附上網羅世界各地手機 app 流程截圖的素材網，一個特色是它能搜尋特定 Patterns/UI ，譬如手機的登入(Login)、提醒(Alerts & Reminders)流程或是側邊欄(Sidebar)、對話框(Dialogs)設計。
這裡個人還蠻喜歡 Figma 整理元件的方式，透過側邊欄左上方 Assets tab 可以查看目前 Local file、以及使用外部第三方 Library components 的狀況。
Get Started with Prototyping
把元件組合成 wireframe 後就該讓他們動起來，從 Lo-Fi paper prototype 轉成數位化最常做的就是實現手勢行為與轉場動畫。Figma 目前支援 Click, Hover, Drag 等常用的手勢，轉場則有 move/push/slide 等等目前多數 app 上面會有的行為，貼心的小圖動畫可以讓學生更快知道這些轉場的運作方式為何，搭配各自希望的情境，很快就可以套用到流程裡。
Polishing the Details
Figma 於十月的大更新: Smart Animate，讓設計師可以更快速套用簡單的行變動畫，讓同一元件在不同頁面的轉場更自然。這個功能在目前實用性上偏向展示性質，畢竟設計師若不能自由操作，也無法完整解釋其中動畫原理給工程師的話，這個多出的好處反而增加了溝通的成本。
不過講到這邊我已經快超時，所以給學生只是點到並且 demo 一下就讓大家進入小組練習的階段了:
👨🏻🏫 實作、觀察、與心得
從 10:25 上到 11:45 稍作休息後就依本學期分組進行實作到 12:30，有些同學帶著前次作業的 Paper Lo-Fi 當作練習，很快就分工下去打造 Prototype。
自己在上完整堂課程後心裡其實也是替他們擔心，畢竟用不到兩小時從 0 開始介紹元件到 prototyping 涵蓋太多內容，有很多細節只能快速帶過，但這也是個測試 Figma 使用情境的實驗:
- 不受限於作業系統，多人即時編輯讓團隊可以無阻礙地專注於協作。
- 基本的圖形建立與元件模組化功能，讓設計有系統，省時省力。
- Prototyping 能立即分享，方便後續進行易用性測試(Usability test)。
第三點尤其重要，如果使用設計工具做完 Prototype 卻不能交到使用者手上做測試，那就等於白做了。在課前我準備了參考 GoShare 租借車流程的 Prototype (我稱它為 GoRent，然後裡頭租借的是汽車😂)，Figma 的分享功能十分方便，分享給他人的同時可以透過右上方點選你想查看的使用者。透過 觀察者模式 (Observation Mode) 加上螢幕錄製，可以把進行易用性測試的受測者的受測流程記錄下來。
下一步是…?
小組練習時下去四處看看，有些同學的想法中包含相對複雜的操作如: 使用者與相機互動、行事曆事件更新的流程…等等，當他們問我 Figma 是否可以達成，我回答: 想要實作就需要更進階、更耗時製作的工具。
實作結束後的總結裡，我提到了上述問題，當今天想做地圖互動、表單填寫、有邏輯控制的流程時，僅用靜態 Prototype 是無法實現的。個人推薦使用 ProtePie 與 Framer 這兩套工具去完成更複雜的使用情境:
ProtoPie 有針對 Figma 做完整的支援，匯過去後就可以進一步設計; Framer 則是提供原有的設計方式上加上直接撰寫程式碼，雙軌並行讓他的進入門檻很高，但相對 Prototype 就沒有什麼極限了，想知道詳細 Framer 的特色可以參考我在上完美國 Framer 課程後的心得:
另外想知道 Framer 的趨勢也歡迎看看我去荷蘭官方年會的筆記，尤其今年底到明年，FramerWeb 就快正式問世，相信設計工具挑選上會有更多選項:
課後補充
📌 有關編輯權限與學生方案
Figma 在分享檔案時有 Viewer & Editor 兩種分享模式，透過後者連結加入的人才有編輯權限。但是已經「歸檔」的檔案會有 Editors 的上限😓
這裡歸檔指的是，側邊欄下方可以建立 Team，在 Team 裡面的 Project 是有編輯人數上限的 (附圖中有 lichin, NCTU 兩個 Team)，使用免費方案每個 Team 僅能有三個 Project 與兩名 Editor。
若想要像我在課程中讓將近五十人一起操作的話，需要把檔案拖曳到側邊欄 Drafts 資料夾中，或是開啟該檔案從檔名旁邊的下拉選單，找到 Move to project… 選項搬到 Drafts。脫離 Team 回到 Drafts 的檔案就像未歸檔一樣，這時候想分享給多少人編輯都可以。
上述的方式可以讓多於兩人同時編輯，但壞處是檔案如果臨時需要修改就要在 Team Projects 跟 Drafts 資料夾反反覆覆搬移。
不過也請別擔心，Figma 很照顧學生，只要使用學校信箱認證你的帳號就會有 Student Plan (相當於 Professional plan) ，每個建立的 Team 能新增的 Project 與 editor 都沒有上限。
但這也是有相對應限制：一但個人使用學生方案，後續邀請的其他 Editor 也都需要是使用學生方案，這個限制算是把企業跟學生完全切開來了。
📌 建立 Library 與專案引用
這段學生在課後有提問，因此在這個段落紀錄:
1.欲建立 Library 檔案: 檔案裡面至少有一個 components，接著上方標題旁的小 icon 開啟下拉選單，點選 “Publish Styles & Components” 就會開始輸出 Library 的流程了:
2.欲使用 Library 檔案: 要在其他的檔案使用 Library 也很方便，開啟其他檔案後，側邊欄點選 Assets 找到書本 icon，點擊後會出現多個屬於你的 Library，找到剛剛建立的那個後 active 即可享用！
P.S. Starter plan 無法建立 components Library，但可以建立 styles Library，簡單來說:需要完整元件庫就需要升級至 Professional plan/ Student plan。
小結
很開心兩年後能回到，這門當初啟蒙我認識 user experience 的課程授課，中間備課的時候準備了很多想分享的東西，雖然實作工具挑選上不是採用業界主流，我自己的流程認知可能也跟公司裡設計團隊做事的模式不同，但還是由衷希望這些實驗性的東西能被學生吸收並實際發揮用途。
畢竟兩三年後進入職場，
你們也能是改變設計文化的那群人呢！ (笑
