Figma 交互組件簡介

最近，Figma 推出了最新交互式組件功能的測試版，允許將交互和動畫直接定義到變體中，並將它們傳播到每個組件實例。 這意味著現在可以創建具有狀態（懸停、活動、單擊、聚焦）的組件並使其具有交互性，以便組件的每個副本默認繼承這些相同的交互，在原型設計階段有很大幫助。

以下是工作流程將如何變化的比較示例：

正如您在上面的示例中所看到的，它需要四個屏幕和八個交互才能使原型作為真正的產品工作。 如果我想使用三個開關，我將不得不添加更多的屏幕和交互。

在下一個示例中，它只需要一個屏幕和一個具有兩個變體的組件進行交互，並且開關是相同的，因此可以根據需要多次復制：

使用交互式組件不僅可以簡化最終原型，還可以簡化其背後的邏輯，從而更容易學習如何構建、維護和更新原型。

現在，在我們開始之前：

交互式組件（測試版訪問）

您需要註冊Interactive Components Beta 計劃才能開始試驗此新功能，因為它在當前穩定版本中尚不可用。 加入 Beta 版是免費的，一旦您提交表單，在您看到交互式組件出現在 Figma 設計工具中之前應該不會超過兩三天。

贈品

我已經使用本文中的示例創建了一個 Figma 設計文件。 加入 Beta 版後，您可以復制我的設計並更輕鬆地跟進。

• 下載 Figma 設計文件 →

在開始之前

有必要了解我們將要使用的一些關鍵 Figma 元素，如果您已經熟悉它們，可以跳過這一部分並直接從第一個教程開始（部分：“創建您的第一個交互式組件”）。

成分

將這些視為項，當複制時，會與其副本（稱為實例）創建連接，並且當組件發生更改時，實例會收到相同的更改。 您還可以將覆蓋應用於實例（這基本上是對組件屬性的樣式更改，允許進行一些自定義）。

• 了解有關組件的更多信息 →
• 了解有關覆蓋的更多信息 →

變體

這些是組件可以具有的不同樣式，通常用於應用不同的屬性，例如大小或狀態。

• 了解有關變體的更多信息 →

交互詳細信息面板

了解交互詳細信息面板很重要，因為它允許我們為交互組件定義不同的交互和動畫。 Figma 在他們的網站上有很多信息，所以我會為那些想要深入挖掘的人提供鏈接。

熱點

即使它不在面板內，熱點也是交互發生的元素，在我們的例子中，每個變體都是一個交互式熱點，您可以為其定義觸發器和操作。

觸發器

這些在開發中被稱為事件，是我們用戶可以激活交互的不同方式。

• 點擊時，
• 在拖動時，
• 懸停時，
• 按下時，
• 按鍵/遊戲手柄，
• 鼠標輸入，
• 鼠標離開，
• 鼠標按下，
• 鼠標向上，

• 延遲後。

• 有關觸發器的更多信息 →。

行動

在此設置中，您可以定義激活交互時會發生什麼； 對於交互式組件，我們將使用Change To ，它允許交換組件內的變體。

• 改成，
• 導航，
• 打開覆蓋，
• 滾動到，
• 交換（覆蓋），
• 後退，
• 關閉覆蓋，
• 打開網址。

目的地

這是行動的最終目標。 在我的示例中，我將使用一個變體作為目標，將其從 Switch OFF 切換到 Switch ON。

動畫

Figma 帶有一組預定義的過渡，在某些情況下可能有用（移入、推入、滑入），但我總是更喜歡使用Smart Animate並定義我自己的過渡，因為它真的很容易使用——基本上檢查圖層名稱，如果所選幀和目標幀之間有變化，它將為這些圖層設置動畫。

• 有關 Figma過渡和智能動畫的更多信息 →

緩和

緩動是指動畫移動的方式，它基本上是元素如何加速和減速。 我將在本教程中使用兩種設置：用於開關的Ease In 和 Out ，以及用於循環的Linear ，但請記住，也可以定義自定義緩動，因此您可能想了解有關Easing的更多信息。

創建您的第一個交互式組件

現在您已經掌握了所有信息，您可以開始製作您的第一個交互式組件。 我將通過創建一個具有兩種狀態（關閉和開啟）的簡單開關並使用變體來複製這些狀態來向您展示一個非常常見的情況。

