如何在 Figma 中製作懸停效果
Figma 允許用戶設計和定制許多功能。可用於改善用戶體驗的功能之一是懸停效果。按鈕上的懸停效果意味著當您將光標移向按鈕時，您會看到不同的設計。這種效果本身可能會有所不同，從改變顏色的標準效果到更複雜的方法（例如更改邊框或高光）。
繼續閱讀以了解如何向 Figma 中的組件添加懸停效果。
在按鈕上創建懸停效果
如果您希望組件在將鼠標懸停在其上方時具有特定的交互和轉換，則可以設置懸停效果。您可以創建的最直接的結果是更改按鈕的顏色以突出顯示它以供單擊。這是在按鈕組件上創建懸停效果的方法：
- 製作按鈕。
- 複製它並將其移到框架之外。
- 更改重複按鈕的顏色。
- 通過右鍵單擊並從菜單中選擇“創建組件”或按鍵盤上的“Ctrl + Alt + K”來創建組件。
- 單擊側欄中的“原型”選項卡。
- 連接兩個按鈕組件。
- 在“交互詳細信息”下拉列表中，選擇“懸停時”。
- 單擊同一菜單中的“打開疊加”選項，並將疊加設置為“手動”。
當用戶將鼠標懸停在原始按鈕上時，它將被具有不同顏色的按鈕替換。您還可以以類似的方式更改按鈕上顯示的文本。
您必須對每個按鈕重複此操作。
在按鈕邊框上創建懸停效果
在按鈕組件上利用懸停效果的另一種方法是創建一個邊框，當您將光標懸停在按鈕上時，該邊框會發生變化。您可以這樣做：
- 創建一個按鈕，其中包含任何文本。
- 複製它。
- 將描邊添加到副本中，刪除填充，然後更改顏色。
- 單擊側欄中的“原型”選項卡。
- 連接兩個按鈕組件。
- 在“交互詳細信息”下拉列表中，選擇“懸停時”。
現在，當您預覽按鈕效果並將鼠標懸停在其上時，彩色邊框將出現在其上。
在 Figma 中使用 Anima 插件
在 Figma 中添加懸停效果的另一種方法是使用設計到代碼工具 Anima。該插件具有獨特的功能，您可以在 Figma 中創建網站、應用程序圖標或其他 Web 組件時實現。您只需選擇要設置動畫的組件並相應地調整設置即可。執行此操作的方法如下：
- 選擇組件。
- 打開 Anima 插件。
- 點擊“懸停效果”選項。
- 選擇效果（放大、縮小、陰影發光等）。
- 自定義動畫效果，例如“持續時間”或“曲線”。
- 點擊“預覽”按鈕即可查看效果。
- 點擊“保存”。
Anime 插件的另一個功能是您可以自定義 CSS 過渡。有了它，您可以控制動畫速度並根據您的喜好調整其設置或使其更加自然。
利用 Figma 的懸停效果功能
無論是專業設計師還是初學者，Figma 中的許多功能都可以為您的組件、圖標和對象創建獨特的設計和動畫。懸停效果允許您更改文本或添加突出顯示、不同顏色、不同邊框等。了解如何創建這些效果對於使您的第一個網站具有交互性並為其添加個人風格至關重要。
您在 Figma 的組件上實現了哪種懸停效果？請在下面的評論部分告訴我們。
請問懸停效果是不是在手機裝置尚無法實現?