Nút bấm (button) mang phong cách Gradient với hiệu ứng ánh sáng rực rỡ, dải màu gradient đa sắc và lớp noise tinh tế đang là xu hướng giao diện cực kỳ được ưa chuộng. Bạn hoàn toàn có thể tự tay tạo ra những chiếc nút "bắt mắt" này ngay trên Figma chỉ với 7 bước thực hành đơn giản dưới đây.
Hãy bắt đầu bằng việc xây dựng bộ khung cơ bản nhất cho nút bấm của bạn:
Cuối cùng, biến bản thiết kế của bạn thành một Component và thêm các Biến thể (Variants) để nút bấm có thể tương tác được khi người dùng thao tác.
Bước 1: Tạo Button Đơn Giản
Hãy bắt đầu bằng việc xây dựng bộ khung cơ bản nhất cho nút bấm của bạn:
- Thêm một layer văn bản (ví dụ: "Generate AI" với kích thước font là 16px) và một icon ngôi sao lấp lánh (kích thước 20px).
- Chọn cả hai layer và nhấn tổ hợp phím Shift + A để đóng gói chúng vào một Auto-layout.
- Thiết lập các thông số khung: Kích thước (W: 280, H: 56), Bo góc (Corner radius: 32).
- Chỉnh khoảng cách Auto-layout: Padding ngang (Horizontal) là 64, Padding dọc (Vertical) là 16, và khoảng cách giữa chữ và icon (Gap) là 8.
Bước 2: Phủ Màu Gradient (Radial Fill) và Viền (Stroke)
Để thoát khỏi sự nhàm chán của màu trơn (Solid), chúng ta sẽ thêm chiều sâu bằng gradient:
- Đổi chế độ Fill từ Solid sang Radial. Tùy chỉnh màu lan tỏa từ tâm ra ngoài (Ví dụ: Từ tím sáng #A083F7 ở 0% đến tím đậm #27009D ở 100%).
- Thêm một lớp Stroke (viền) tinh tế cũng bằng chế độ Radial. Cài đặt màu trắng 100% ở một đầu và mờ dần về màu trắng 0% ở đầu kia để tạo hiệu ứng bắt sáng tự nhiên.
Bước 3: Đổ Bóng và Tạo Chiều Sâu (Add Effects)
Đây là bước "thổi hồn" cho thiết kế. Bạn cần kết hợp nhiều lớp bóng đổ khác nhau trong mục Effects:
- Inner Shadow (Bóng trong): Thêm 2-3 lớp Inner Shadow với chế độ hòa trộn Plus Lighter (màu trắng, độ mờ khoảng 22-24%). Cài đặt thông số Y âm và dương khác nhau để tạo cảm giác ánh sáng phản chiếu từ viền nút hắt vào trong.
- Drop Shadow (Bóng ngoài): Thêm các lớp Drop Shadow với màu tím đậm. Kết hợp một lớp bóng nhòe lớn (Blur 32, Y 36) để tạo luồng sáng tỏa ra xung quanh, và các lớp bóng nhỏ hơn để định hình viền ngoài.
Bước 4: Thêm Khung Nền Phụ (Add Extra Frame)
Để nút bấm nổi bật hơn trên giao diện thực tế, hãy tạo một viền mờ ảo bao quanh nó:
- Bọc toàn bộ nút hiện tại vào một Frame Auto-layout mới.
- Thiết lập khoảng cách (Gap) là 8, và Padding các cạnh là 6.
- Đổ màu nền (Fill) cho khung mới này với mã màu #3D00FF và giảm Opacity xuống chỉ còn 8%.
Bước 5: Thêm Vùng Bắt Sáng (Extra Details)
Để tạo hiệu ứng như có một nguồn sáng rực lên từ đáy nút:
- Nhấn phím O để vẽ một hình tròn và đặt nó lọt vào cạnh dưới bên trong nút.
- Đổ màu tím nhạt #E5CBFF (Opacity 32%).
- Đổi chế độ hòa trộn của hình tròn này sang Plus Lighter và thêm hiệu ứng Layer Blur với thông số làm nhòe mạnh (ví dụ: 48) để ánh sáng tản đều.
Bước 6: Phủ Lớp Nhiễu Hạt (Add Noise)
Lớp nhiễu hạt (noise) sẽ mang lại chất liệu chân thực và "cyber" hơn cho thiết kế:
- Chạy plugin Noise trong cộng đồng Figma.
- Tạo một lớp noise và đặt chế độ hòa trộn là Overlay, giảm Opacity xuống khoảng 16%.
- Bật tính năng Absolute position cho layer noise, sau đó thiết lập Constraints neo chặt vào cả 4 cạnh (Top and bottom, Left and right) để lớp hạt phủ kín toàn bộ diện tích nút.
Bước 7: Thiết Lập Chuyển Động Tương Tác (Interactive Animation)
Cuối cùng, biến bản thiết kế của bạn thành một Component và thêm các Biến thể (Variants) để nút bấm có thể tương tác được khi người dùng thao tác.
