Tạo bảng điều khiển đáp ứng với Figma

Sep 11, 2025

Cách

Figma là một công cụ đồ họa cho các nhà thiết kế UI. Nó có một giao diện đơn giản và cho phép bạn hợp tác làm việc với đồng đội của mình. Nếu bạn muốn làm việc ngoại tuyến, bạn có thể chọn sử dụng ứng dụng máy tính để bàn. Ngoài ra, Figma hoạt động trên bất kỳ hệ điều hành nào (Xin chào, Windows), vì vậy bạn không phải cài đặt bất cứ thứ gì cả. Và bắt đầu rất dễ dàng - bạn có thể nhập các thiết kế bố trí trước đó từ bản phác thảo.

[số 8] Chọn một trang web Builder: 16 Công cụ hàng đầu

Trong Figma, bạn có thể tạo mọi thứ bạn cần cho giao diện của mình, từ các biểu tượng vector minh họa đến bố cục tùy chỉnh. Chỉnh sửa nhiều người chơi có thể tiết kiệm nhiều thời gian cho các nhóm thiết kế, vì nó có nghĩa là tất cả các thành viên trong nhóm có thể hoạt động trên cùng một bố cục cùng một lúc. Và đây thậm chí không phải là tất cả các tính năng tuyệt vời của nó.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách được thiết lập với Figma, sau đó đi bộ qua cách tạo màn hình ứng dụng di động, từng bước. Trong trường hợp này, chúng tôi sẽ thiết kế bảng điều khiển cho một ứng dụng thống kê hư cấu. Khi bạn hoàn tất, bạn sẽ có thể tạo các giao diện khác nhau trong figma và hoạt động với chúng với nhóm của bạn trong thời gian thực.

01. Đăng ký

Trước hết, bạn cần đăng ký tại www.figma.com. . Quyết định nếu bạn muốn sử dụng công cụ trong trình duyệt của mình hoặc tải xuống ứng dụng Desktop. Để tải xuống phiên bản máy tính để bàn, hãy chuyển đến menu Hamburger ở góc trên cùng bên trái và nhấp vào 'Tải ứng dụng máy tính để bàn'.

02. Tạo một tấm tường và lưới điện

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — Thêm một lưới cơ sở để giúp bạn định vị các yếu tố của mình một cách hài hòa (nhấp vào hình ảnh để phóng to)

Đánh A. để tạo ra một nghệ thuật. Bạn có thể chọn một trong các cài đặt trước hoặc tạo kích thước tùy chỉnh của riêng bạn. Đối với dự án này, chúng ta sẽ sử dụng điện thoại & GT; iPhone 7 (375x667px). Để tạo một lưới, trước tiên hãy chọn artboard. Sau đó, trên thanh bên phải tìm 'Lưới bố cục' và nhấn '+'. Thiết lập số cột: 6, máng xối: 16, lề: 8 và loại: Kéo dài.

03. Vẽ một hình chữ nhật cho nền

Hãy bắt đầu với nền. nhấn Ở r Để hiển thị công cụ hình chữ nhật và vẽ một hình chữ nhật # 5F98FA không có viền. Đặt kích thước thành 375x363 bằng bảng thuộc tính ở phía bên tay phải.

04. Thêm một thanh trạng thái

Set the gradient for the status bar using the properties panel on the right on the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge) — Đặt độ dốc cho thanh trạng thái bằng bảng thuộc tính ở bên phải trên màn hình. Tại đây bạn có thể điều chỉnh các tùy chọn màu để tạo độ dốc tuyến tính (nhấp vào hình ảnh để phóng to)

