Figma cho phép người dùng thiết kế và tùy chỉnh nhiều tính năng. Một trong những tính năng bạn có thể sử dụng để cải thiện trải nghiệm người dùng là hiệu ứng di chuột. Hiệu ứng di chuột trên các nút có nghĩa là bạn sẽ thấy một thiết kế khác khi bạn di chuyển con trỏ về phía nó. Bản thân hiệu ứng này có thể khác nhau, từ hiệu ứng tiêu chuẩn thay đổi màu sắc đến các phương pháp phức tạp hơn như thay đổi đường viền hoặc vùng sáng.
Đọc tiếp để tìm hiểu cách thêm hiệu ứng di chuột vào các thành phần của bạn trong Figma.
Tạo hiệu ứng di chuột trên các nút
Bạn có thể thiết lập hiệu ứng di chuột nếu bạn muốn thành phần của mình có sự tương tác và chuyển tiếp cụ thể khi bạn di chuột qua nó. Kết quả đơn giản nhất mà bạn có thể tạo là thay đổi màu của nút để làm nổi bật nút đó khi nhấp vào. Đây là cách bạn có thể tạo hiệu ứng di chuột trên thành phần nút:
- Làm nút.
- Nhân đôi nó và di chuyển nó ra ngoài khung.
- Thay đổi màu của nút trùng lặp.
- Tạo các thành phần bằng cách nhấp chuột phải và chọn “Tạo thành phần” từ menu hoặc bằng cách nhấn “Ctrl + Alt + K” trên bàn phím của bạn.
- Nhấp vào tab “Prototype” trong thanh bên.
- Kết nối hai thành phần nút.
- Trong trình đơn thả xuống “Chi tiết tương tác”, hãy chọn “Trong khi di chuột”.
- Nhấp vào tùy chọn “Mở lớp phủ” trong cùng một menu và đặt lớp phủ thành “Thủ công”.
Khi người dùng di chuột qua nút gốc, nó sẽ được thay thế bằng nút có màu khác. Bạn cũng có thể thay đổi văn bản hiển thị trên nút theo cách tương tự.
Bạn sẽ phải lặp lại điều này cho mỗi nút.
Tạo hiệu ứng di chuột trên viền nút
Một cách khác để sử dụng hiệu ứng di chuột trên các thành phần nút là tạo đường viền thay đổi khi bạn di chuột qua nút bằng con trỏ. Đây là cách bạn có thể làm điều đó:
- Tạo một nút có bất kỳ văn bản nào bên trong.
- Nhân đôi nó.
- Thêm nét vào bản sao, loại bỏ màu tô và thay đổi màu.
- Nhấp vào tab “Prototype” trong thanh bên.
- Kết nối hai thành phần nút.
- Trong trình đơn thả xuống “Chi tiết tương tác”, hãy chọn “Trong khi di chuột”.
Bây giờ khi bạn xem trước hiệu ứng nút và di chuột qua nó, các đường viền màu sẽ xuất hiện trên đó.
Sử dụng Plugin Anima trong Figma
Một cách khác để thêm hiệu ứng di chuột vào Figma là sử dụng công cụ thiết kế mã hóa Anima. Plugin này có các tính năng độc đáo mà bạn có thể triển khai khi tạo trang web, biểu tượng ứng dụng hoặc các thành phần web khác trong Figma. Bạn chỉ cần chọn thành phần nào bạn muốn tạo hiệu ứng động và điều chỉnh cài đặt cho phù hợp. Đây là cách thực hiện việc này:
- Chọn thành phần.
- Mở plugin Anima.
- Nhấn vào tùy chọn “Hover Effect”.
- Chọn hiệu ứng (tăng, thu nhỏ, phát sáng bóng, v.v.).
- Tùy chỉnh các hiệu ứng hoạt ảnh như “Thời lượng” hoặc “Đường cong”.
- Nhấn vào nút “Xem trước” để xem hiệu ứng.
- Nhấp vào “Lưu”.
Một tính năng khác của plugin Anime là bạn có thể tùy chỉnh CSS Transition. Với nó, bạn có thể kiểm soát tốc độ hoạt ảnh và điều chỉnh cài đặt của nó theo sở thích của mình hoặc làm cho chúng tự nhiên hơn.
Tận dụng tính năng hiệu ứng di chuột của Figma
Dù là nhà thiết kế chuyên nghiệp hay người mới bắt đầu, Figma đều có nhiều tính năng để tạo ra các thiết kế và hoạt ảnh độc đáo cho các thành phần, biểu tượng và đối tượng của bạn. Hiệu ứng di chuột cho phép bạn thay đổi văn bản hoặc thêm điểm nổi bật, màu sắc khác nhau, đường viền khác nhau, v.v. Biết cách tạo ra những hiệu ứng này là vô cùng quan trọng để làm cho trang web đầu tiên của bạn có tính tương tác và thêm dấu ấn cá nhân vào đó.
