最近 10 月份 Figma 團隊出的 Interative Components Youtube 教學影片，讓我對這個新功能感到很興奮。簡單來說，就是 Checkbox, Radio, Switch… 等元件，可以製作獨立的動畫，讓 user 透過互動看到切換狀態的過程。話不多說，立刻就來試試看。

Checkbox & Switch

  1. 先把要做動畫的元件一起選取起來，會發現右邊 Design 面板出現 Variants 的按鈕，點擊 Combine as variants
    Checkbox

  2. 接著在 Prototype 面板設定動畫如下圖所示(Onclick/Change to/Instant)，即可完成
    Checkbox

Switch 的做法差不多，只是 Animation 選擇 Smart animate (Onclick/Change to/Smart animate)
Switch

完成後，就可以執行 prototype，對元件做點選的動作，可以看到互動的效果優~
互動效果影片連結在此

Progress Bar & Progress Circle

另外，進度條或進度圈圈也可以做自動的動畫。

可以參考下圖做進度條。
Progress Bar
Progress Bar

進度圈圈的部分比較複雜，我是參考 Figma Community 的人分享作法 Progress Bar Animations。

最後附上 progress 完成的樣子，動畫看起來很順暢呢~
progress 完成影片連結在此

Reference