Figma, công cụ thường được ví như “Google Docs của thiết kế UI/UX”, đã và đang cách mạng hóa thế giới thiết kế web. Đây là một nền tảng mạnh mẽ và trực quan, giúp bạn hiện thực hóa ý tưởng website của mình một cách sinh động. Kỷ nguyên của các bản thiết kế tĩnh đã qua rồi – với Figma, bạn có thể tạo ra các prototype tương tác cho phép trải nghiệm toàn bộ luồng và chức năng của website ngay cả trước khi viết bất kỳ dòng mã nào.
Figma cung cấp một không gian cộng tác tuyệt vời để tạo ra các bản prototype tương tác, thổi hồn vào các ý tưởng thiết kế web của bạn. Bài viết này trên congnghe360.net sẽ hướng dẫn bạn cách tận dụng tối đa các tính năng của Figma để thiết kế một prototype website hoàn chỉnh, có đầy đủ chức năng và sẵn sàng cho việc kiểm thử người dùng.
Thiết Kế Website Cơ Bản Trong Figma
Trước khi đi sâu vào quá trình tạo prototype trong Figma, chúng ta hãy cùng lướt qua quy trình thiết kế cơ bản. Đây là giai đoạn mà website hay ứng dụng của bạn bắt đầu hình thành về mặt hình ảnh.
Đầu tiên, bạn cần phác thảo các wireframe bằng cách sử dụng các hình dạng cơ bản để định hình bố cục của mỗi trang. Đây là bước khởi đầu quen thuộc trong nhiều dự án Figma. Sau đó, hãy thổi sức sống vào các wireframe này bằng cách áp dụng màu sắc và font chữ của thương hiệu, đảm bảo chúng truyền tải đúng thông điệp bạn muốn gửi gắm, đồng thời thêm vào các hình ảnh và video chất lượng cao.
Ví dụ, nếu bạn muốn tạo một website cho agency tiếp thị kỹ thuật số, bạn có thể chọn bảng màu tươi sáng, kiểu chữ đậm cho các tiêu đề nổi bật và những hình ảnh chất lượng cao về các chiến dịch thành công hoặc lời chứng thực của khách hàng. Trong quá trình này, hãy nhớ sử dụng các thành phần (components) có thể tái sử dụng như nút bấm và biểu tượng để đảm bảo giao diện nhất quán trên tất cả các trang.
Giao diện website mẫu đang được thiết kế trong Figma với các khung và thành phần UI
Bắt Đầu Tạo Prototype Trong Figma
Đây là phần thú vị nhất – làm cho các thiết kế tĩnh của bạn trở nên sống động với các tính năng tạo prototype mạnh mẽ của Figma. Hãy cùng bắt đầu!
Tổ Chức Các Thiết Kế Của Bạn
Trước khi bắt đầu tạo prototype, hãy đảm bảo bạn đã sao chép tất cả các màn hình và thành phần liên quan sang một trang mới trong Figma. Bạn nên sắp xếp mọi thứ theo thứ tự hợp lý để tránh nhầm lẫn và đặt tên rõ ràng, dễ nhận diện. Cách làm này cũng giúp bảo vệ các bản thiết kế gốc và giữ cho chúng luôn được tổ chức khoa học.
Sắp xếp các frame và trang thiết kế trong Figma để dễ dàng quản lý prototype
Thêm Kết Nối Và Tạo Luồng Tương Tác
Trong Figma, mỗi “frame” đại diện cho một màn hình trên website của bạn. Bạn sẽ liên kết các frame này lại với nhau để mô phỏng điều hướng của người dùng. Chúng sẽ định nghĩa cách người dùng di chuyển từ màn hình này sang màn hình khác. Hãy cùng tạo một tương tác cơ bản.
Trong ví dụ dưới đây, chúng ta đang tạo prototype cho một website của agency tiếp thị kỹ thuật số trong Figma. Tôi đã thiết kế một số trang chính: trang chủ với banner bắt mắt và các điểm nổi bật về dịch vụ, trang Giới thiệu về đội ngũ chuyên môn, trang Các trường hợp sử dụng (Use Cases) với ví dụ dự án, và trang Blog với các bài viết liên quan.
Để tạo một tương tác:
-
Chọn layer hoặc đối tượng bạn muốn tạo tương tác (ví dụ: một nút bấm).
-
Bạn có thể chọn biểu tượng + và kéo nó đến màn hình đích, hoặc nhấp vào tab Prototype từ menu bên phải.
Kéo đường kết nối để thêm tương tác giữa các phần tử và frame trong Figma prototype -
Mở rộng phần Interactions và khám phá các loại trigger khác nhau.
Giao diện tab Prototype trong Figma hiển thị các tùy chọn Trigger để tạo tương tác
Hãy cùng tìm hiểu nhanh về các tùy chọn này:
Các tùy chọn Trigger tương tác cơ bản trong Figma để mô phỏng hành vi người dùng
- On click: Đây là loại tương tác phổ biến nhất khi tạo prototype cho website. Tương tác xảy ra khi người dùng nhấp vào đối tượng.
- On drag: Tương tác diễn ra khi người dùng kéo đối tượng.
- While hovering: Xảy ra khi người dùng di chuột qua đối tượng.
- While pressing: Tương tác tiếp tục miễn là người dùng nhấn giữ đối tượng (thân thiện với màn hình cảm ứng).
- Key/Gamepad: Xảy ra khi người dùng nhấn một phím cụ thể.
- Mouse enter/leave: Tương tác diễn ra khi con trỏ chuột đi vào hoặc rời khỏi ranh giới của đối tượng.
- Mouse down: Tương tác xảy ra khi người dùng nhấn nút chuột xuống trên đối tượng.
Như đã đề cập, trong hầu hết các trường hợp, tùy chọn On Click là đủ cho prototype website. Bây giờ, đã đến lúc chọn một hành động (action). Dưới đây là các tùy chọn có sẵn:
Các tùy chọn Action khi tạo prototype trong Figma như Navigate, Open overlay
- Navigate to: Đây là hành động phổ biến nhất. Chọn frame đích bạn muốn liên kết đến.
- Change to: Chuyển đổi giữa các biến thể khác nhau của một thành phần (ví dụ: thay đổi trạng thái của nút từ “Bình thường” sang “Đã nhấn”).
- Open overlay: Hiển thị một frame khác lên trên frame hiện tại. Rất tiện dụng khi bạn muốn thể hiện các cửa sổ pop-up trong prototype website của mình. Khi chọn tùy chọn này, bạn cũng có thể chọn vị trí của frame overlay (giữa, trên, trái, hoặc dưới cùng bên phải).
- Swap overlay: Thay thế một overlay hiện có bằng một frame đích.
- Back: Đưa người dùng trở về frame trước đó.
- Close overlay: Đóng một overlay đang mở.
- Scroll to: Cuộn người dùng đến một phần cụ thể trong cùng một frame.
Bây giờ, hãy chọn frame đích từ menu cuối cùng và tương tác của bạn đã sẵn sàng.
Bạn cũng có thể thêm hoạt ảnh (animation) để làm cho quá trình chuyển đổi trở nên sống động. Có nhiều kiểu khác nhau như instant (ngay lập tức), dissolve (hòa tan), move in (di chuyển vào), move out (di chuyển ra), slide in (trượt vào), slide out (trượt ra) và push (đẩy). Trong số đó, tùy chọn Smart Animate rất đáng để thảo luận.
Cài đặt hiệu ứng chuyển động và transition trong Figma prototype
Smart Animate là một tính năng mạnh mẽ cho phép bạn tạo ra các hoạt ảnh chân thực và mượt mà giữa các frame trong prototype của mình. Nó phân tích sự khác biệt giữa các layer trong frame bắt đầu và frame kết thúc. Toàn bộ ý tưởng là giúp bạn tiết kiệm rất nhiều thời gian và công sức so với việc tự động hóa từng yếu tố một cách thủ công.
Tính năng Smart Animate trong Figma giúp tạo hoạt ảnh mượt mà giữa các frame
Đây chỉ là một ví dụ. Bây giờ, bạn có thể tiếp tục tạo các tương tác khác nhau và hoàn thành một prototype website. Hãy nhớ rằng đây chỉ là một bản prototype; bạn không cần phải làm phức tạp nó với các hoạt ảnh quá cầu kỳ.
Bạn có thể nhanh chóng chuyển đổi giữa tab Design và Prototype bằng cách sử dụng phím tắt Shift + E.
Điều Chỉnh Cài Đặt Prototype
Trước khi chạy prototype của mình, hãy đảm bảo bạn đã thay đổi các cài đặt cần thiết. Figma cho phép bạn tùy chỉnh tổng thể giao diện và hành vi của prototype.
Tùy chỉnh cài đặt hiển thị của prototype trong Figma với các lựa chọn thiết bị và màu nền
Khi prototype của bạn đã sẵn sàng, hãy vào phần Settings và chọn một danh sách các thiết bị được định nghĩa trước (chọn MacBook hoặc Surface Pro cho website), chọn màu thiết bị và thay đổi màu nền.
Chia Sẻ Và Cộng Tác Trên Prototype Figma
Bây giờ prototype website của bạn đã hoàn thành, đã đến lúc xem nó hoạt động. Nhấp vào biểu tượng “Play” ở góc trên cùng bên phải, và Figma sẽ mở một tab riêng biệt. Chọn các menu và nút khác nhau để đảm bảo mọi thứ hoạt động như mong đợi.
Nút Share prototype trong Figma để chia sẻ bản thử nghiệm website với đồng nghiệp hoặc khách hàng
Bạn có thể nhấp vào nút Share prototype ở góc trên cùng bên phải và sao chép liên kết để gửi cho người khác.
Hộp thoại Copy link để chia sẻ prototype Figma đã hoàn thành
Biến Ý Tưởng Của Bạn Thành Hiện Thực Với Figma
Dù bạn là một chuyên gia dày dặn kinh nghiệm hay mới bắt đầu hành trình thiết kế của mình, việc áp dụng các bước trên sẽ giúp bạn khai phá một cấp độ mới về hiệu quả và sự sáng tạo trong thiết kế web với Figma. Giờ đây, bạn đã sẵn sàng mời khách hàng và đồng nghiệp của mình trải nghiệm bản prototype, trình diễn một luồng điều hướng người dùng tinh tế trên website trước khi gửi nó cho các nhà phát triển để sản xuất.
Nếu bạn là người mới làm quen với Figma, hãy khám phá các plugin tuyệt vời để nâng tầm quy trình thiết kế của bạn. Và nếu Figma hoặc Sketch không phải là lựa chọn ưa thích, bạn có thể tìm hiểu thêm về Penpot, một công cụ thiết kế web mã nguồn mở giàu tính năng dành cho cả người mới bắt đầu và các chuyên gia.