元件屬性：改文字、顯示與來源，該選哪一種？

閱讀目標

• 按內容、顯隱、巢狀來源或離散設計選控制
• 指出元件屬性實際綁定哪個子層
• 分清Text內容與rich 文字、布林值顯隱與刪除
• 理解來源預設、實例差異及不屬於本頁的巢狀／內容槽邊界

適用條件與學習範圍

同一個按鈕要改文案、拿掉圖示或換圖示，是否每次都要新建一個變體？

• 先理解main與實例；可補讀主元件與實例。尺寸選擇只需知道是離散設計，本頁不要求先懂全部變體組合。

能指出目前變的是文字內容、Icon可見性、Icon引用來源或尺寸型態，給控制用途名稱，並知道建立屬性後還要綁到正確圖層。

有限Button、兩個圖示來源、兩個同名同層級尺寸。Rich 文字／字型排版、所有覆寫合併、巢狀exposed 屬性與preferred完整流程、內容槽、原型及資源庫發布另票；本物理控制匣不是原生內容槽屬性。

原理與判斷

元件屬性是一份可變部分的操作介面。使用者看到Label、Show icon、Icon與尺寸，就能知道哪些地方可改，無需每次深入找子層猜測。這個介面應反映實際變化：文字內容、圖層可見性、巢狀來源及離散型態不是同一種資料。 把每個小差異都做成變體會增加組合；把所有差異都塞進布林值也不能表達多值選擇。先辨認差異，再選屬性，最後核對控制真的連到對的部位。

建立屬性，還要把它綁到正確部位

官方元件屬性由main或元件組定義，實例使用者在右側屬性看到集中控制。建立一個叫Label的Text屬性，不代表所有文字層都自動受它控制；還需將它套用到目標文字層。同樣地，Show icon要接到圖示可見性，Icon 替換要接到巢狀實例。 控制匣左側四列分別對準右側Button的Label、Icon可見性、Icon來源及尺寸。聚焦一個欄位會標示作用部位，但不自動更改其他屬性。這是先說出「改誰」的練習，不是宣稱本站已讀寫你的Figma元件。

Text改字串，不等於完整文字排版介面

把Label由預約改立即預約，變的是原創Button的文字內容；留空則顯示空字串，圖示及元件結構仍在。本模型將Label與框寬分開，固定Small／Large尺寸，不讓文案長短自動決定寬度；真實文件若會跟著改，應另查文字尺寸與自動排版。 官方Text 元件屬性不支持完整rich 文字面板表達，例如清單或上標等格式。若文字原有項目／編號清單，從右側Text屬性改字串可能移除清單樣式，需保留時改從畫布編輯。本頁的8字元是本站示意限制，不是Figma文字上限，也不模擬字型、繁中斷行或清單格式。

布林值是該層顯示與否，不是刪資料

目前官方布林值元件屬性支持圖層可見性，true顯示、false隱藏。把Show icon關掉，Icon在畫面消失，但來源引用仍是Calendar；此時本台改Icon為箭頭，再開顯示，就會看到箭頭。這說明「是否顯示」和「用哪個來源」是兩個問題。 本例採固定位置，Icon隱藏後Label不自動左移；不能由此推論真實自動排版也一定保留空位。布林值元件屬性也不同於任意布林值變數或原型條件，不因開關就自動形成兩個可互接原型的物件。先核對你需要的是顯隱、另一個離散設計，還是互動流程。

實例替換換引用，變體選設計型態

Icon控制在Calendar與箭頭兩個原創巢狀元件來源之間切換；Button仍是同一個外層結構。尺寸則選Small或Large這兩個離散變體，代表另一套指定尺寸。兩者都可能看起來像下拉選單，但前者回答「這個巢狀使用處引用誰」，後者回答「這個元件選哪種設計」。 官方實例替換屬性可為巢狀實例設定預設來源，來源可來自同檔或已加入的libraries。Preferred 實例是協助選擇的推薦，不能當成權限鎖；完整推薦與巢狀exposed控制另由後續教材承接。本例只有兩個示例，不聲稱原生只能選兩個或所有來源都能不帶條件互換。

預設值與單一實例改動要分開

Text、布林值與實例替換可在來源定義預設；修改預設會反映到沒有該項覆寫的實例。使用端改Label或Icon則是自己的使用情境，不因右側面板集中顯示就自動反向修改main。尺寸的變體預設另由元件組左上角變體決定。 本台兩個尺寸採同名同層級Label／Icon，切尺寸時保留其本地值，方便比較四種控制。這不代表任意真實變體或替換都能無條件保留所有差異；完整保留條件、重設與解除連結另看對應流程。先查來源與作用部位，勿靠解除連結解決找不到控制。

讓介面可理解，保留更深的邊界

用Label、Show icon、Icon與尺寸這類用途名稱，搭配清楚預設、描述及可用條件，比Property 1更容易讓使用者選擇。官方記錄Simplified 實例自2026-03-23起退場，舊教學中的隱藏介面不能當成當期固定入口；以實際屬性與圖層面板確認。 原生內容槽屬性提供可變內容區，與本頁換一個巢狀來源不同；也不能只因元件有四個控制就宣稱所有孩子都能任意增刪。需要將深層屬性露出、管理推薦或可組合內容時，應進入各自完整問題。本文停在四種差異的選用與綁定，沒有原型連線、資源庫發布或原生Figma實測。

