Thanh tiến trình (Progress Bar) là một UI component quan trọng giúp người dùng biết họ đang ở đâu trong một quy trình. Trong bài viết này, chúng ta sẽ cùng thiết kế một Progress Bar mang phong cách Glassmorphism hiện đại, kết hợp hiệu ứng phát sáng (Glow) cực kỳ bắt mắt trên Figma.
1. Bước 1: Tạo Primary Ellipse (Vòng tròn cho bước đang kích hoạt)
1. Bước 1: Tạo Primary Ellipse (Vòng tròn cho bước đang kích hoạt)
- Thêm một hình Elip (Ellipse) với kích thước 286 x 286.
- Tô màu nền (Fill) bằng dải màu Linear Gradient ở mức 100%.
- Thêm viền (Stroke) với độ dày 22 và sử dụng Gradient Radial ở mức 23%.
- Đừng quên thêm hiệu ứng phát sáng (Glow effect / Drop shadow) để tạo điểm nhấn nổi bật cho bước hiện tại.
- Tạo một hình Elip với kích thước tương tự nhưng xóa bỏ phần tô màu nền (Remove fill).
- Thêm viền màu trắng (mã #F8F9FB) với độ mờ (Opacity) ở mức 30%.
- Đổi số thứ tự bên trong thành "2" hoặc "3" tùy ý.
- Thêm hiệu ứng Background Blur để làm mờ nhẹ phần nền phía sau, tạo chiều sâu cho thiết kế.
- Vẽ một hình chữ nhật (Rectangle) dài để nối các bước lại với nhau.
- Bo tròn hoàn toàn các góc (Smooth out the corners).
- Tô màu xanh (mã #6262FF) ở mức 11% và giảm Opacity của toàn bộ layer xuống mức 11%.
- Copy và paste đường nền bạn vừa làm ở Bước 3, đặt nó nằm đè lên trên và giảm chiều rộng (Width) để thể hiện phần tiến độ đã hoàn thành (ví dụ kéo dài từ bước 1 sang bước 2).
- Tô màu (Fill) thanh này bằng Linear Gradient 100% (gợi ý các điểm dừng màu: #1E1A39, #5254C3, #8F80EA, #A7BFF8).
- Mẹo nhỏ: Bạn có thể thêm một hình Elip nhỏ xíu ở ngay đầu thanh tiến trình, sau đó thêm hiệu ứng Blur để tạo cảm giác vệt sáng đang chạy.
- Đặt tất cả các thành phần lại với nhau theo thứ tự: Đường thanh tiến trình nằm dưới các vòng tròn số.
- Thêm các đoạn text chú thích (ví dụ: "Step 1", "Step 2", "Step 3") ngay bên dưới mỗi vòng tròn.
- Căn chỉnh lại khoảng cách (Alignment) cho đều mắt là bạn đã hoàn thành một chiếc Progress Bar hoàn hảo!
Đính kèm
Cập nhật:
