Figma Design 教材 / Class LLL

條件永遠同結果：追值與動作次序

先問if讀到什麼，再問Set何時改值

輸入明明改了，條件卻走舊結果？用分流器把待Set輸入、播放變數與判斷快照分開，調換動作次序觀察同一條件如何走If或Else。

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

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

閱讀目標

區分初值、播放值與待Set輸入
說明由上至下動作次序
指出條件實際讀取的當時值
辨認number／string／boolean運算用途
不把原型條件當正式資料驗證

適用條件與學習範圍

同樣把count設2、同樣if count == 2，為何只換動作次序就走不同結果？最後count已2，為什麼Else仍可能是正確的？

可直接閱讀；需補時看變數型別／綁定及原型觸發條件／動作。本站補讀返回保留程式與判斷快照，不強制闖關。

能說出條件判斷讀到的值、Set改值的時間與If／Else路徑，分辨number、string、boolean expression及無效型別；知道原型不是正式後端驗證。

預備有限三動作與具名expression情境，雙尺顯示目前count及最後判斷快照。不解析任意程式、不重現Figma所有動作／模式／binding／播放重啟／animation，也不連資料庫或真帳號。

原理與判斷

條件不是看讀者心裡想的輸入，也不是讀事件跑完之後才有的值。它在動作輪到自己時，讀當時播放狀態，得出true／false再選分支。設定變數列在它前面或後面，讀值就可能不同。原型可以把少數畫面接成有狀態的體驗，但這些值與條件仍是原型設計。看到成功畫面不代表真正庫存、權限、付款或表單資料通過後端驗證。雙尺就是為了讓「目前已改2」與「剛剛讀1」可以同時成立而不互相遮掩。

先建變數與綁定，再設事件改值

原型使用string／number／color／boolean四型變數；當期Motion的時間／緩動不可直接當此處value。先在變數建集合與變數，再按用途綁文字內容、物件尺寸或可見性；原型的設定變數只指定target及value，型別必須匹配。要看到畫面改變，也要確認正在觀察的層真的綁到那份變數，而非只改一份未使用的值。

設定變數改的是播放值

在來源熱點原型新增觸發條件，動作選設定變數、選Target，在Value填同型literal或變數。字串 literal要引號，number不是帶引號文字，boolean為true／false，color可用hex。本站設計count初值只供重播；本次Set輸入只是下一事件的number，不會一輸入就改播放count。送出事件才跑預備動作，正文、圖與讀數明分三者。

多動作由上至下，順序可改結果

同觸發條件可Add 動作疊多個動作，官方由上至下執行；在Interactions左側拖曳可換次序，也能把動作拖入條件判斷。以起始count 1為例，先Set 2再if count == 2會true；反過來先if讀1會false，之後Set才改2。所以最後count已2，不表示早先if一定true。本站三動作含Set label字串運算，預備清單與上次判斷快照各列，調次序後要再送一次。

條件判斷要得到boolean，不是任意非空文字

動作選條件判斷，If填受支援boolean expression，true跑If內動作，false跑Else內動作；Else也能留白。Invalid格式在原生欄位以紅框提示，不應把任意非空字串當true。本站分流盒只表示有限原型分支，成功／失敗是原創示例名稱，沒有驗證使用者或把訂單送出。

Expressions按目標型別選運算

設定變數的number／string／boolean可用expressions，條件判斷使用boolean expression。數值可+、−、*、/；string以+接字串及number，文字literal需引號；boolean可比較==、!=、>、<、>=、<=與and／or，並用!或not反轉boolean。色彩的Set literal不等於支援所有expression。不要把number 2與string "2"混成同型，也不要把本站JavaScript內部運算當原生語法解析器。

括號、比較與and／or先後

官方算術先括號、再乘除、再加減，同級由左到右；boolean先括號、再比較、再and、最後or。像count + 1 * 2和(count + 1) * 2不是同一件事；先寫出要比較的算術值，再讀>=的true／false。運算符不是裝飾，改持續時間或換頁也不會修錯誤公式。本站只給有限具名公式，不接受任意腳本或網路資料。

綁元件時仍要指出作用位置

