按鈕只有長相：把變體接成互動狀態

閱讀目標

• 把變體與互動連線分開
• 比較click、懸浮及press的狀態時間
• 指出切換為作用子層或父層
• 預測同觸發條件實例導覽優先
• 分清初始變體、播放記憶及重設

適用條件與學習範圍

已經畫好按鈕兩種長相，為什麼點擊仍不換？加上導覽至後，為什麼原有切換為又沒執行？

• 可直接閱讀；需要時補Variants離散組合與原型熱點／動作。兩者已可補讀返回，不需完成闖關。

能從同set的變體建立具名狀態互動，說明事件作用範圍及原型 interaction優先條件；不把設計變體或看起來像按鈕當已有產品行為。

兩個有限元件 sets（子層 Off／On、父層 Collapsed／Expanded）、三種觸發、實例click／Enter導覽及明示重播政策。不重現Figma全事件、覆寫、變數、動畫、字型或跨框架 state management。

原理與判斷

Variants描述可選的離散設計；互動元件則要再定什麼觸發條件把哪個變體切換為另一個。沒有這段規則，兩個外觀就只是可選外觀。把互動放在來源元件組，可讓實例帶著規則進原型，減少每個畫面重接線的工作。 同一個實例也可能另加原型 interaction。當兩份互動用同觸發條件，Figma會用原型 interaction並忽略變體 interaction；不同觸發條件則各在自己的事件發生時作用。先說是哪個事件、作用哪一層，才能解釋為何只換狀態，或為何直接離開畫面。

先有同set的變體，再接切換為

Interactive 元件擴充變體，需要同一元件組中的變體，才能建立元件內切換為互動。選來源變體、進原型，可拖connection到目標變體，或Interactions按+並選切換為／目標；再設觸發條件。把實例放到框架後，它會帶來源互動進播放，不需每份都重新接。本台預備兩份子層外觀但初始未接線，先點只看到「未連互動」，接上後才真的切換。

設計初值不是目前播放狀態

設計檔選哪個變體、元件組預設變體與播放時走到哪個變體要分開。Set的預設與實例選用先補Variants頁；播放事件不等於修改來源設計。本站「設計稿初值」是下一次重播用的實例初值，切On不立刻改目前子層；重播才取它。這是具名有限比較，不冒稱改了Figma set預設或完整原型 restart規則。

Click切換，懸浮／press有暫態時間

官方觸發條件有點擊時／tap、懸浮期間及While pressing。懸浮期間離開熱點回原畫面，While pressing放開回原畫面；它們不是一次click永久改狀態。本台Click明示兩個方向的Off↔On或Collapsed↔Expanded；懸浮／press則記住事件前變體，進入／按住時轉目標，離開／放開復原。官方按鈕教學另以Mouse down／up／leave建立具名圖，屬另一套明確連線，不能只因畫了pressed樣式就說放開會自動完成所有設計。

真滑鼠事件與可及替代，不強迫手機懸浮

本站測試實例可真懸浮或按住，鍵盤正常activate可做click；另有具名Hover進入／離開、Press按下／放開及Enter替代按鈕，讓觸控／鍵盤也能觀察同份狀態機。這些替代是本站送事件的控制，不聲稱原生手機會自然產生懸浮，亦不把pressed當disabled／focused。需要真產品可及性時，仍要另設焦點、觸控及無懸浮路徑並實測。

巢狀切換為可以改父元件

官方允許在nested 實例上設切換為來改父層元件變體，例如父Expandable的Collapsed→Expanded。要指出動作所在的來源及目標父層 set，不能任意跳到無關元件組。本台子層 Off／On與父層 Collapsed／Expanded分列；同事件可選只改子層或改父層，展開父盒不會偷把子層切On。上排四抽屜依序是子層 Off／On、父層 Collapsed／Expanded，中間是使用端，不把參考樣式當自動事件。

同觸發條件的實例導覽會覆蓋變體 interaction

來源元件若點擊時→切換為，實例又加點擊時→導覽至 B，官方採原型 interaction，忽略變體 interaction。因此本台On狀態再點同觸發條件導覽，框架到B但子層仍On，不執行回Off。這不是網站DOM冒泡的猜測；是具名Figma互動優先規則。若來源用懸浮、實例用click，懸浮先切換為、click再Navigate，各自事件可成立，並不是一個事件無條件同做兩件事。

回來源編互動，預設覆寫另看規則

實例的原型可分Interactions及變體 interactions，前者加原型互動，後者看變體互動；要改主元件規則，Go to 主元件回來源再原型。官方按既有覆寫規則處理預設變體的label／icon等；帶入set的其他變體雖可編覆寫，Presentation不一定反映那樣的編輯。不要看到一個狀態文字保留就宣稱全部覆寫都保留。本台不用覆寫或字型模擬來遮掉狀態邊界。

記住狀態、跨框架共享與重設是另一責任

