Class LLL / 設計星團教材目錄編輯與來源

Figma Design 教材 / Class LLL

Variants：尺寸與狀態，怎樣才是一個組合？

先定義有意義的差異，再建立唯一對應

按鈕狀態不是多複製幾張圖就完成。用尺寸與State矩陣查每個組合對到哪個變體，辨認預設、缺組合及重複，再分清設計外觀與原型互動。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 11 分鐘

開啟互動教材查看參考來源

閱讀目標

適用條件與學習範圍

同一顆按鈕有大小、預設、按下及停用外觀，怎樣組織才不會選錯或重複？

能以少數具名維度找到唯一變體，解釋缺組合不一定是錯、重複組合需要整理，並知道State名稱不會自動建立互動。

有限的尺寸兩值×State三值，只比較離散外觀及組合。未模擬Figma缺組合時的搜尋／切換替代、所有覆寫保留、文字／布林／交換屬性、內容槽、原型觸發、動畫與完整資源庫流程。

原理與判斷

變體是同類元件的一個具體設計，元件組把這些來源放在一起，用具名屬性和值讓使用者選擇。Size=Large、State=Disabled合起來才是完整組合；只說「Large那個」會漏掉狀態。兩份即使畫得不同，只要屬性組合完全相同，仍會造成衝突。 組合表是檢查設計承諾的方式，不是要求把所有可能值全部排列做完。先決定哪些差異有意義、哪些組合真正支援，再讓每個已提供的組合清楚對應一個來源。

元件組收的是相關元件，不是任意分組

一個元件組包含多個變體，每個變體本身是元件。適合把同類按鈕的尺寸、狀態整理在一起，不是把所有不同圖示或互不相關的圖稿硬湊成一組。官方不建議用變體單純收納不同圖示，但同一圖示的不同尺寸可以有合理關係。 元件組內只能放元件；說明文字與標註應放在外面，不能把它當任意框架巢狀放文字、一般框架或群組。使用端拖入的是某個變體的實例，仍保有來源引用，並非每次切值就建立普通副本。

屬性是維度，值是該維度的選項

本例尺寸有Small／Large，State有預設／Pressed／停用，形成六個可能位置。每個變體用同一套屬性描述，且需要唯一組合。維度命名應表達設計用途，避免保留變體、Property 2等轉換後的泛稱。 尺寸與State是本例的設計決定，Figma不會因為你叫Pressed就替你產生凹下效果，也不會因為叫停用就建立真實產品的權限或無障礙行為。右側預約按鈕的大／小及降低高度是本站原創外觀，先看清設計資料再談互動。

缺組合可以是刻意不提供

插卡台預設五個變體，Large／停用留空；選它時命中0件，不虛構第六份外觀。若產品確實不允許這個組合，就記清限制；若需要支援，才補齊設計與命名。官方說不必為每個可能的屬性組合都建立元件，因此少一格不自動等於錯誤。 本台為了校對，沒有唯一命中就停住，並提供「補齊Large／停用」比較。這是本站的有限檢查策略，不宣稱原生Figma遇到不存在組合時會出現相同提示或採同一個替代；回到文件應檢查實際可選值與最後選中的來源。

重複組合不是多一個風格選項

放入第二份Small／預設，該格有兩件、重複1組；即使外觀不同，尺寸和State仍無法唯一指出你要哪個。官方會對完全相同的值組合提示衝突，需要修正受影響變體的值。 先問這份差異是否有真正用途：若是另一種屬性，給它有意義名稱；若是誤複製，整理回唯一對應。本模型只放入或移除虛構重複卡，不讀寫原生文件。不要為了消除提示就隨機加一個無意義值，否則使用者仍不知道應選誰。

預設與命名決定使用端先看到什麼

官方以元件組左上角變體作預設，資源用它代表整組；本例固定Small／預設在左上。插入後在右側屬性欄改值，才能確認目前實例選哪個來源。畫布位置可以整理方便閱讀，但不要把手動矩陣位置誤當成自動排版或所有產品的同一規則。 舊元件可用斜線名稱協助轉換，官方要求各元件的屬性層級順序一致；轉換後仍要在屬性改成清楚的屬性名稱與值。若有錯字、缺維度或順序混亂，先從右側檢查，不只盯著外觀。Large不表示依內容調整／填滿，State也不等於程式變數。

切到Pressed外觀，還沒接上Click互動

