Figma AI

Tạo Bản Nháp Giao Diện Bằng First Draft

Dùng First Draft để tạo nhanh khung giao diện ban đầu từ mô tả văn bản thay vì vẽ từ đầu.

Trong file Figma mới, chọn công cụ First Draft, nhập mô tả màn hình cần tạo (ví dụ: "màn hình đăng nhập với email, mật khẩu và nút đăng nhập").

Mô tả càng cụ thể về số lượng element và bố cục mong muốn, kết quả AI tạo ra càng sát với ý tưởng ban đầu.

Rà Soát Và Chỉnh Sửa Bản Nháp

Xem lại bố cục, khoảng cách và màu sắc AI tạo ra, chỉnh sửa lại cho khớp với brand guideline.

Chọn từng nhóm element, điều chỉnh spacing, font và màu sắc theo đúng style guide của thương hiệu đang dùng.

Đừng giữ nguyên 100% bản AI tạo, luôn thêm điểm nhấn riêng để tránh giao diện trông rập khuôn.

Tự Động Đặt Tên Layer Chuẩn

Dùng tính năng AI rename layer để tổ chức file gọn gàng, dễ bàn giao.

Chọn toàn bộ layer cần đổi tên, chạy tính năng "Rename layers" trong menu AI để Figma tự đặt tên theo nội dung/chức năng.

Kiểm tra lại tên layer quan trọng (ví dụ button chính, input field) để đảm bảo khớp với quy ước đặt tên của team dev.

Chuyển Thành Component Tái Sử Dụng

Biến các element đã hoàn thiện thành component để dùng lại xuyên suốt các màn hình khác.

Chọn nhóm element, bấm Create Component (Ctrl/Cmd + Alt + K), sau đó thêm vào thư viện design system của team.

Đặt tên component theo cấu trúc rõ ràng (ví dụ Button/Primary/Large) để dễ tìm kiếm khi thư viện lớn dần.

Test Luồng Tương Tác Bằng Figma Make

Liên kết các màn hình lại với nhau để tạo prototype có thể click-through thử nghiệm thực tế.

Dùng Figma Make hoặc Prototype tab để nối các frame theo luồng người dùng, sau đó chia sẻ link cho team test.

Thu thập phản hồi từ ít nhất 2-3 người trong team trước khi đưa design này cho dev triển khai chính thức.