官方可把變數綁實例變體屬性、元件屬性等，切換為、設定變數及設定變數模式有不同改值入口；相同變數綁到其他屬性時會受更新影響。作用範圍取決於綁在哪，不是同名就全檔同步。需要元件狀態的先回已發布變數／互動元件頁看相應條件，本台不假做全部元件 binding或模式 resolver。

回到初值需指定自己的重播政策

讀者返回教材要保留當前探索，和在原型重播／改值是兩個目的。本站重播count取設計初值並重建label、清判斷快照；整台重設再回最初設定。這是本地教具政策，不聲稱Figma所有restart、重設元件 state或多模式變數都依同樣規則復原。要在正式原型示範清狀態，逐項確認需要改哪些變數及操作位置。

方案、平台與資料邊界

本票三篇專文列任何付費方案；建立原型需可編輯，Expressions及條件判斷專文另列可檢視／可檢視 prototypes only可看。官方影片有舊介面提示，依當期文字與截圖查位置；網頁與桌面Design均以實際權限為準。本台沒有Figma帳戶或付費服務呼叫，沒有API、密碼、付款或正式資料驗證；讀數成功也不代表真產品安全、可用或學習有效。

步驟與觀察

把目標變數與畫面對上
建number count、string label及需要的boolean，核綁定層／型別；缺變數先補型別頁，不只搜尋名稱。操作名稱對照（中文為本站教學譯名）：原型 > Interaction details > Add 動作 > 設定變數（介面原文：Prototype > Interaction details > Add action > Set variable） Interaction details > Add 動作 > 條件判斷 > If／Else（介面原文：Interaction details > Add action > Conditional > If／Else） Interaction details > 動作左側拖曳排序（介面原文：Interaction details > action左側拖曳排序）設定變數 Value／條件判斷 If > expression > Enter／Return（介面原文：Set variable Value／Conditional If > expression > Enter／Return）
先寫出初值與預期條件
列count初值1，條件count == 2；決定false要Else還是留白，不拿最後值猜早先判斷。
加同觸發條件的Set與條件判斷
原型 > Interactions加動作，設定變數指target/value；條件判斷 If填合法boolean expression，配置分支。
調次序並重播比較
左側拖動作改由上至下順序；本站用select替代拖曳。同初值／輸入比較先判斷與先Set，觀察雙尺及快照。
核公式型別與括號
數值算術、string串接、boolean比較分開；原生expression輸入後Enter／Return，紅框時修受支援語法及型別。
走兩分支並重設
播放測If／Else，觀察當時讀值及綁定；回初值再試不同輸入，記錄網站重設政策與原生播放邊界。

常見問題

輸入已改，if卻仍走舊結果

核是否真的送觸發條件及Set是否在條件判斷之前；看判斷快照，不只看最後count。

Set到2但畫面文字沒變

核Target與型別、目標文字是否綁同一變數；string label若由expression設定，也要在正確時序更新。

數字2接不上number

看是否輸入帶引號的string "2"；選同型literal／變數，不靠看起來像數字強制轉型。

有Else卻沒離開框架

核false分支是否真的加動作或留白，以及觸發條件與navigate目標；false本身不自動導覽。

算術結果不如預期

先乘除後加減；需要先加時加括號。布林值比較再and／or，查具名操作而非延長動畫掩蓋。

成功畫面被當真資料通過

原型只是設計播放狀態；真登入、庫存、付款與表單需另建正式驗證與服務，本站沒有執行。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design advanced prototypes：三篇專文均列任何付費方案、建立需可編輯；條件／expression專文另列可檢視或可檢視 prototypes only觀看。原型四型與Motion用途分開，官方舊影片非當期介面證據。來源狀態：2026-10-22 Scrapling get --ai-targeted逐讀Variables in prototypes／Multiple actions and conditionals／Expressions，robots允許、HTTP200；Set型別、由上至下時序、If／Else及官方運算優先分列。示意限制：原創雙游標條件分流器，有限預備動作、待Set輸入、目前值與判斷快照同源。不是Figma全parser、binding／模式 engine或restart；不連後端、帳號或正式資料。原生軟體實測：未原生Figma、跨平台／方案或服務資料驗證實測；本站公開瀏覽器操作與官文查核分開。學習成效驗證：未真人可用性或學習成效實測。

參考來源

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