Tiếp theo, chúng tôi muốn đặt một thanh trạng thái ở đầu màn hình. nhấn Ở r Để đặt chiều rộng: 375, Chiều cao: 64, Vị trí (X: 0; Y: 0). Đối với thanh điều hướng của chúng tôi, hãy đặt Gradient Fill bằng bảng kiểm tra thuộc tính ở bên phải. Tìm tùy chọn 'điền', nhấn vào bản xem trước màu và chọn 'tuyến tính' từ menu thả xuống. Màu sắc ở trên cùng phải là # 77A6F7 và ở dưới cùng # 5A93F5 (Opacity 100 phần trăm cho cả hai).

05. Nhập một thanh trạng thái iOS

Thật không may, Figma không bao gồm các phần tử UO theo mặc định. Tuy nhiên, có một tệp có tên 'Tệp mẫu', đó là thiết kế ứng dụng iOS, vì vậy chúng tôi có thể mượn thanh trạng thái từ đó. Sao chép tùy chọn thanh trạng thái ánh sáng, dán nó vào tệp hiện tại và đặt nó ở (x: 0; y: 0). Sử dụng công cụ văn bản ( T. ), Nhấp vào bảng vẽ của bạn để thêm tiêu đề vào thanh điều hướng. Tôi đã đi cho Avenir nặng, 15px, #FFFFFF. Căn chỉnh tiêu đề của Trung tâm Ngang, Y: 33.

06. Tạo một biểu tượng trở lại

Ở bên trái của thanh điều hướng phải là một biểu tượng 'trở lại'. Tôi sẽ tạo ra điều này từ đầu. Tạo một hình chữ nhật 14x14px, thêm Xoay 45 độ, X: 14; Y: 43. Nhân đôi hình chữ nhật này và đặt nó ở x: 18; Y: 43. Chọn cả hai hình chữ nhật và dưới menu trên cùng đi đến Nhóm Boolean & GT; Trừ đi lựa chọn. Sau đó, quay trở lại các nhóm Boolean & GT; Lựa chọn phẳng, hoặc nhấn CMD + E. .

07. Kết thúc biểu tượng mũi tên

Biểu tượng mũi tên của chúng tôi gần như đã được thực hiện. Bây giờ chúng ta chỉ cần đặt chiều rộng và chiều cao thành các giá trị số - trong trường hợp của tôi chiều rộng: 12px; Chiều cao: 20px. Bước cuối cùng là đặt màu Điền thành #FFFFFF.

08. Tạo một biểu đồ

Bây giờ chúng ta sẽ tạo một biểu đồ. Đầu tiên, chúng tôi sẽ đưa vào một số nguyên tắc. Chọn Công cụ Hình chữ nhật ( Ở r ) và đặt x: 24 y: 147; Chiều rộng: 1; Chiều cao: 166; Điền màu # B3DCFF và độ mờ 20%.

Nhân đôi hình chữ nhật này bốn lần với lề 80px. Ở dưới cùng của mỗi hướng dẫn, chúng ta cần thêm nhãn ngày bằng các lớp văn bản ('ngày 2 tháng 2', 'ngày 9 tháng 2', 'ngày 16 tháng 2', 'ngày 23 tháng 2', 'Mar 1'). Tôi đã sử dụng Avenir Medium, lúc 11px, # C1D8FF.

09. Tạo dòng dữ liệu

Sử dụng công cụ bút ( P. ) Chúng ta cần tạo một vectơ để thể hiện dòng dữ liệu. Nhấp và kéo để tạo điểm Bézier. Hình dạng này nên có nét 4px và không điền, #FFFFFF.

Hãy thêm một bóng thả để giúp dòng nổi bật: Nhấp vào phần '+' trên phần hiệu ứng và chọn 'Drop Shadow'. Sử dụng các cài đặt sau để tạo bóng mượt mà và thanh lịch: Blur: 3px, Y: 7px, # 2951FF, Opacity: 100%.

10. Thêm chi tiết vào biểu đồ

Use the Text tool to add values to the places the guidelines intersect with the data line — Sử dụng công cụ văn bản để thêm các giá trị vào vị trí các nguyên tắc giao nhau với dòng dữ liệu

