上次在《Framer 基礎互動效果：Hover、Press、Loop、Drag、Appear》介紹 Hover Effect 時有提到，在 Effect 面板只能改 opacity、scale、rotate 這種「數值型屬性」。如果想要做出 Hover 時換底色、換文字、換 icon，就得換成用 Components（元件）來呈現。
Components 有超多應用的方式！今天這篇就先來講講一些基礎的設定以及觀念～
什麼是 Framer Components？
簡單來說，元件（Components）就是可重複使用的模組。無論是導航列（Navbar）、按鈕（Button）、卡片（Card）還是頁尾（Footer），只要是會跨頁面重複出現的元素，都非常適合做成元件。
像是如果你做了一個 CTA 按鈕，分別放在首頁、產品頁、footer 都各放了一顆。如果就這樣散在畫布上，等哪天要改圓角、改 padding、改 icon，就得每一顆手動改一次。變成 Component 之後，這幾顆按鈕就從「三個獨立圖層」變成「同一個元件的三個實例（Instance）」，只要改一次，三顆都會同步更新樣式。
更強大的是它的「互動性」。 在 Framer 中，元件不僅能統一外觀，還能包裝完整的動態與互動效果效果。你可以為同一個元件建立多種變體與狀態，接著直接在元件內設定好狀態轉換的動畫，之後把元件放入頁面，就能自帶完整的互動邏輯與細緻的微動畫。
擷取自官方教學影片：Intro to Components in Framer (Fundamentals Lesson 21)
三種建立方式
右鍵選單：對該圖層點右鍵 → Create Component → 命名 → Create
快捷鍵：Mac 按下 ⌥+⌘+K 或者是 Windows 按 Ctrl+Alt+K
AI Agent：可以讓 AI 來幫你處理多個元件。先對圖層按下右鍵→ Add To Agent ，然後貼上 prompt：「把這個轉成元件，並把所有長一樣的按鈕都替換成它的 Instance」這可以讓 Agent 自動掃描全站，把所有視覺相似的按鈕一次換成 Component
建完之後 Framer 會自動做三件事：
開啟這個 Component 的專用畫布（在外面看會發現變成紫色外框，只要再雙擊就可以再次進入 Component 編輯畫布）
這個 Component 會加到 Assets 面板，之後要使用可以從 Assets 再拖曳進畫布。命名時有個小技巧：如果命名為 buttons/primary CTA，Assets 面板就會出現一個 buttons 資料夾，裡面才是 primary CTA，這樣做可以方便未來管理！
掌握 Variants（變體）與 Variables（變數）
如果這顆按鈕，在每個位置都想要顯示不同的文字、不同的顏色樣式怎麼辦？千萬不要再建立很多類似的 Component ，這樣就失去意義了。請善用 Variants 與 Variables ！
Variants（變體）：處理不同狀態與視覺樣式
Variants 用來處理「同一元件的不同型態」。例如：按鈕的預設狀態（Default）、反色狀態（Inverted），或是滑鼠懸停狀態（Hover）。步驟如下：
雙擊進入 Component 編輯畫布
點擊畫布上的 + Hover 或 + Variant 新增變體
調整不同變體下的顏色、文字或尺寸。回到頁面後，只需在屬性面板選取對應的 Variant 即可切換，也會自動套用 hover/press 效果
Variables（變數）：自訂個別欄位內容
Variables 則是讓可以讓元件在不動到整體設計的情況下，靈活替換裡面的文字、圖片等內容。
在元件編輯模式下，選取文字圖層。
在右側屬性面板的 Content 旁點擊 + 建立變數。
命名該變數（例如：按鈕文字）。完成後，回到網頁的畫布，就能為每個 Instance 獨立修改文字內容（如：「立即註冊」、「免費試用」），同時又保持相同的視覺樣式與動態效果。
除了文字之外，Variables 還能綁其他設定，像是：
顏色：把 fill 綁成變數，就能更換按鈕底色或文字顏色。
圖片：例如要做產品卡片元件，就能靠圖片變數來個別設定。
顯示 / 隱藏（Boolean）：例如設定按鈕要不要有 icon，就可以在 visible 設定變數。
Components 的動態互動
Components 有個最方便的地方，就是變體間的切換可以自帶動態效果，我們用一個開關切換（Toggle）來舉例：
在元件內準備好不同狀態的 Variants（如：Item 1、Item 2、Item 3）
點擊的右邊閃電圖示，或是按下快捷鍵 L ，會顯示一條連接線
拉線連至目標 Variant，並設定觸發條件，例如 On Click （點擊）
在右側面板 → Style → Transition 可以設定動畫效果，例如可以增加一點點反彈
在右側面板最上面的 Interations 點進去後，還可以設定：
Cycle ：如果不指定特定 Variant，開啟 Cycle 可以讓元件每次被點擊時，自動依照順序切換到下一個變體。
Appear：自動轉場，選取 Variant 本身設定 Appear 互動，可以做到時間到自動切換（適用於輪播 Banner）。
小結
Components 的入門重點就是這些了，學會建立元件、開 Variants、綁 Variables，就能把整站散在各處的重複元素重複使用，一開始建的時候可能覺得多花時間，但當你要改樣式、換文案、加新頁面時，就會發現前面下的功夫都能幫你省下很多時間。除此之外，也可以善用 Component 的特性，發揮創意做出很多特別的互動！很值得花一點時間摸索看看喔～