Chia sẻ qua

Thiết kế ứng dụng của bạn bằng bộ công cụ UI

[Bài viết này là tài liệu trước khi phát hành và có thể thay đổi.]

Để tạo một ứng dụng từ một thiết kế, bạn phải bắt đầu với Bộ công cụ Figma Tạo ứng dụng từ UI Figma . Bộ giao diện người dùng bao gồm các thành phần, ứng dụng mẫu và một số tài nguyên bổ sung như:

  • Thông tin về những gì được hỗ trợ và những gì không.
  • Hướng dẫn từng bước về cách thiết kế ứng dụng của bạn trong Figma để nó có thể được chuyển đổi trong Power Apps.
  • Danh sách các thành phần được hỗ trợ, từ màn hình cơ sở đến các thành phần riêng lẻ như nút, menu thả xuống và mục nhập văn bản.
  • Hướng dẫn quan trọng về cách sử dụng các thành phần.

Nhận bộ giao diện người dùng

  1. Đi tới trang Tạo ứng dụng từ Figma Bộ công cụ giao diện người dùng .
  2. Nếu cần thiết, hãy đăng nhập bằng thông tin đăng nhập Figma.
  3. Chọn Nhân bản, sau đó chọn Figma đội mà bạn là thành viên. Để biết thêm thông tin về việc sao chép các dự án trong Figma, hãy xem Figma: Sao chép các tệp hoặc dự án.
  4. Nếu cần, hãy chọn mũi tên xuống bên cạnh tên tệp và di chuyển tệp ra khỏi bản nháp của bạn.

Đọc phần hướng dẫn

Đọc hướng dẫn từ các trang Đọc phần này trước và Bước 1: Bắt đầu bên trong bộ công cụ UI. Hướng dẫn trên các trang này giúp bạn hiểu các nguyên tắc chung về việc sử dụng bộ tài liệu này. Bạn cũng sẽ tìm hiểu thêm về các tài nguyên được sử dụng bởi bộ công cụ, chẳng hạn như kiểu phông chữ, hướng dẫn thành phần, các thành phần được hỗ trợ và hơn thế nữa.

Thiết kế ứng dụng

Làm theo hướng dẫn trong trang Bước 2: Thiết kế ứng dụng bên trong bộ công cụ UI để bắt đầu sử dụng bộ công cụ này nhằm tạo thiết kế ứng dụng của riêng bạn.

Những điều nên làm và không nên làm khi thiết kế

Bộ tài liệu này có hướng dẫn chi tiết về cách sử dụng các thành phần. Tuy nhiên, đây là một số điều nên làm và không nên làm hàng đầu khi thiết kế ứng dụng:

  • Hãy đọc kỹ từng trang để quá trình thiết kế và quá trình chuyển đổi diễn ra suôn sẻ.
  • Chỉ thiết kế bằng cách sử dụng các thành phần được hỗ trợ từ bộ này.
  • Chỉ sử dụng các phông chữ được hỗ trợ được liệt kê trong bộ.
  • Không thay đổi tên thành phần.
  • Không thay đổi các lớp thành phần.

Thông tin thêm

Bộ tài liệu này cũng cung cấp các trang bổ sung để biết thêm thông tin như được tóm tắt bên dưới:

Bước tiếp theo: Tạo ứng dụng canvas từ Figma

Xem thêm