Tại các điểm mà các hướng dẫn giao nhau với dòng dữ liệu, chúng ta sẽ thêm các vòng tròn. Lần này chúng ta sẽ sử dụng công cụ Ellipse ( Vả lại ), mà bạn sẽ tìm thấy trong menu thả xuống kèm theo công cụ hình chữ nhật. Vẽ các vòng tròn 8x8px trên mỗi giao điểm và đặt màu Điền thành # 5F98FA. Chúng ta cần thêm một nét: Nhấp vào nút '+' bên cạnh phần Stroke, đặt Trọng lượng: 2px và Align: Center.

11. Chạm cuối cùng

Để hoàn tất phần biểu đồ, chúng ta chỉ cần thêm các giá trị vào các điểm giao nhau của chúng tôi. Với công cụ văn bản ( T. ) Chọn Avenir Black, 11px, # 1F4991.

12. Ba hộp thông tin

Bên dưới biểu đồ dòng, chúng ta sẽ tạo ba ô hiển thị thêm thông tin. Sử dụng công cụ văn bản ( T. ) Hãy tạo tiêu đề đầu tiên của chúng tôi: 'Giá trị ước tính của cổ phiếu của bạn': X: 16; Y: 391, Avenir Medium, 15px, # 5D7EB6. Ở bên phải của tế bào đặt giá trị '$ 1,115', kiểu văn bản: Avenir nặng, 22px, # 5f98fa, căn chỉnh văn bản: trái, x: 287; Y: 387.

13. Làm một cái tách

