Xây dựng ứng dụng chạy được từ thiết kế Figma

Nếu ứng dụng của bạn đã được thiết kế trên Figma, MonstarX có thể xây dựng thẳng từ chính bản thiết kế. Bạn có một ứng dụng chạy được, trông giống các màn hình của bạn — với hình ảnh và biểu tượng thật, màu sắc và kiểu chữ, cùng luồng điều hướng trong prototype — cộng thêm dữ liệu, biểu mẫu và đăng nhập mà các màn hình ngầm cần đến.

Tôi cần chuẩn bị gì?

Một tệp .fig của bản thiết kế. Trong Figma, mở bản thiết kế và dùng File → Save local copy… — lệnh này lưu ra tệp mà MonstarX đọc được. Đó phải là tệp Figma Design: bảng FigJam và bộ trang chiếu Figma Slides không được hỗ trợ, và MonstarX sẽ báo nếu bạn thả nhầm.

Làm sao để xây dựng từ tệp Figma?

1. Ở trang Dự án, nhấp vào Figma cạnh Nhập (lựa chọn này cũng có trong menu Nhập). Bạn cũng có thể kéo thả hoặc dán tệp .fig vào ô nhập câu lệnh.

   

2. Thả tệp .fig vào hoặc chọn tệp. MonstarX đọc tệp ngay trong trình duyệt — “Đang đọc tệp…”, “Đang mở từng trang…”, “Đang vẽ màn hình…” — và chưa có gì được tải lên.

3. Đánh dấu các màn hình cần xây dựng. Mọi trang trong tệp đều được liệt kê kèm các khung (frame) vẽ thu nhỏ. Những khung trông giống màn hình được đánh dấu sẵn; những trang trông như phần quản lý thiết kế (trang bìa, hệ thống thiết kế, kho lưu trữ) được thu gọn và để trống. Dùng Đánh dấu tất cả hoặc Bỏ chọn tất cả cho từng trang.

4. Trong Ứng dụng nên làm gì? (không bắt buộc), nói những gì thiết kế không thể hiện được: ai dùng, dữ liệu lấy từ đâu, chuyện gì xảy ra khi có người đăng ký hoặc thanh toán.

   

5. Kiểm tra mô hình ở góc dưới bên trái (đó là mô hình đang chọn trong ô nhập câu lệnh; bạn có thể đổi tại đây).

6. Nhấn Xây dựng ứng dụng này · 4 màn hình — hoặc Lập kế hoạch trước, để MonstarX nghiên cứu các màn hình và hỏi về những gì thiết kế không thể hiện trước khi xây dựng.

Các màn hình được tải lên (“Đang tải thiết kế lên…”), dự án được tạo và đặt theo tên tệp, rồi lần xây dựng đầu tiên bắt đầu.

MonstarX lấy những gì từ thiết kế của tôi?

• Mỗi màn hình dưới dạng ảnh — để tác nhân MonstarX thấy chính xác những gì bạn vẽ, và đối chiếu các trang với ảnh đó trong lúc làm.
• Mô tả chính xác từng màn hình — bố cục, khoảng cách, mọi đoạn chữ kèm phông và cỡ chữ, màu sắc, đường viền, góc bo, đổ bóng.
• Hình ảnh và biểu tượng của bạn — mọi hình ảnh và biểu tượng trong thiết kế trở thành tệp trong ứng dụng, nên không có gì bị thay bằng ảnh có sẵn trên mạng.
• Hệ thống thiết kế của bạn — biến màu (sáng và tối), kiểu chữ, bán kính góc bo và đổ bóng.
• Thành phần (component) — một nút dùng trên mười màn hình sẽ thành một thành phần duy nhất trong ứng dụng.
• Liên kết prototype — chỗ một lần chạm dẫn tới sẽ thành điều hướng thật.

Các màn hình trùng tên (một luồng khung cùng tên “Desktop”) được phân biệt bằng những chữ đầu tiên trên màn hình, để bạn biết màn hình nào là màn hình nào.

Mẹo

