Cách sử dụng Bộ giao diện người dùng trong Adobe XD

Đối với những người quan tâm đến thiết kế web, bộ giao diện người dùng trong Adobe XD là một cách tuyệt vời để bắt đầu một dự án thiết kế mới. Với những bộ công cụ này, bạn có quyền truy cập vào một số tài nguyên hữu ích mà bạn có thể sửa đổi và sử dụng cho thiết kế trang web hoặc ứng dụng của mình.

Nếu bạn là người mới sử dụng phần mềm và không chắc chắn về cách sử dụng các bộ giao diện người dùng trong Adobe XD, thì bạn đã đến đúng nơi. Trong bài viết này, tôi sẽ chỉ cho bạn cách bạn có thể cài đặt các bộ giao diện người dùng trong phần mềm và sau đó sử dụng các tài nguyên đi kèm cho dự án của mình.

Cách tải bộ công cụ giao diện người dùng trong Adobe XD

Trước tiên, chúng ta hãy xem cách bạn có thể tải xuống các bộ giao diện người dùng trong Adobe XD, ngay từ bên trong phần mềm. Chỉ cần làm theo các bước sau để bắt đầu:

Bước 1: Bấm vào nút menu bánh hamburger ở góc trên cùng bên trái của phần mềm.

Bước 2: Trong menu, cuộn xuống tùy chọn Get UI Kits và sau đó nhấp vào một trong ba tùy chọn có sẵn.

Đối với bài viết này, tôi sẽ chọn bộ giao diện người dùng Vật liệu của Google. Tuy nhiên, tùy thuộc vào dự án của mình, bạn có thể chọn bộ công cụ Apple iOS hoặc Microsoft Windows. Điều đó sẽ mở ra một trang web chính thức mà từ đó bạn có thể tải xuống miễn phí bộ giao diện người dùng.

Bước 3: Tìm bộ giao diện người dùng Adobe XD trong trang web sau và tải xuống trên hệ thống của bạn.

Bước 4: Bây giờ hãy mở tệp đã tải xuống trong Adobe XD và bạn sẽ được chào đón với một loạt các bảng vẽ chứa tài nguyên giao diện người dùng cho nền tảng tương ứng.

Bạn có thể giữ nút Ctrl và di chuyển con lăn để phóng to / thu nhỏ để xem tất cả các bảng vẽ riêng lẻ.

Nếu bạn muốn tải xuống Wireframes thay thế, bạn có thể nhấp vào tùy chọn Wireframes trong menu Get UI Kits.

Bạn cũng có thể tìm kiếm các bộ UI bổ sung trên trang web của Adobe bằng cách nhấp vào tùy chọn More UI Kits trong menu Get UI Kits.

Trang web có một số tùy chọn tuyệt vời để bạn lựa chọn, bao gồm bộ Movie Magic UI thực sự thú vị này trông giống như một màn hình hiển thị trực tiếp.

Bây giờ bạn đã biết cách tải xuống các bộ giao diện người dùng, hãy xem cách bạn có thể sử dụng chúng trong các dự án của mình.

Cách sử dụng Bộ giao diện người dùng trong Adobe XD

Để sử dụng bộ giao diện người dùng trong dự án của bạn, chỉ cần làm theo các bước đơn giản sau:

Bước 1: Phóng to phần tử giao diện người dùng bạn muốn sử dụng trong dự án của mình và nhấp vào tiêu đề của nó để chọn nó.

Bước 2: Bây giờ sao chép phần tử bằng phím tắt Ctrl + C.

Bước 3: Sau đó, mở một dự án Adobe XD mới từ menu.

Bước 4: Tại đây, dán phần tử giao diện người dùng bằng phím tắt Ctrl + V.

Đối với bài viết này, tôi sẽ sử dụng phần tử Mobile Dark từ bộ giao diện người dùng Material UI của Google. Phần tử này bao gồm các hướng dẫn để giúp bạn đặt nhiều lớp hơn , nhưng nếu không muốn sử dụng, bạn có thể dễ dàng loại bỏ chúng bằng cách làm theo bước tiếp theo.

Bước 5: Để xóa hướng dẫn, nhấp vào biểu tượng ổ khóa ở góc trên cùng bên trái rồi nhấn xóa. Bạn có thể bỏ qua bước này nếu bạn muốn sử dụng các đường dẫn để đặt chính xác nhiều đối tượng hơn vào phần tử.

Bước 6: Bây giờ quay lại bộ giao diện người dùng để chọn một phần tử khác để thêm vào trang này. Một lần nữa, nhấp vào tiêu đề của phần tử và sao chép nó bằng phím tắt Ctrl + C.

Tôi sẽ tạo một bánh mì nướng cơ bản cho bài viết này mà tôi sẽ sử dụng một trong các hộp thoại.

Bước 7: Dán phần tử mới vào phần tử trước đó và sau đó căn chỉnh nó theo hướng dẫn.

Bước 8: Bây giờ để chỉnh sửa từng phần tử trong bánh mì nướng, hãy nhấp đúp vào hộp văn bản và sau đó nhập văn bản bạn muốn sử dụng. Đầu tiên, hãy thay đổi tiêu đề của bánh mì nướng.

Tiếp theo, thay đổi nội dung của phần nội dung bằng cách nhấp đúp vào hộp văn bản và nhập bất cứ thứ gì bạn muốn thêm.

Bạn cũng có thể thay đổi văn bản của các nút theo cách tương tự. Sau khi hoàn tất việc chỉnh sửa văn bản, bạn có thể thay đổi màu sắc và độ mờ của văn bản. Để thay đổi độ mờ, chỉ cần di chuyển thanh trượt bên dưới tùy chọn Độ mờ trong thanh công cụ sang bên phải.

Để thay đổi màu của văn bản, hãy bấm vào hình chữ nhật bên cạnh tùy chọn Tô màu rồi chọn một màu mới từ bộ chọn màu.

Và không chỉ văn bản mà bạn có thể chỉnh sửa theo cách này. Bạn cũng có thể thay đổi màu sắc và độ mờ của hầu hết các mục trong hộp thoại, điều này thật tuyệt nếu bạn đang chọn một bảng màu độc đáo.

Khi bạn đã hài lòng với kết quả, chỉ cần tiếp tục và lưu tệp của bạn bằng cách nhấp vào tùy chọn Lưu dưới dạng trong menu hoặc bằng cách sử dụng phím tắt Shift + Ctrl + S.

Hoàn thiện thiết kế của bạn bằng bộ giao diện người dùng

Bây giờ bạn đã biết cách tải xuống và sử dụng các bộ giao diện người dùng trong Adobe XD, tôi chắc chắn rằng bạn sẽ bắt đầu tạo ra các thiết kế tuyệt vời ngay lập tức. Những bộ giao diện người dùng này chắc chắn khá tiện dụng và giúp bạn đi thẳng vào dự án của mình mà không cần lo lắng về việc thiết kế từng phần tử giao diện người dùng.

Tiếp theo: Đã hoàn thành một dự án trên Adobe XD và không biết làm thế nào để xuất nó sang HTML? Hãy xem bài viết tiếp theo để biết hướng dẫn từng bước đơn giản.