復選框是現代用戶界面設計中不可或缺的重要組成部分。它們使用戶能夠輕松地進行多項選擇、確認操作或控制各種功能。
雖然復選框看起來很簡單，但在Figma中設計交互性強且可擴展的復選框，實際上需要對相關組件、變體、狀態及屬性有深入的理解。
本指南會為您詳細介紹所需了解的所有內容，從復選框的功能與種類，到構建完全交互式組件的具體步驟，應有盡有。
您還將學習一些最佳實踐，這些實踐有助于提升界面的可用性；同時，通過使用現成的組件，您還能更快地完成設計工作，從而打造出更高效、更具可開發性的設計方案。
目錄：
什么是復選框？
復選框是一種用戶界面元素，它允許用戶從一組選項中選擇一個或多個選項。每個復選框都是獨立運行的，因此用戶可以同時進行多項選擇。
在Figma中，復選框通常被設計成具有多種變體的組件，這樣設計師就可以在原型中展示不同的狀態，比如已選中、未選中、鼠標懸停時顯示的狀態，或是被禁用的狀態。
復選框的作用是什么？（我們為什么使用它？）
當用戶需要以下操作時，您可以在設計中使用復選框：
-
選擇多個選項
-
確認某個操作
-
啟用或禁用某項功能
-
同意某些條款或政策
常見的實際應用場景：
-
“我同意這些條款與條件。”
-
選擇通知偏好設置
-
在電商應用程序中篩選商品
-
在待辦事項應用中將任務標記為已完成
在Figma的原型設計中，交互式復選框能夠幫助模擬真實用戶的行為，從而讓設計在開發之前就更容易得到驗證。
UI設計中復選框的多種表現形式
不同的復選框格式
根據你的設計體系，復選框可以有多種呈現方式：
卡片式復選框選擇——將復選框與卡片結合使用，用戶可以通過卡片來選擇相應的選項。這種設計方式能夠提升視覺清晰度，特別適合用于需要選擇大量內容的場景。
簡單的待辦事項列表復選框——適用于任務列表的基本復選框布局，用戶可以用來標記已完成的任務項。這種格式常用于簡單的進度追蹤和效率管理。
狀態與完成狀態復選框——用于表示不同的任務狀態，如待處理、進行中或已完成。這類復選框有助于用戶快速了解任務的當前進展狀況。
錯誤提示復選框——當某個必填的復選框未被選中時，會顯示相應的錯誤提示。這種設計常用于表單中，以引導用戶完成必要的操作。
芯片樣式復選框選擇——將復選框與芯片風格的UI元素結合使用，提供緊湊的多選功能。這類設計非常適合用于篩選、標記或快速選擇操作。
嵌套式復選框結構——以父子關系組織復選框，支持批量選擇以及部分選中狀態，從而更好地實現層次化管理。
設計提示：
-
當用戶需要選擇多個選項時，應使用復選框。
-
當只允許選擇一個選項時，應使用單選按鈕。
復選框的狀態
一個設計良好的復選框應該能夠清晰地向用戶顯示其當前狀態。
常見的復選框狀態：
在下面的示例中，你可以看到復選框的各種狀態：未選中、已選中、部分選中、禁用且不可選中、以及禁用但可被選中：
未選中（默認狀態）：表示尚未進行任何選擇。這種狀態說明該選項是可用的，但目前未被選中。
已選中：表示用戶已經選擇了該選項。這種狀態通常會用勾號來表示。
鼠標懸停時顯示的狀態：當用戶將鼠標指針移到復選框上時，會顯示這種狀態，以表明該元素是可以交互的。
激活/被點擊時的狀態：當用戶點擊或觸碰復選框時，會進入這種狀態。在最終狀態確定之前，這種狀態會立即給予用戶反饋。禁用狀態：表示該復選框不具備交互功能，也無法被更改。通常會通過將其顏色變淡來提示該選項不可使用。
部分選中狀態：表示選擇了某些相關選項，但并非全部選項都被選中。這種狀態常用于表示父級元素與子級元素之間的關系。
Figma如何處理這些狀態（通過變體來實現）
在Figma中，使用組件內的變體來管理這些狀態是最有效的方法。這種方法允許你將同一UI元素的多個版本組合到一個有條理的組件集中。
無需為每種狀態分別設計不同的復選框樣式，通過變體功能，你可以在一個組件中定義所有狀態，比如已選中、未選中、懸停時以及禁用狀態。每種狀態都對應一個變體，你可以使用相應的屬性在它們之間進行切換，例如：
-
State = Unchecked -
State = Checked -
State = Disabled
這種做法有助于確保所有復選框實例保持一致性，并且可以通過屬性面板快速切換狀態。此外，通過關聯不同的變體，你還可以創建交互式原型（例如，點擊后狀態會變為已選中），同時有效避免重復制作組件，從而提高設計效率。
簡單來說，變體其實就是組件的不同“版本”，而Figma允許你將這些版本組合起來，模擬真實的UI交互效果——就像實際產品中復選框的工作方式一樣。
在Figma中創建交互式復選框的步驟
從零開始設計交互式復選框確實有助于學習，但在實際項目中，速度和一致性才是關鍵。
如果你需要可以直接用于生產的復選框組件，可以試試Shadcn Studio。
它提供了受現代設計理念啟發的、結構清晰且可擴展的UI組件，幫助設計師在保證質量的前提下提高工作效率。
步驟1：設計復選框的用戶界面
首先畫一個正方形（推薦尺寸為24×24像素），然后添加一個表示已選中狀態的勾選圖標（推薦尺寸為20×20像素）。
接下來添加文字標簽（推薦字體大小為14像素），可以使用自動布局功能來確保各元素之間的間距合適（推薦間距為12像素）。
最終效果應該如下圖所示：
步驟2：創建組件
將你設計的復選框轉換為一個可重復使用的組件，這樣就能確保設計的一致性和可擴展性。通過添加變體，你可以在一個組件集中高效地管理不同的狀態變化。
-
選擇復選框的設計樣式。
-
將其轉換為一個組件。
-
為不同的狀態創建變體：
-
未選中狀態
-
已選中狀態
-
不確定狀態
-
禁止選中操作
-
禁止取消選中操作
-
為這些變體屬性起明確的名稱，例如：
-
State = 未選中 -
State = 已選中
依此類推。
步驟3：為變體添加交互功能
在設置交互功能之前，首先需要了解其工作原理。
在Figma中，各個變體并不會自動知道如何在不同狀態之間切換。你必須明確指定某個變體在什么條件下會轉換成另一個狀態，這需要通過原型交互功能來實現。
可以這樣理解：
-
每個變體都代表一種狀態（未選中、已選中、懸停狀態等）。
-
交互規則就是告訴Figma在什么情況下應該切換這些狀態。
因此，當用戶點擊復選框時，你實際上是在告訴Figma：“當這個操作發生時（即被點擊），狀態應該從當前狀態切換到另一個狀態。”
正是這種機制使得復選框具備了交互功能，其工作原理與真實代碼中的狀態轉換邏輯類似。
現在讓我們來具體實現這一過程：
-
切換到原型選項卡。
-
選擇未選中變體。
-
添加一個交互規則：
-
觸發條件： 點擊操作
-
操作內容： 將狀態切換為→已選中
-
現在，重復相同的步驟來創建反向交互規則（這樣復選框就可以再次恢復到未選中狀態）：
-
選擇已選中變體。
-
添加一個交互規則：
-
觸發條件： 點擊操作
-
操作內容： 將狀態切換為→未選中
-
這種雙向交互機制（未選中→已選中、已選中→未選中）正是復選框具備切換功能的原因所在。
步驟4：測試復選框的功能
預覽該組件，確保所有的交互規則和狀態都能正常工作。這一步有助于驗證復選框在實際設計中的使用效果是否正確。
-
點擊“展示”按鈕。
- 嘗試操作這個復選框。
- 它應該能夠在已選中和未選中狀態之間切換。
復選框：各種屬性
在深入探討具體屬性之前，我們先來了解一下Figma中的變量是什么，以及它們為何如此重要。
Figma中的變量是什么呢？
Figma中的變量允許你存儲和控制各種數值，比如元素的可見性、文本內容、顏色、大小或狀態，并能在不同的組件中重復使用這些值。這與代碼中變量的作用方式類似。
與其手動修改每個組件的實例，不如使用變量來一次性定義某個值，然后動態地控制它的表現。
可以把變量想象成以下這些東西：
-
開關（布爾值）——用于控制元素的顯示或隱藏
-
選項（不同狀態）——允許元素在“已選中”或“未選中”等狀態下切換
-
可伸縮控件——能夠統一調整多個組件的大小、樣式或主題
這樣，你的組件就會變得更加靈活、可擴展，也更容易進行管理，尤其是在規模較大的設計系統中。
為什么要在復選框中使用變量？
復選框往往需要根據不同的使用場景來調整其顯示方式，比如是否顯示標簽、改變大小或切換狀態。利用變量，你就可以輕松實現這些調整，而無需為每種變化情況都創建單獨的組件。
通過使用變量，同一個復選框組件可以表現出多種不同的功能。
你可以用變量控制什么？
利用Figma的變量，你可以：
顯示或隱藏標簽——控制標簽是否與復選框一起顯示。當空間有限或者上下文已經很清晰時，這個功能非常有用。
狀態切換——定義“已選中”“未選中”“懸停”或“禁用”等狀態，以確保組件表現出一致的行為和反饋效果。
大小調整——指定復選框的大小（小、中、大），從而在不同用戶界面環境中保持視覺上的統一性。
創建多種變體——結合狀態、大小和標簽的顯示規則，創建結構化的組件變體，從而提高組件的可擴展性和便于管理性。
首先，我們來學習如何控制復選框中標簽的顯示與隱藏。
1. 將其轉換為組件
你可以將復選框轉換為一個可重復使用的組件，這樣就可以在多個設計項目中統一使用它了。此外，之后還可以為這個組件添加各種屬性和變體。
-
選中整個復選框，包括圖標和標簽文本
-
按Cmd / Ctrl + Alt + K將其轉換為組件
-
將組件的名稱改為“Check Box”
2. 為標簽創建布爾屬性
你可以使用布爾屬性來控制標簽的顯示與否。這樣，這個組件就能適應更多的使用場景了。
-
選擇主組件。
-
在右側面板的“屬性”選項中，點擊“+”按鈕。
-
選擇“布爾值”類型。
-
將此屬性命名為“Label”。
-
將默認值設置為“True”。
這個布爾值屬性用于控制標簽的可見性。
3. 將布爾值屬性與標簽的可見性關聯起來
你可以將這個布爾值屬性與標簽層關聯起來，從而根據該屬性的值來動態控制標簽的可見性。
-
僅選擇“標簽文本”層。
-
在右側面板的“外觀”選項中……
-
點擊圖片中標有紅色方塊的圖標。
-
選擇“綁定到屬性”選項。
-
選擇“Label Boolean”屬性。
現在，我們將學習如何為復選框添加與尺寸、狀態及變體相關的屬性。
我們會創建涵蓋以下所有情況的復選框設計：
-
狀態：未選中、已選中、不確定狀態、禁用選中狀態、禁用未選中狀態
-
變體：主變量、次級變量、信息提示變量、警告變量、破壞性操作變量
-
尺寸：小號、中號、大號
然后選擇所有這些復選框設計，通過點擊“創建多個組件”（Cmd / Ctrl + Alt + K）將它們轉換為組件。
當所有組件都被選中后，點擊“合并為變體”按鈕。