Logo 跑馬燈 • UI & Dev • Figma 教學

Logo 跑馬燈 • UI & Dev • Figma 教學

Alan Design 5K subscribers
2.3K views · 2024-10-11 UI DesignInteraction & UX
這集我們來看一下要如何製作 Logo 跑馬燈,就是 Logo 排成一長軸,然後會在網頁上無限的重複播放的感覺。我們會利用到After Delay去製作動態。

設計檔下載: https://drive.google.com/file/d/1cqim7bez67u1QFcn0gdYLkFbDh1siU2w/view?usp=drive_link

關於Figma animation: https://help.figma.com/hc/en-us/articles/360051748654-Prototype-easing-and-spring-animations
Max linear animation duration (Figma): https://forum.figma.com/t/linear-prototype-time-setting/65885


0:00 教學主題
0:09 Logo軸 Component 建立
3:02 Logo軸 variants 設定和移動
4:56 Logo 滑動動態建立
6:50 不順暢的滑動問題
7:50 左右漸層優化設計
11:12 漸層Alignment重要注意
11:58 不同螢幕尺寸
16:14 教學結尾


#Logo跑馬燈 #Logo重複播放軸 #網頁Logo軸設計 #LogoLoop #figma教學