用 Figma 開始製作第一個 Prototype | Proto Uncle #EP1

Proto Uncle,給設計師、產品經理學習製作 UI Prototype 的系列分享活動。透過 Figma + Framer,將腦中所構思的想法、互動操作具體呈現出來。每週的 Proto Uncle 包含有實作練習、小撇步、以及額外讀物,期待暑假過後,完成系列分享的你將會對 Prototyping 更熟稔 🍺 。

💡 Intro

前言

UI 設計師為何要 prototyping (原型製作) 呢? 每個人目的可能不太一樣,這裏分成兩個角度來看:

  1. 具現化設計想法: 在設計師之間互相討論、進行易用性測試時,可以透過實際操作介面給其他人具體了解你的想法。
  2. 工程可行性評估: 跟工程師溝通時可以展示轉場效果細節、操作邏輯,有了實際討論的素材,工程師可以在可行性評估上做出更好的判斷。

Prototyping 在設計師的工作環節裡面扮演重要的角色,掌握工具並能快速、順暢的做出 Prototype 可以讓你在溝通討論上有更好的表現。在系列的前半段 (4 週),我們會先專注使用 Figma 製作各式各樣的 Prototype。

📌 貼心小提醒: Proto Uncle 專注於 Prototype 的可行性跟實作流程,對於 UI 中的平衡、美感、風格不會太深入去做說明。各位讀者請對於設計的樣式從寬,感謝 🍵

今日目標: App Store like Animation

製作類似 iPhone App Store 的卡片展開/關閉效果,點擊卡片本身與返回按鈕可以觸發動畫

📚 Lesson

各位讀者應該對 Sketch 不陌生吧! (畢竟都點進這篇文章看到這裡了 😅 )

Figma 是一個擁有 Sketch 功能,再結合類似 Google doc 的使用場景,允許多人同時共編、檔案直接存放雲端空間的工具,跨平台的特性讓 Mac, Windows, 甚至 Linux 的成員都可以一同在網頁上編輯,設計出來的成果也能透過一個 link 直接分享出去,是不是十分方便呢,要看更多 Figma 介紹、使用心得可以點此 👉 Figma — 異軍突起的設計協作神器 by Jasmine

figma-intro 好,拉回到 Lesson。首先請先到 Figma 申辦一個帳號,個人推薦使用 gmail 來註冊,大約一分鐘就能辦好! 辦好後會有一些簡單 onboarding 提示你上手 Figma,有耐心的讀者可以先把流程走完。

Figma 本身除了 Prototype 外還有很多強大功能,這些讀者朋友可以在 DesignTipsToday 上慢慢探索。辦好帳號後請點這裡連到今天的練習檔案,透過右上角的 "Duplicate" 你可以複製一份檔案到自己的 Draft Folder,並從 Draft Folder 打開檔案。

打開後請從左側選擇 #1 Start Page,並在右側選擇 Prototype 的分頁標籤: ep1-change-page

切到 Prototype 分頁後,會進入 Prototype 編輯模式

這個模式下點擊任何物件後 (ex: 黃色方形) 邊框會出現小圓球,點下後會拖曳一條箭頭,持續按著讓箭頭連到隔壁滿版黃色 Frame 即完成一個事件,這個連結代表: 點擊黃色方塊後,頁面會從 Main 轉到黃色滿版 Frame 2,你可以透過右上角的三角形播放鍵開啟 Prototype Preview 頁面:

ep1-link-first

讓人尷尬的是,轉到滿版頁面沒有辦法回到上一頁,這時候你需要回到設計稿加工一下,另外建立一個點擊事件,讓 Prototype 在滿版時可以按返回按鈕回到前一頁:

ep1-link-first-back