官方會記互動元件最後變體；匹配元件之間在初次互動後可共享狀態，不想保持可在interaction的重設元件 state覆蓋。匹配還有名稱／父層等條件，並非全站同名就同步。本站返回A保留這個有限實例的示例，重播取設計初值，整台重設回Off／未接線；並未模擬Figma全部matching、舊版互動或restart。自訂字型也可能因缺字型及覆寫／字型設定變更在播放改用Inter，不能把本站字體當跨裝置保證。

本地互動與資源庫資格分開

Interactive 元件專文列任何團隊／方案與可編輯建立，卻把發布描述簡寫成可編輯；不能由此推出所有方案免費發資源庫。跨檔發布／接收以資源庫當期方案與權限專文另核。本票只在本站示意本地元件規則，沒有發佈Figma 資源庫或登入帳戶。變數綁定、持續資料、動畫及真正產品邏輯也不因切換為就自動存在；讀數成功不代表真人可用或學習有效。

步驟與觀察

1. 確認變體與set

   先在圖層面板確認子層 Off／On同set、父層 Collapsed／Expanded同另一set；回Variants頁核離散組合及預設。 操作名稱對照（中文為本站教學譯名）： 同元件組變體 > 原型 > Interactions > 切換為（介面原文：同component set variants > Prototype > Interactions > Change to） 實例 > 原型 > Interactions／變體 interactions（介面原文：Instance > Prototype > Interactions／Variant interactions） 實例 > Go to 主元件 > 原型（介面原文：Instance > Go to main component > Prototype） Interaction details > 重設元件 state（介面原文：Interaction details > Reset component state）

2. 接來源切換為

   來源變體的原型建立connection到同set目標，選觸發條件與切換為；要雙向click時兩邊都設。

3. 把實例放到框架測

   預覽／播放中按／懸浮／press，分清目前播放變體與設計初值；本站可先未接再接，比較只看長相與真事件。

4. 指定巢狀作用範圍

   在父層元件組脈絡中用nested 實例的切換為指父層變體；觀察父展開與子層切換分開。

5. 比較額外導覽觸發條件

   在實例加原型 interaction，同觸發條件看導覽優先，不同觸發條件各自測；不要用DOM冒泡猜Figma規則。

6. 回來源與重播檢查

   Go to 主元件改來源，核預設覆寫與重設元件 state；本站重播／返回／重設政策分列，補讀回來保當前有限狀態。

常見問題

有兩個變體，播放卻不變

變體只是離散外觀；核同set與來源切換為、觸發條件／目標及實例是否帶互動。

懸浮或press放開後又變回去

懸浮期間／pressing是持續輸入暫態，和click永久切換不同；若要另一套結果需明設連線，別只換樣式名。

加Navigate後原本開關不切了

核是否同觸發條件；原型 interaction優先，變體 interaction被忽略，先分事件與動作。

想展開卡片卻只換內部按鈕

查切換為的目標set，是子層 Off／On還是父層 Collapsed／Expanded；巢狀來源可指父層但非任意跨set。

改設計初值就期待目前播放立刻變

分清設計選項、目前播放與重播初始條件；本站需按重播才取新初值，不假做原生全局重設。

字型或覆寫換狀態後不同

核預設變體的覆寫規則、其他變體編輯是否反映Presentation與檢視者字型條件；不要以一個標本泛推全套繼承。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design本地interactive 元件任何團隊／方案、建立需可編輯。Library發布不由本專文可編輯簡寫外推，另依已發布FG30當期來源；custom font的缺字型與變體變更條件未抹平。 來源狀態：2026-10-22 Scrapling get --ai-targeted新核互動元件及官方按鈕教學；Change to／triggers沿同日FG32、state沿FG33新查。保same-trigger優先、different-trigger分別作用、nested-parent、default override及custom font限制。 示意限制：原創參考抽屜、子層開關、伸縮父層盒與流程游標。有限click／懸浮／press狀態機同源驅動真pointer與可及事件替代；設計初值／目前狀態／框架分開。本站返回及重播政策非完整Figma state management、DOM冒泡或變數／字型引擎。 原生軟體實測：未原生Figma建立互動元件、nested 切換為、覆寫、資源庫或跨裝置實測；本站公開操作與官方查核分開。 學習成效驗證：未真人可用性或學習成效實測。

參考來源

• Figma Help｜Create interactive components with variants
• Figma Learn｜Design an interactive button component
• Figma Help｜Prototype actions：Change to
• Figma Help｜Prototype triggers
• Figma Help｜State management for prototypes

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。

相關知識

• Variants：尺寸與狀態，怎樣才是一個組合？ — 回查Variants只是離散設計

  同set有哪些合法組合與預設，和事件何時切換不同；補讀返回保互動連線及播放狀態。

• 原型點了沒反應：先查熱點、觸發與導向 — 分清元件狀態與外層流程

  切換為留在元件狀態，Navigate換框架；同觸發條件優先需先知道動作作用對象。

• 資源庫：修改、發布與接收為何分開？ — 另核跨檔發布與接收條件

  本地可建立互動不等於可免費發布資源庫；查來源、方案與使用端接收後返回。