Figma新手教學：互動式卡片效果 | 從零開始做第一個prototype互動雛形
想要用簡單且免費的方式，做一個具有微互動效果的網頁作品集嗎？
即使是從事網頁設計3年以上的設計師，要獨自架設一個網站還是相當費時費力，更不要說是完全沒有接觸逛網站架設、網頁設計的新手小白～
互動式卡片效果demo
在網頁中常會遇到，當滑鼠游標碰到某些文字、圖片或區塊時，會有一些動畫效果，它不是一個獨立的動畫插圖，而是基於使用者與介面元件的互動，給出一些動態的反饋，這麼做可以讓使用者知道這個物件是「可以點擊」，或是單純增加網頁互動的趣味性、吸引使用者的注意。透過完成一個互動式卡片效果就可以做出很多種變化，非常適合作為Figma學習的入門練習。這篇文章一步一步教學，專門為完全沒有使用過設計軟體的新手設計。
互動卡片效果步驟
Step1 設計卡片 Before / After 樣式
Step2 把卡片做成元件(Component)
Step3 設定互動效果
Step4 替換卡片內容
Step5 預覽互動效果&分享
Step1 設計卡片 Before / After 樣式
第一步，我們先設計卡片一開始顯示的樣子(before)和滑鼠指到物件時的樣子(after)
互動式卡片before-after
Step 1-1 製作圖片卡片
- 快捷鍵F建立一個frame，設定寬 350px，高 400px
- 添加填色(Fill)，點擊色彩圖示，選擇圖片icon上傳圖片
置入圖片
Step 1-2 製作卡片遮罩
1.快捷鍵F建立一個frame(350x400)，填色黑色30%作為遮罩
2.新增文字，放至遮罩內
3.遮罩背景模糊效果
製作遮罩
製作遮罩背景模糊效果
Step 1-3 做出before和after的差異
1. 複製一個做好的卡片樣式
2.將Before的遮罩透明度設為0%，並且從左方工具列關掉遮罩顯示。
做出Before、After
Step2 把卡片做成元件
第二步，將兩種卡片都做成Component，並設為一組Component set。
- 選取所有物件，點擊右邊工具列上方，四個方塊的Icon，做成Component
- 按住Shift，同時選取兩個Component，做成Component set
做成Component set
什麼是元件?
元件(Component)在UI設計領域中，是指多個元素組合起來的物件。例如：文字＋邊框＋底色，組合成一個按鈕，按鈕就是一個元件；一個輸入框、一個卡片式圖文訊息也都是元件。
關於Figma中的「Component」
Figma「Component」有兩個主要功能：
1.可以複製出子元件。
2.可以製作互動效果。
網頁、App介面設計中會有大量的按鈕出現，為了維持一致性，所有的按鈕樣式應該要有統一的規範，因此需要將經常重複使用的的元件做成Component。
Figma母元件＆子元件
第一個設置成Component的元件會變成母元件，元件會出現在檔案的資產列表中，母元件的所有變更都會影響子元件，而子元件的變更不會影響母元件，當我們使用資產中的Component時，就會複製出子元件，使用子元件進行設計的好處是，如果要調整樣式的話，我們只需要在母元件進行修改就可以囉！
一般來說，一個產品通常會有主按鈕和次按鈕兩種樣式設計，來區分確認和取消等兩種基本動作，再更複雜的網頁或產品中，也有可能有更多種不同功能的按鈕。
因此，同一個元件可能會存在不同狀態的樣式，包括：預設樣式(Default)、懸停樣式(Hover)、不可用樣式(Disable)，根據元件的屬性不同可能還會有不同的狀態。在Figma中，元件可以新增不同的「變體(Variant)」，並且透過prototype設定，根據指定的互動方式來切換元件樣式
Step3 prototype設定互動效果
第三步，右邊工具列切換成Prototype面板，選擇觸發物件開始設定互動。按住Ctrl或Cmd可以直接選取Component set中的元件。（更多快捷鍵用法 Figma新手教學: 介面＆基本功能）
- 滑鼠左鍵點擊藍色＋好，按住不放拖曳至After效果
- 觸發方式為 While hovering (滑鼠懸浮)
- 執行動作為 Chang to(改變為)
- 選擇要改變為哪一種樣式
- 設定動畫效果 Smart animation，從before漸變到after樣式
prototype製作互動效果
設定smart animation
Step4 替換卡片內容
以上～已經完成可以互動的卡片了，接下來你可以使用製作好的Component，開始排版，並置換成你想要的內容。
1.置入Component
2.替換內容
更換卡片內容
Tips：可以使用Auto layout幫助排列卡片。
Step5 預覽互動效果＆分享
大功告成～！現在來看看自己的網頁是什麼樣子。只要點選右上角的三角形播放按鍵，就會另開新視窗打開你作品的預覽畫面，也可以體驗一下自己設計的互動效果～
Tips：物件要放置在預覽畫布內才能顯示，放在工作區是不會顯示在預覽中的喔！
Figma檔案預覽與分享
如果要分享給他人，請記得一定要分享與懶畫面的這個網址喔！
這樣一來，別人就看不到你的設計原檔，緊抱留最好看一的一角。
結語
以上就是完成互動卡片的步驟，互動式卡片在呈現單篇文章、文章類別的時候都非常好用，也可以拿來做一些小遊戲。Prototype的互動效果除了滑鼠停留在元件上(Hovering)之外，也可以透過點擊、拖曳、時間延遲等方式觸發動作，大家可以根據過去使用網頁或行動裝置的經驗，做出更多變化～
