Khi làm prototype (bản mẫu tương tác) trong Figma, đặc biệt là các màn hình Đăng nhập (Login), Đăng ký hay Tìm kiếm, bạn thường gặp một rào cản lớn: Figma không hỗ trợ gõ văn bản trực tiếp.

Thông thường, để giả lập hành động gõ phím, Designer phải tạo ra hàng chục màn hình nối tiếp nhau (Screen 1: Trống -> Screen 2: hiện chữ “A” -> Screen 3: hiện chữ “An”…). Cách này vừa tốn công, vừa làm file nặng nề mà trải nghiệm vẫn rất “giả”.

Mặc dù Figma đã cập nhật tính năng Variables (Biến số) để hỗ trợ việc này, nhưng việc thiết lập logic cho nó cực kỳ phức tạp với người mới. Đó là lý do plugin Interactive Typing Input ra đời. Nó giúp bạn tạo ra một ô input có thể gõ được bàn phím thực sự chỉ trong vài giây.

1. Plugin này là gì? Làm được gì? Dành cho ai?

Plugin Interactive Typing Input là công cụ tự động tạo ra các Component input field được cài đặt sẵn các biến (variables) và logic tương tác phức tạp.

Thay vì bạn phải tự tay gán sự kiện “On Key Press” cho từng phím, plugin này sẽ “đóng gói” tất cả kỹ thuật đó vào một component duy nhất. Khi chạy Preview (trình chiếu), bạn có thể click vào ô đó và gõ nội dung từ bàn phím máy tính y như trên web thật.

Tính năng chính:

  • Gõ văn bản thực tế: Hỗ trợ nhập liệu từ bàn phím khi đang chạy Prototype.
  • Tùy chỉnh giao diện: Bạn có thể chỉnh màu nền, màu viền (stroke), bo góc, font chữ, cỡ chữ ngay trong bảng điều khiển của plugin để khớp với Design System.
  • Hỗ trợ Input ẩn (Password): Có chế độ biến các ký tự gõ vào thành dấu chấm (•) hoặc dấu sao (*) để làm ô mật khẩu.
  • Không cần code: Bạn không cần biết về logic Variables hay Conditionals, plugin làm hết cho bạn.

Plugin này đặc biệt hữu ích cho:

  • UX Researcher: Cần làm các bài test người dùng (Usability Test) chân thực nhất. Việc người dùng có thể gõ thật sẽ giúp họ nhập tâm hơn vào kịch bản test.
  • Interaction Designer: Muốn mô phỏng chính xác trải nghiệm điền form (Form filling).
  • Product Designer: Muốn trình bày ý tưởng search box (hộp tìm kiếm) hoạt động mượt mà cho Developer xem.

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

  • Tìm “Interactive Typing Input” trên Figma Community.
  • Hoặc truy cập trực tiếp qua link này.

2. Hướng dẫn sử dụng

Bước 1: Mở plugin Interactive Typing Input trong file thiết kế của bạn.

Bước 2: Thiết lập giao diện cho ô input:

  • Width/Height: Kích thước của ô.
  • Text Style: Chọn font, màu chữ.
  • Border/Fill: Màu viền và màu nền.
  • Input Type: Chọn Text (văn bản thường) hoặc Password (nếu muốn che ký tự).

Bước 3: Nhấn nút Create. Plugin sẽ sinh ra một Component đặc biệt trên màn hình.

Bước 4: Kéo Component đó vào trong Frame thiết kế của bạn (ví dụ đặt vào chỗ nhập Username).

Bước 5: Bấm nút Present (Play) để chạy thử. Click vào ô input bạn vừa tạo và thử gõ bàn phím xem, chữ sẽ hiện ra ngay lập tức!

Mẹo nhỏ:

  • Placeholder: Bạn có thể tạo thêm một layer text mờ mờ (“Nhập tên của bạn…”) đặt đè lên trên input để làm placeholder. Khi người dùng click vào thì ẩn layer text đó đi (dùng tính năng Interactive Component).
  • Kết hợp: Dùng plugin này kết hợp với các nút bấm “Submit”. Vì đây là input thật dựa trên Variables, bạn hoàn toàn có thể lấy dữ liệu người dùng vừa gõ để hiển thị sang màn hình tiếp theo (Ví dụ: Gõ tên “Nam” -> Qua màn hình sau hiện “Xin chào, Nam”).

3. Kết luận

Plugin Interactive Typing Input là mảnh ghép còn thiếu để biến bản Prototype tĩnh của bạn thành một ứng dụng “sống” thực sự.

Nó xóa bỏ ranh giới giữa thiết kế và lập trình, mang lại trải nghiệm tương tác cao cấp nhất mà không đòi hỏi bạn phải là một chuyên gia về logic Figma. Nếu bạn đang đau đầu với các màn hình đăng nhập hay điền form, hãy để plugin này gánh vác phần khó khăn nhất giúp bạn.

Thử ngay đi, cảm giác gõ được chữ trong Figma thực sự rất “phê” đấy!