想自己做出一個免費又有互動效果的網頁作品集嗎？
不管你是設計師、UIUX新手，還是想要有一個可以點擊、滑動的動態作品展示頁，這篇教學都能一步步帶你完成。 只用Figma這套免費工具，不用寫一行程式，就能做出互動式卡片，讓你的作品集看起來超專業！
互動式卡片效果範例
本文將帶你完成
- 設計卡片 Before / After 樣式
- 把卡片做成元件(Component)
- 設定互動效果
- 替換卡片內容
- 預覽互動效果&分享
什麼是互動式卡片？
在網頁設計中，「互動式卡片」指的是：
當滑鼠滑過圖片、文字、區塊時，元素會有動態變化，例如：放大、改變透明度、出現說明文字。 這種設計讓使用者更容易知道哪些地方可以點擊，也能增加趣味性、延長停留時間。
學會這個技巧，你可以：
- 製作個人作品集
- 展示單篇文章
- 甚至做出小遊戲和導覽頁面！
Figma互動卡片完整教學
Step1 | 設計卡片 Before / After 樣式
- 建立卡片Frame（快捷鍵F），設定尺寸350px × 400px
- 加入背景圖片（使用Fill功能上傳圖片）
- 新增遮罩層（黑色30%透明度），並加上文字
- 設定遮罩的背景模糊
- 分別做好Before（初始）和After（滑過後）版本
- Before版設定遮罩透明度為0%
📌 小提醒：這一步是後續互動變化的基礎。
互動式卡片before-after
Step1.1 建立卡片Frame（快捷鍵F）
- 快捷鍵F建立一個frame，設定寬 350px，高 400px
- 添加填色(Fill)，點擊色彩圖示，選擇圖片icon上傳圖片
置入圖片
Step1.2 製作卡片遮罩
- 快捷鍵F建立一個frame(350x400)，填色黑色30%作為遮罩
- 新增文字，放至遮罩內
- 遮罩背景模糊效果
製作遮罩
製作遮罩背景模糊效果
Step1.3 做出before和after的差異
- 複製一個做好的卡片樣式。
- 將Before的遮罩透明度設為0%，並且從左方工具列關掉遮罩顯示。
做出Before、After
Step 2：把卡片做成元件(Component)
- 選取卡片物件，點擊「四個方塊」Icon，設為Component。
- Shift選取Before和After卡片，組成Component Set（元件集合）。
做成Component set
Figma母元件＆子元件
什麼是Component？
Component可以理解成「可以大量複製且統一管理」的設計模組，類似母雞和小雞。母元件修改，小元件自動同步更新，非常適合管理大量重複元素（像是按鈕、卡片、輸入框）。
Step 3：設定Prototype互動效果
- 切換到Prototype面板
- 從Before版的卡片拖出藍色箭頭連到After版
- 設定觸發條件為「While hovering」
- 選擇動畫方式為「Smart animate」
這樣滑鼠懸停在卡片上時，就能自動切換到After效果囉！
prototype製作互動效果
設定smart animation
第三步，右邊工具列切換成Prototype面板，選擇觸發物件開始設定互動。按住Ctrl或Cmd可以直接選取Component set中的元件。（更多快捷鍵用法 Figma新手教學: 介面＆基本功能）
- 滑鼠左鍵點擊藍色＋好，按住不放拖曳至After效果
- 觸發方式為 While hovering (滑鼠懸浮)
- 執行動作為 Chang to(改變為)
- 選擇要改變為哪一種樣式
- 設定動畫效果 Smart animation，從before漸變到after樣式
Step 4：替換卡片內容
- 插入剛製作好的Component
- 用Auto Layout排版
- 替換每張卡片的文字與圖片
更換卡片內容
✅ 這個方法可以快速複製、排列多張卡片，節省大量製作時間。
Step 5：預覽＆分享成品
- 點擊右上角播放鍵，進入預覽模式。
- 確認互動效果順暢。
- 分享預覽連結給別人！（注意，不要直接分享原始設計檔）
小提醒：物件要放置在預覽畫布內才能顯示，放在工作區是不會顯示在預覽中的喔！
Figma檔案預覽與分享
延伸應用：更多互動方式
Figma的Prototype不只支援「滑鼠懸停(Hover)」，還能設定：
- 點擊(Click)
- 拖曳(Drag)
- 自動播放(After delay)
你可以結合多種互動，設計出更有趣的作品集或展示頁面！
結語：從一張互動卡片開始，讓你的作品集更生動！
只要掌握這套簡單步驟，就算完全不懂程式，也能做出專業感十足的互動式網頁作品集。
不需要花錢買工具，也不用等別人幫你，現在就開始動手做吧！
---
如果你想學更多免費又簡單的網頁互動設計技巧，記得關注我，後續會分享更多Figma與網頁設計的實戰應用！