Vẽ một hình chữ nhật có chiều cao 1px và kéo dài toàn bộ màn hình (# f5f5f5; x: 0; y: 435) - Điều này sẽ hoạt động như dấu cách phân cách giữa các ô. Chọn tiêu đề, giá trị và dấu phân cách và tạo một nhóm ( CMD + G. ).

14. Thêm tiêu đề

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — Bên dưới biểu đồ sẽ là ba ô hiển thị các phần dữ liệu chính (nhấp vào hình ảnh để phóng to)

Sao chép nhóm này để bạn có ba nhóm với khoảng cách dọc 24px giữa chúng. Thay đổi tiêu đề thứ hai thành 'Tổng số thành viên' và nhóm thứ ba hướng đến 'bạn bè đã đăng ký' và cập nhật các giá trị liên quan.

15. Vẽ và căn chỉnh một hình chữ nhật khác

Bây giờ chúng ta sẽ thêm một cuộc gọi để hành động. Vẽ một hình chữ nhật bên dưới ô cuối cùng, chiều rộng: 195; Chiều cao: 44, khoảng cách trục Y từ dải phân cách cuối cùng 21px.

Sử dụng các công cụ Align, hãy xếp hàng hình chữ nhật bằng trung tâm ngang. Sau đó đặt màu tô thành # 5f98fa và Roundness thành 22 (bạn sẽ tìm thấy trường này sau 'xoay' trong bảng Thuộc tính). Sau đó, thêm một hiệu ứng bóng đổ (màu sắc: #abdaff; Opacity: 100%; Y: 5; Blur: 11).

16. Đặt một số văn bản trên nút

Thêm văn bản vào nút bằng công cụ văn bản ( T. ): 'Nhận thêm cổ phiếu!' Đặt cái này trong Avenir Black, 15px, #FFFFFF. Căn chỉnh văn bản theo trung tâm của nút. Cuối cùng, nhóm tất cả các yếu tố với nhau và đặt tên cho họ đúng cách.

17. Làm cho nó đáp ứng

Bây giờ chúng tôi sẽ điều chỉnh bố cục của chúng tôi để nó đáp ứng với iPhone khác nhau (320x568, 375x667 và 414x736). Để làm điều này, chúng ta phải sử dụng các ràng buộc, mà bạn sẽ tìm thấy trong menu Thuộc tính ở bên phải.

18. Đưa bố cục đúng

Nếu bạn chọn 'trái' hoặc 'phải' trên việc thả xuống ngang, nhóm sẽ mã PIN vào bên bạn đã chọn của màn hình và sẽ không kéo dài. Nếu bạn chọn 'TRUNG TÂM', nhóm hoặc lớp sẽ kéo dài để nó lấp đầy chiều rộng của màn hình. Chúng ta cần thực hiện thanh trạng thái nổi trong vị trí, vì vậy chúng tôi muốn tùy chọn 'Phải & amp; bên trái' (hoặc giữ 'cmd' và nhấp vào các thanh bên trái và bên phải trên sơ đồ).

19. Kiểm tra nó

Hãy thử điều này. Với thanh trạng thái được chọn, nhấn tùy chọn 'Phải & amp; bên trái'. Chọn một trang trí và thay vì iPhone 7, chọn iPhone 7 Plus. Nó hoạt động đúng ngay cả khi bạn chọn kích thước iPhone SE.

20. Kiểm tra từng lớp

Hãy xem xét phần còn lại của các lớp. Đối với nền thanh điều hướng, chúng tôi muốn sử dụng 'Phải + trái'. Đối với thanh điều hướng Tiêu đề: 'Trung tâm'. Đối với biểu tượng Mũi tên Quay lại, tốt nhất là sử dụng tùy chọn 'bên trái' - theo cách này mũi tên sẽ được ghim sang bên trái màn hình.

21. Đặt biểu đồ dòng

Bây giờ hãy đặt biểu đồ dòng. Đối với các hướng dẫn, ngày và vòng tròn giao nhau, chúng tôi muốn sử dụng 'trung tâm'. Đối với dòng dữ liệu và nền, chúng ta sẽ sử dụng 'Phải & amp; trái'. Trong phần Dữ liệu bổ sung, chúng tôi muốn sử dụng 'bên trái' cho mỗi tiêu đề, 'phải' cho mỗi giá trị và 'Phải & amp; bên trái' cho các dòng phân cách. Đối với nhóm Nút CTA hãy đặt 'Trung tâm'.

22. Đặt các ràng buộc dọc

Bước cuối cùng là đặt các ràng buộc dọc. Thanh trạng thái, thanh điều hướng, dòng dữ liệu và vòng tròn giao nhau và các tiêu đề liên quan nên được đặt thành 'TOP'. Nền của biểu đồ, ngày và hướng dẫn nên được đặt thành 'Trung tâm'. Mỗi nhóm dữ liệu bổ sung phải được đặt thành 'Trung tâm' dọc và nhóm nút CTA phải được đặt thành 'dưới cùng'.

23. Làm cho nó hoạt động cho mỗi kích thước màn hình

Chúng ta hãy nhân đôi Artboard hai lần và đặt một đến kích thước của iPhone 7 Plus và khớp với kích thước trên iPhone SE. Trên phiên bản Plus, bạn sẽ cần giảm khoảng cách giữa các ô bổ sung cuối cùng và nút CTA bằng cách chọn nhóm ô và tăng chiều cao từ 195 đến 225. Trên phiên bản SE, bạn sẽ thấy rằng các ô thông tin tràn ngập Nút CTA, vì vậy chúng ta phải chọn nhóm ô và giảm chiều cao lên 150.

24. Hoàn thành tất cả!

Này, chúc mừng! Chúng tôi đã hoàn thành toàn bộ màn hình ứng dụng trong figma. Bây giờ chỉ cần kiểm tra mọi thứ được thực hiện, và bạn có thể ngồi lại và cảm thấy như một chuyên gia.

Bài viết này ban đầu được đặc trưng trong Tạp chí Net. phát hành 288; Mua nó ở đây.

Những bài viết liên quan:

[số 8] Khái niệm Behance mới trông giống như một ứng dụng Killer

[số 8] Thiết kế cho tác động xã hội

[số 8] 8 lời khuyên cho Ace Tech Jobs Phỏng vấn