Đã bao giờ bạn làm Prototype mà phải nhân bản ra hàng chục màn hình chỉ để diễn tả việc người dùng chọn 1 món đồ, rồi 2 món đồ, rồi bỏ chọn? Hay bạn muốn làm tính năng: “Nếu chọn A thì sang trang X, chọn B thì sang trang Y” nhưng không biết nối dây thế nào cho gọn?

Trước đây, đó là cơn ác mộng “mỳ tôm” (Spaghetti connections). Nhưng kể từ khi Figma ra mắt Variables (Biến) và Conditionals (Điều kiện), mọi thứ đã thay đổi. Resource Select with conditional của Leandro Salemme chính là bài tập mẫu kinh điển giúp bạn hiểu và áp dụng tư duy lập trình vào thiết kế, biến Prototype trở nên thông minh như App thật.

1. Trong “chiếc hộp” này có gì?

File này không tập trung vào UI đẹp xấu, mà tập trung vào Logic vận hành bên dưới. Nó cung cấp các case study thực tế nhất về các màn hình lựa chọn (Selection Screens):

  • Đa lựa chọn (Multi-selection): Cho phép người dùng chọn nhiều phương án cùng lúc (như chọn sở thích, chọn topping). Hệ thống sẽ tự nhớ trạng thái On/Off của từng món.
  • Đơn lựa chọn (Single selection): Cơ chế “được cái này mất cái kia” (Radio button). Khi chọn A, B sẽ tự động bỏ chọn.
  • Điều hướng có điều kiện (Smart Navigation): Đây là tính năng cao cấp nhất. Nút “Next” sẽ hoạt động dựa trên lựa chọn của người dùng. (Ví dụ: Chọn “Học sinh” -> Dẫn sang trang nhập trường học; Chọn “Đi làm” -> Dẫn sang trang nhập công ty).
  • Trạng thái mặc định (Preselected): Cách thiết lập để khi mở màn hình lên, một số tùy chọn đã được chọn sẵn.

Bạn có thể tìm resource này bằng cách:

2. Hướng dẫn khai thác tối đa

Đây là tài liệu học tập (Learning Material) tuyệt vời để bạn nâng trình Figma từ cơ bản lên nâng cao:

  • Bước 1: Lấy về (Duplicate): Mở link resource và nhấn “Open in Figma” để nhân bản file về Drafts.
  • Bước 2: Mở bảng “Local Variables”:
    • Đừng chỉ nhìn màn hình. Hãy mở bảng Variables lên để xem tác giả đã đặt tên biến (Boolean, String) như thế nào để quản lý trạng thái của các nút bấm.
  • Bước 3: Soi Logic (Inspect Interactions):
    • Chuyển sang tab Prototype. Click vào các nút bấm và xem phần Interaction.
    • Bạn sẽ thấy các câu lệnh If/ else (Nếu… thì…). Hãy đọc hiểu logic đó: “Nếu biến A là true, thì set biến A thành false” (Logic bật tắt).
  • Bước 4: Áp dụng: Thử copy logic này vào các dự án Survey (Khảo sát), Onboarding (Màn hình chào mừng) hoặc bộ lọc sản phẩm (Filter) của bạn.

3. Kết luận

Select with conditional là cầu nối giúp Designer tư duy gần hơn với Developer. Hiểu được Variables và Conditionals không chỉ giúp Prototype của bạn gọn gàng hơn (giảm số lượng màn hình), mà còn giúp trải nghiệm dùng thử (User Test) trở nên chân thực hơn bao giờ hết.

Nếu bạn muốn thoát khỏi cảnh “nối dây thủ công” và bắt đầu làm Prototype thông minh, hãy tải ngay file này về nghiên cứu.