步驟與觀察

1. 先指出可變部位與用途

   在有可編輯的Figma Design檔，以自己的Button來源辨認文字層、圖示巢狀實例及尺寸設計。列出要改字串、顯隱、引用或型態；不要先複製大量變體再補理由。 操作名稱對照（中文為本站教學譯名）： 主元件／元件組 > 右側屬性 > 新增屬性（介面原文：Main component／Component set > 右側 Properties > 新增屬性） 文字層 > Text > Apply variable/property（介面原文：文字層 > Text > Apply variable/property） 圖示層 > Appearance > Apply variable/property（介面原文：圖示層 > Appearance > Apply variable/property） 巢狀實例 > Apply 實例替換屬性（介面原文：巢狀instance > Apply instance swap property） 實例 > 右側屬性 > 欄位／切換／dropdown（介面原文：Instance > 右側 Properties > 欄位／toggle／dropdown）

2. 建立Text並接到目標文字

   選main或元件組，在屬性新增Text，給用途名稱與預設字串；再選目標文字層，從Text的Apply variable/property套用。也可在該文字層直接建立並套用。到實例確認右側欄位確實改到這段文字。

3. 用布林值接圖示可見性

   在來源建立布林值並設定預設true／false；選圖示層，在Appearance的Apply variable/property套用。到實例開關，觀察是否只是顯示變化，並核對真實排版是否跟著重排；本站固定位置不模擬自動排版。

4. 為巢狀實例建立替換控制

   選Icon巢狀實例，從Apply/create 實例替換屬性建立或套用具名屬性，選合理預設來源。到外層實例屬性用Icon選單替換，核對是換來源，不是改同一vector幾何或選另一個尺寸變體。

5. 比較變體並檢查預設與保留

   若尺寸確有兩種離散設計，放在元件組的變體屬性選擇。改尺寸後核對Label／Icon的實際值；本台固定同名同層級並保留本機值，真實資料需另查覆寫條件。不要把預設來源與某次使用差異混在一起。

6. 從使用端驗證介面是否說得清楚

   選實例，從右側屬性的文字欄、切換與dropdown完成同一組操作，確認每個名稱和目標一致。需要rich 文字時回畫布，控制藏太深或要可組合內容時另查巢狀exposed／內容槽；本站重設只清原創示意，不操作原生帳戶。

常見問題

新增Label屬性，輸入卻沒有改到想要的字

檢查是否套用到正確文字層、選的是main還是實例及目前部位。建立屬性不等於自動綁所有同名文字；先核對連結而非再複製一份。

圖示隱藏後，以為來源被刪掉

顯隱與來源分開；本台Show icon false仍保留Icon值，開回來可看到。真實物件若仍不見，續查父層顯隱、歸屬與綁定，不把所有消失都當刪除。

只為了有／無圖示就建立大量變體組合

若只是圖層可見性可考慮布林值；若需要另一個結構或原型互動，另查變體與原型條件。不要只依外觀差異做機械分類。

把Icon下拉與尺寸下拉當同一種屬性

前者是巢狀實例替換，後者選離散變體；看來源與作用範圍，不看控制長得像不像。

從右側Text改文案後清單格式不見

Text 屬性不是完整rich 文字介面。官方建議需保留清單樣式時從畫布改字；也要另檢查字型與文字框，本示意不模擬格式引擎。

切尺寸後期待所有任意覆寫都無損保留

本台同名同層級是固定前提，不是Figma所有結構的承諾。查實際圖層名稱、原值與層級等保留條件；需要深入重設／替換取捨再看專責流程。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design；元件屬性官方列所有方案，建立管理與使用需文件編輯存取權；實際產品座位／來源資源庫存取仍需相應條件。Web／桌面版按具名屬性／Text／Appearance入口核對。 來源狀態：2026-10-22新Scrapling --ai-targeted取得並讀C1／C2的類型、建立套用、預設、實例編輯與退場提示；C1與既有21日S45 raw hash相同。N13為22日研究正文，用於保留條件；S13為21日正文22日讀，只支持variant預設，不冒稱所有來源當日重抓。 示意限制：本站原創Button、Calendar／箭頭及四列控制匣。固定位置、8字元示意、同名同層級的兩尺寸；不模擬完整字型／rich 文字、自動排版、所有覆寫保留、exposed／preferred、原生內容槽、資源庫服務或原型。 原生軟體實測：未原生Figma操作／輸出實測，未登入帳戶、發布或建立原型；來源查核與本站公開瀏覽器證據分開。 學習成效驗證：未真人試用，沒有學習成效或正式設計系統驗收證據。

參考來源

• Figma Help｜Explore component properties
• Figma Help｜Edit instances with component properties
• Figma Help｜Apply changes to instances
• Figma Help｜Create and use variants

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

相關知識

• 主元件與實例：改一處，誰會跟著變？ — 屬性介面仍有來源與使用處

  右側集中控制不會取消main／實例關係。先分清來源預設與單次使用差異，才知道建立、綁定或修改應在哪裡做。