恭喜你 🎉 一個最基本的流程完成了,接下來請你分別連上全部的方塊,並觀察點下 Main Frame 裡的顏色方塊時,右手邊 Animation 設定項出現的選項: Instant / Dissolve。將動畫的方式改成 Dissolve 後,下方還會出現動畫進行的方式、動畫時間,各位可以從設定下方預覽畫面看到調整不同參數後的動畫,請花點時間探索看看 🌝 ep1-link-animation

學會 Smart Animate,讓你事半功倍

如果回到文章開頭看範例版本,你會發現不管是 Instant 或是 Dissolve 都不是我們需要的 Animation 行為。來回多按幾次你會注意到轉換頁面時,色塊面積會以一定速度延展/收回,這種補足中間形變的動畫效果叫做 Smart Animate ,各位讀者可以試改 Animation 選項再到 Preview 操作看看。

Smart Animate 是 Figma 推出的進階場小幫手。轉換頁面時,前後兩個 Frame 裡擁有一樣名字的元件,顏色/大小/透明度...等等的數值都會有相對應的動畫方式處理,這讓設計師只需要做好前後兩個 Frame 裡的設計,並讓元件的名稱對上,剩下的,就交給 Figma 來自動幫你做 Transition。

以我們的範例來說,不同的 Frame 裡各自有命名為 "Rectangle 1" 的黃色方塊,只是兩者樣貌有些不同。只要名字一樣,並將動畫轉場效果設為 Smart Animate,物件的形狀、顏色都會以自然的方式做改變。 ep1-figma-smart-animate

目前 Smart Animate 支援的數值轉換類型有下列:

  • Scale: 元件的長度/寬度差
  • Position: 元件的位置變化
  • Fill: 顏色變化
  • Opacity
  • Rotation

回家作業

大家不妨對色塊 (如果你有發現他們的名稱分別是 Rectangle 1, Rectangle 2...) 做些數值改變,再比較看看 Smart Animate 是怎麼去做轉場動畫的。如果你已經大致了解運作機制,試著挑戰下面的 Prototype,練習怎麼增加更多元素到頁面裡 😎

📌 Tips for you

文章裡提到的 Frame 是什麼呢?

  • Frame 有將元件 Grouping (群組) 起來的效果,但同時又有更多實用的功能,其中一個就是作為 Prototype 時的頁面單位。想知道更多 Frame 的特性點此 ep1-slide0
  • 在設定 Prototype 流程時,點擊 Frame 本身(容器) 與 Frame 內的元件,都能觸發換頁的效果,但沒有放在 Frame 裡面的落單物件則不能設定這些效果。 ep1-slide1 ep1-slide2

照顧 Prototype preview 時的每個細節

  • 在 Prototype preview 模式時按下 Z 可以進行不同模式的縮放,不用再忍受惱人的尺寸過大破版問題!
  • 覺得 Prototype preview 看起來不真實又呆板嗎?在編輯模式右邊設定列裡面可以設定背景色跟手機容器 (提示: 這次設計稿 Frame 尺寸參考 Google Pixel 2 XL) ep1-slide3

🍜 Today's Special

其實 Figma 還有未正式公開的 Community Beta 版本,只要填寫此表單送出申請,應該在幾個工作天後會收到升級的信件。未公開開放的 Community 功能各位讀者可以想成一個交友社群、接收 Trending 的管道,在上面你可以探索到世界各地的設計師、使用大家提供的開源設計稿 (親愛的,全部都你的,免費)

接下來的分享會不時提到 Community 功能,因此我鼓勵大家在一開始就先申請,以免日後練習造成不便。另外一個申請 Beta Version 的好處是你可以設定自己的 Handle: figma.com/@lichin 之後還可以分享給大家,讓大家知道你都追蹤什麼類型的設計師、製作了哪些有趣的設計稿 📌

ep1-lichin-profile

以上就是 Proto Uncle Ep1 的分享,希望大家練習完後可以多從手邊已有的專案或是產品中,取出一小部分的流程用 Smart Animate 來玩看看,你可以在下面的回饋表單貼上你做完的成品,並留下更多你想學的內容,我們下週見 🤙