創建一個組件

第一步是創建一個組件。

• 使用矩形工具 ( R )，創建一個大小為56x32像素的灰色矩形 (#A7A9BC)，並應用16像素的角半徑。
• 使用橢圓工具 ( O ) 創建一個大小為24x24像素的白色圓圈 ( #FFF )，並將其放在左側的矩形上，留出4像素的間距。 它應該是這樣的：

• 使用Ctrl/Cmd + Alt + K （或使用 Figma 頂部欄中的組件圖標）將這兩個元素組合成一個組件：

注意：這里和其他地方，我將使用 Windows/Mac 通用鍵表示法，其中 Windows 中的Ctrl鍵對應 Mac 上的Cmd鍵； Windows中的Alt相當於Mac上的Alt/Option ，所以我就簡稱Alt ， Shift在兩個平台上都是一樣的。

添加變體

• 選擇您剛剛創建的組件，然後在右側面板中（在 Design 選項卡內），單擊Variants附近的加號按鈕：

它將生成一個帶有虛線邊框的紫色框架，代表您擁有的一組變體。

您現在應該有兩個變體，第一個用於Off狀態，第二個用於On狀態。

• 對On狀態應用不同的樣式以使其成為活動選項，我建議使用藍色背景 (#0B5FFF) 並將圓圈向右移動。

當用戶點擊開關時，這些開關的狀態將從關閉變為開啟（反之亦然）。

有用的提示：對於這種情況，沒有必要，但如果您需要添加更多變體，您可以在框中選擇一個組件並單擊紫色加號按鈕，它將添加所選組件的副本並自動調整框大小。 （也可以手動調整框的大小，就像它是一個框架一樣，並自由複制和排列其中的變體。）

替代方法

如您所見，我們通過在變體組中復制它們來創建這些組件，但也可以單獨創建它們並將它們組合為變體，最終結果將完全相同。 如果您想嘗試這種方法，只需創建並選擇兩個組件，然後右側面板將有另一個名為“組合為變體”的操作，單擊它並完成 - 您現在將擁有相同的兩個變體。

當您已經擁有不同的組件並且只需要定義變體時，此替代方案非常有用，如果您正在處理庫，它將幫助您更新它，而無需從頭開始重新創建所有內容。

命名您的變體

命名變體不會對最終結果產生直接影響（除非您多次使用相同的名稱） ，但定義名稱和層次結構將幫助您更好地組織和理解可能需要使用的其他同事的所有內容其他項目的原型。

默認情況下，主要變體組命名為“Property 1”，您可以在選擇整個組時從側邊欄中更改它。 我建議將其重命名為“State”，因為我們將使用 Off 和 On 狀態。

使用相同的過程重命名單個變體，但您需要選擇組內的單個變體，並且在同一面板中，您會找到可以覆蓋的名稱“默認”和“變體 2”，作為開關名稱這些應該是“關”和“開”。

因此，變體的圖層名稱將自動更改為“State=Off”和“State=On”。

有趣的事實：如果您的組件只有兩個變體並且您使用名稱“Off”和“On”，它將在目的地顯示一個開關而不是下拉列表！

讓它互動！

現在您已經有了組件和變體，是時候應用交互了。

• 單擊“原型”選項卡（位於屏幕右上角）以打開“原型”面板並激活其功能。
• 選擇Off變體（它應該有一個藍點）並將其拖到On變體上以連接它。

• 仔細檢查您是否選擇了整個變體，而不僅僅是背景層，即使用戶單擊圓形元素，這也會使交互工作。
• 在 Interaction Details 面板中，將觸發器設置為On Click 。
• 確保操作設置為Change To 。
• 將動畫更改為Smart Animate並使用 Ease In And Out 以獲得自然的感覺。

我將把這些設置翻譯成一句話來解釋會發生什麼：當用戶點擊關閉狀態然後使用智能動畫以300 毫秒的時間輕鬆進入和退出時更改為打開狀態。

• 將相同的設置應用於On State變體，以便再次單擊它時，將關閉開關。 （注意： Figma 會記住應用於組內元素的交互設置，並在拖動新交互時應用相同的設置，因此在這種情況下，您只需要仔細檢查。）

完畢！ 如果您想檢查它是否有效，您需要將其中一個變體包含到框架中，選擇框架，然後單擊放置在選項卡上的演示按鈕（由播放圖標表示）。

它應該允許您單獨打開/關閉每個開關。

但是，如果您想了解此功能的真正威力，請多次復制框架中的組件（至少三個或更多）並在演示文稿中單獨激活它們。

使用兩個以上的變體

當您添加多個變體並將它們單獨連接以製作逼真的組件時，此功能變得非常強大。 這是一個示例，其中我連接了總共六個變體，對背景顏色進行了微小的更改，以重新創建按鈕的多種狀態，這是當今網頁設計行業的經典之作。

組件狀態

這是該組件的不同狀態的列表，還包括我們將用於從一種變體更改為另一種變體的觸發器。

1. 默認 - 默認，
2. 懸停 - 懸停時，
3. 按下 - 鼠標按下，
4. Active — MouseUp（可以使用 On Click 來獲得相同的結果），
5. 活動時懸停 - WhileHover,
6. 活動時按下 - MouseDown。

有用的提示：可以使用MouseDown來模擬按鈕被按下但未釋放，然後使用MouseUp來激活過渡，這是一個很好的交互細節，使按鈕感覺更真實。

嵌套交互組件

至於常規組件，您也可以創建嵌套交互組件。

使用下拉列表的相同示例，可以創建一個名為Dropdown的單個交互式組件，其中包含兩個交互式組件：下拉按鈕和下拉菜單。 這將幫助您控制按鈕和菜單之間的交互方式，允許您定義按鈕的哪個變體將觸髮菜單的打開。

注意：可以為下拉菜單選項創建另一個嵌套組件並使用覆蓋來更改不同的文本。

使用嵌套交互組件的主要好處是它為原型提供了新級別的模塊化，您可以單獨定義交互並將它們混合成無限的交互組件。 下拉菜單可以包含在其他組件（例如卡片）中，而不必每次都對其工作方式進行原型設計。

導航

我們可以走得更遠，也可以從變體導航到外部框架，您可以使用On Click觸發器和Navigate To操作將單個變體連接到框架。 在此示例中，我已將下拉菜單組件中的每個操作連接到外部框架，該框架具有與菜單相同位置的灰色矩形（右、上、左、下）。

當單擊其中一個操作時，它將導航到連接的框架，就像使用常規原型一樣，當您需要為另一個組件重用下拉菜單時，真正的魔法發生了，它內部的所有交互都已經完成，所以你不必一遍又一遍地連接它。

這種工作流程和嵌套組件的功能對於需要連接大量框架的產品設計案例來說是驚人的，因為它們將減少創建用於測試的高保真原型所需的工作量，或者即使您想創建一個原型的組件庫。

特殊效果

以上就是對 Figma交互組件的介紹。 如您所見，使用此功能在原型中創建和連接交互非常容易。 但也可以使用變體創建各種特殊效果。

在接下來的部分中，我將仔細研究這些！

循環

終於可以在 Figma 中輕鬆創建無限循環，您還可以創建各種微調器和加載指示器。

要創建循環，請使用設置為1 ms 的After Delay觸發器自動交換變量並連接至少兩個變量。

注意： 1毫秒是我們可以在 Figma 中設置的從一個變體更改為另一個變體並使其幾乎是瞬時變化的最短時間； 並且，由於 AfterDelay 觸發器，它會自動發生。 如果您需要循環看起來像是變體之間有暫停，則可以使用更高的延遲時間。

迴轉

讓我從關於 Figma 處理旋轉的奇怪方式的註釋開始本文的下一部分。

Figma 有一種奇怪的方式來旋轉元素，它似乎被限制在-179到最大180之間，並且不允許超過這些值。 此外，沒有辦法定義旋轉方向，因此如果您嘗試從0旋轉到180 ，反之亦然，而不是進行360旋轉，它會先旋轉到180然後回到0度（就像鞦韆一樣） ）。

因此，要讓系統正確識別旋轉，您至少需要使用三個變體。

以下是您的操作方法：

• 創建一個具有三個變體的組件：VariantA、VariantB、VariantC（在本例中，我修改了一個橢圓來製作三角形）。
• 將以下旋轉應用於變體內部的元素（而不是變體本身）。
  • VariantA：將元素設置為0並將變體連接到VariantB 。
  • VariantB：將元素設置為-120並將變體連接到VariantC 。
  • VariantC：將元素設置為120並將變量連接到VariantA以完成循環。
• 所有交互都應具有延遲後（1ms）作為觸發器和線性緩動。

結果將是一個中性的微調器，由於變體交換，每個1毫秒的小停頓，並不完美，但速度很快，對於原型來說，這已經足夠好了——無論如何，你可能是唯一會注意到停頓的人.

有用的提示：您可以為每個變體使用相同的動畫時間來製作線性循環，或者您可以對某些變體使用更快的時間而對其他變體使用更慢的時間來播放動畫，這將模擬曲線緩動。

複雜的微調器

我不建議將 Figma 交互式組件用於復雜的微調器，在這種情況下，使用專用動畫應用程序（例如 After Effects）創建微調器並將其作為 GIF 導入原型可能會更好。

微交互

交互式組件允許您在原型中包含更多令人愉悅的細節。 我將回到 switch 示例，向您展示如何使用MouseDown和On Click向該組件添加微交互。

零件

要重新創建此示例，您需要對交換機的結構進行一些更改：

• 複製您已經創建的關閉狀態開關。
• 創建另一個16*24像素的橢圓形狀，將其放在前一個橢圓（圓形）上。

• 使用Union將兩個橢圓統一為一個布爾組。

• 了解有關布爾組的更多信息 →。

• 將32 px 的邊界半徑應用到聯合層，這將創建您在示例中看到的扭曲效果。
• 創建組件（ Ctrl/Cmd + Alt + K ）。

變體和原型

您總共需要四個變體來完成這項工作： OffState 、 OffStatePressed 、 OnState和OnStatePressed 。

• 使用Mouse Down觸發器來模擬鼠標被按下並通過將較大的橢圓8 px 移動到另一側來激活失真。
• 使用On Click觸發器將狀態從 Off 更改為 On。

帶有一系列圖像的 3D 動畫

在我們繼續之前，我要感謝Andrea Cau ，我將使用這個很酷的 3D 序列作為示例。

這更像是一種將 3D 動畫集成到 Figma 原型中的技巧，您也可以使用 GIF，但這樣您就可以完全控製圖像，而不僅僅是播放/停止，從而允許您創建一個原型來模擬旋轉對象的界面，常見於汽車網站，您可以在其中旋轉汽車。

在這種情況下，我使用了九張圖像（您可以使用更多或更少，具體取決於您需要的旋轉），重現此交互的重要步驟是：

• 為每個圖像創建一個變體（在這種情況下將需要 9 個變體）並按照序列順序在每個圖像中包含一個圖像。
• 創建箭頭按鈕，它將成為熱點。
• 將右箭頭連接到下一個變體（對每個變體重複）。
• 將左箭頭連接到前一個變體（對每個變體重複）。
• 使用即時動畫而不是智能動畫來避免淡入/淡出效果並產生運動錯覺。

結論

我使用此功能的次數越多，我就越認為它將改變在網絡和產品設計領域工作的公司的遊戲規則。 掌握交互式組件和變體將使設計師能夠以更少的努力製作出更好、更先進和更逼真的原型，讓您可以自由地進行實際設計，而不必過多關注設計工具本身。

如前所述，我使用本文中的示例創建了一個 Figma 社區文件（以及我在測試新功能期間所做的一些實驗）。 加入 Beta 版後，請隨意複製我的設計，跟隨或開始試驗，並分享您的結果！ 玩轉動畫時間，改變緩動，嘗試旋轉，縮放元素，嘗試嵌套不同的交互組件。

• 下載 Figma 設計文件 →

如果您有任何問題或不清楚的地方，請在下面的評論部分留下問題，或在 Twitter (@emi_cicero) 上聯繫我 — 我很樂意提供幫助！ :)

延伸閱讀

• 成分
• 覆蓋
• 變體
• 觸發器
• 智能動畫
• 緩和
• Figma 交互式組件遊樂場
• Figma 中的交互式組件（@mds 提供的視頻）
• Figma 中的高級交互組件（@mds 提供的視頻）
• SketchTogether 交互式組件視頻