Các trạng thái của một trang — hộp thoại đang mở, danh sách trống, thông báo lỗi — có thể đi kèm dưới dạng khung riêng. MonstarX xây dựng chúng thành các trạng thái của trang đó thay vì thành những trang riêng biệt.

Cuộc trò chuyện hiển thị gì?

Yêu cầu đầu tiên của bạn sẽ có dạng, ví dụ, “Xây dựng ứng dụng này từ thiết kế Figma của tôi ‘bloom.fig’ (4 màn hình: Welcome, Home, Plant detail, Add plant). Hãy làm cho ứng dụng giống hệt thiết kế và thực sự hoạt động.”, kèm một dải ảnh các màn hình bên dưới. Nhấp vào một màn hình để xem kích thước đầy đủ, cùng kích thước, trang và tệp. Trong lúc xây dựng, cuộc trò chuyện hiển thị các bước như “Đang xem thiết kế của Home” và “Đã so sánh / với thiết kế của Home”.

Sau này tôi có thêm màn hình được không?

Được. Trong cuộc trò chuyện của một dự án, kéo thả, dán hoặc đính kèm một tệp .fig và cửa sổ Thêm màn hình từ Figma sẽ mở ra. Đánh dấu các màn hình mới, nói chúng cần làm gì, rồi nhấn Xây dựng những màn hình này. Các màn hình đó được thêm vào thiết kế của dự án và được xây dựng đồng bộ với phần còn lại của ứng dụng. Mỗi dự án giữ tối đa 60 màn hình thiết kế.

Giới hạn là bao nhiêu?

Giới hạn	Giá trị
Số màn hình mỗi lần xây dựng	tối đa 30
Số màn hình mỗi dự án	tối đa 60
Hình ảnh và biểu tượng mỗi thiết kế	tối đa 400 tệp và 150 MB (mỗi tệp 8 MB)

Tệp .fig có thể lớn tới 250 MB, nhưng một tệp rất lớn (như cả một bộ kit hệ thống thiết kế) vẫn có thể quá nặng để trình duyệt mở. Hãy chuyển các màn hình của ứng dụng sang một tệp riêng, không kèm các trang hệ thống thiết kế, rồi lưu bản sao cục bộ của tệp đó.

Câu hỏi thường gặp

Tôi có dán liên kết Figma thay cho tệp được không?

Không, trong hộp thoại này thì không — hộp thoại đọc chính tệp .fig. Hãy dùng File → Save local copy… trong Figma. (Một số công cụ thiết kế cũng gửi được bản thiết kế qua Tác nhân lập trình của bạn.)

Thiết kế có bị tải lên khi tôi thả vào không?

Không. Tệp được đọc trong trình duyệt của bạn; chỉ những màn hình bạn đánh dấu mới được tải lên, khi bạn nhấn xây dựng.

Ứng dụng có giống hệt thiết kế không?

Đó là mục tiêu: tác nhân MonstarX dựng từng màn hình theo đúng các giá trị chính xác và đối chiếu các trang với màn hình của bạn trong lúc xây dựng. Bạn có thể chỉ ra chỗ khác biệt trong cuộc trò chuyện hoặc tự sửa bằng Chế độ chỉnh sửa.

Thiết kế của tôi chỉ có màn hình điện thoại. Trên máy tính thì sao?

Thiết kế điện thoại được xây dựng thành một cột căn giữa trên màn hình rộng, nên ứng dụng vẫn dùng tốt trên máy tính.

MonstarX báo tệp của tôi không phải tệp Figma. Vì sao?

Có thể đó là bảng FigJam, bộ trang chiếu Figma Slides, hoặc tệp .fig của một chương trình khác. Hãy mở bản thiết kế trong Figma và dùng File → Save local copy… để lưu thành tệp Figma Design.

Liên quan

Thiết kế trướcChưa có thiết kế? Chọn giao diện từ các màn hình được vẽ sẵn.

Lập kế hoạch trướcCâu hỏi về những gì thiết kế không thể hiện.

Chế độ chỉnh sửaTinh chỉnh giao diện bằng cách nhấp lên trang.

Nhập ứng dụngCó mã nguồn thay vì thiết kế?