這頁的尺寸／State按鈕是網站用來檢查設計組合的控制，不是Figma 原型連線。無論選哪份變體，讀數都是原型連線0條；預設外觀不會因為你滑過圖面就自動變成Pressed。 官方interactive 元件是在同一元件組的變體之間另建原型互動，例如設定觸發條件及切換為。那是後續完整原型教材的責任。建立／使用變體適用所有方案且原檔管理需可編輯；發布到資源庫另有付費及權限條件，不能把本地有變體當成已發布、已互動或已交付程式元件。

步驟與觀察

  1. 列出真正有意義的差異

    用自己的按鈕稿先寫下尺寸與狀態需求，決定支援哪些組合。每個差異應幫使用端選擇，不只因為畫面看起來不同就多一個維度。先能辨main與實例，不在使用端隨便解除連結來湊數量。 操作名稱對照（中文為本站教學譯名）： 多個主元件 > 右側 > Combine as 變體（介面原文：多個主元件 > 右側 > Combine as variants） 元件組 > 右側屬性 > 屬性名稱與值（介面原文：Component set > 右側 Properties > 屬性名稱與值） 實例 > 右側 > 變體屬性值（介面原文：Instance > 右側 > variant屬性值） 資源 > 元件組 > 拖入實例（介面原文：Assets > Component set > 拖入instance）

  2. 建立來源，再Combine as 變體

    在有可編輯的Figma Design檔建立相關元件，選取後從右側Combine as 變體放進元件組。若還是普通圖層，先Create 元件；說明文字留在set外，不把任意框架當變體。

  3. 為屬性和值命名並查唯一性

    選元件組，在屬性將泛稱改為尺寸／State等用途名稱；逐個變體核對完整值組合。同值不同外觀仍是衝突，先修正真實分類或誤複製，避免隨機補值。

  4. 明示缺組合與預設

    用矩陣逐格比較；未提供的組合寫清原因，需要時才新增對應變體。將合理起始外觀安排為左上預設，核對資源代表圖。本站校對停住不等同原生Figma的缺組合切換規則。

  5. 從資源插入並改實例屬性

    到資源拖入元件組，確認預設實例；在右側選尺寸／State值，核對實際來源。來源資源庫需可檢視，插入與修改所在文件需可編輯。完整覆寫保留及資源庫發布接收另看其流程。

  6. 把外觀選擇與互動分開驗

    選到Pressed後，不先宣稱懸浮／click已可用；到原型檢查是否真的有觸發條件及切換為等動作。此頁只驗組合資料，沒有接原生原型或生成程式，網站重設只還原本地示意。

常見問題

有Small與停用，卻找不到Small／停用那份

兩個維度都要符合且要實際建立。查完整組合與實際來源，不由兩個選項存在就推定所有排列都有；必要時補齊或註明不提供。

兩張圖不一樣卻被標值衝突

衝突看完整屬性組合是否重複，不看視覺差異。先給差異合理維度，或整理誤複製，不用亂命名掩蓋。

把所有可能值做滿，元件組越來越大

先以產品需要取捨，不必窮舉全部組合。官方提醒插入實例會帶入整組變體，大set會影響性能；不要以數量當成熟度。

插入時不是想要的預設外觀

查元件組左上變體及資源代表圖，插入後核對右側屬性值；不要只依排列印象認定當前來源。

State叫Pressed，點了卻沒有反應

名稱只是設計資料。到原型查實際觸發條件、動作與切換為；本頁連線始終0，不把切外觀的網站按鈕當原生互動。

轉換後只有變體／Property 2，選項難懂

在屬性改用途名稱並查值順序。若用斜線轉換，先核對每份來源層級一致與錯字；不把自動命名當已完成語義設計。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design；變體／元件 sets所有方案，建立管理需可編輯；使用資源庫需來源可檢視，所在文件插入需可編輯；資源庫發布付費條件依來源。平台以具名屬性／資源入口核對。 來源狀態：2026-10-22讀2026-10-21 S13保存正文的組合、命名、預設、缺／重複及使用段；N06為22日研究者保存正文。22日新讀並Scrapling取得interactive components intro／Change to段，僅支持另需Prototype互動的邊界，不宣稱已完成FG35或全部子流程。 示意限制：本站原創Button與尺寸×State插卡矩陣，5個起始變體／6個可能位置，缺與重複只作本機有限校對。不模擬Figma缺組合替代、完整覆寫合併、原生互動或資源庫服務。 原生軟體實測：未原生Figma實測，未發布資源庫或接原型；官方正文與本站公開瀏覽器證據分開。 學習成效驗證：未真人試用，沒有學習成效或程式交付證據。

參考來源

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

相關知識