【Figma 網頁教學】動態按鈕設計，製作流暢的轉場效果！

1. 影片描述

網頁設計中，通常都會包含一到多個按鈕，像是上傳、下載按鈕或是送出表單按鈕等…，可以有多種功能。

建議在設計按鈕時，可加入一些動態變化效果，讓用戶與按鈕互動時，可以輕易理解當下的狀況，創造良好的使用體驗！

優質的按鈕設計，還能吸引用戶目光，促使用戶想要點擊按鈕，提升轉換率！

今天將教大家如何使用 Figma，設計一個簡單的下載按鈕，再加入流暢的轉變動畫，像是加載進度條、載入完成的動態效果等…。

步驟簡單，新手也能輕鬆學會，快跟著影片一起操作吧～

2. 影片時間軸

• 00:00:00 – 開頭展示
• 00:00:32 – 製作按鈕初版
• 00:04:53 – 後續製作 ＆Prototype 連線
• 00:08:10 – 套用元件＆成品一覽
• 00:09:22 – 結尾分享

---

聯絡犬哥網站

在網站架設＋網路行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！

接下來，額外分享 2 個實用資源，可有效幫助大家解決問題。

資源一：犬哥網站（專業 WordPress 網頁設計＆數位行銷公司）

如果你沒時間自己架站，或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站（WordPress 網頁設計＆數位行銷公司），請專家協助你會更容易！

我們有多年網頁設計、SEO 關鍵字行銷、Google 廣告投放經驗，加上上百個實戰案例，絕對能滿足您的需求！

資源二：WordPress 高手架站課＋SEO 排名飆升課（線上課程）

如果想學習更深入的 WordPress 架站技巧，或是想透過 SEO 關鍵字提升網站流量？

可以參考犬哥近期推出的這兩門課程，課程非常的扎實，都是犬哥自己實戰出來的經驗分享，不打高空只教你做出成績！