Trình Soạn Thảo Canvas
Canvas chỉnh sửa khung dây là nơi bạn thiết kế và tinh chỉnh màn hình. Thanh bên trái chứa tất cả công cụ vẽ và chọn, giữa là canvas nơi bạn đặt và sắp xếp phần tử, và thanh bên phải hiển thị thuộc tính của phần tử đã chọn.
Công Cụ
Chọn
Nhấp để chọn và di chuyển phần tử trên canvas. Phần tử đã chọn hiển thị thuộc tính trong thanh bên phải.
Hình Vuông
Vẽ phần tử hộp chứa hình chữ nhật trên canvas.
Hình Tròn
Vẽ phần tử hình tròn trên canvas.
Văn Bản
Thêm nhãn văn bản và khối nội dung.
Hình Ảnh
Đặt phần tử placeholder hình ảnh.
Nút
Thêm phần tử nút tương tác.
Đầu Vào
Thêm trường nhập biểu mẫu.
+ (Thêm Màn Hình)
Thêm màn hình mới vào dự án khung dây.
Phần Tử Bị Khóa
Các màn hình do AI tạo được khóa theo mặc định — các phần tử không thể di chuyển hoặc thay đổi kích thước cho đến khi được mở khóa. Nhấn Ctrl + D để mở khóa tất cả các phần tử trên màn hình hiện tại, cho bạn toàn quyền kiểm soát để sắp xếp lại và chỉnh sửa.
Chế Độ Storyboard
Chế độ storyboard cho phép bạn xem tất cả khung và điểm kết nối trong giao diện toàn cảnh. Chuyển đổi giữa canvas màn hình đơn và chế độ storyboard bằng cùng nút trong thanh bên trái. Trong chế độ storyboard, mỗi màn hình được hiển thị dưới dạng thẻ với xem trước bố cục.
Tính Năng Storyboard
Tổng Quan Khung
Xem tất cả màn hình nhanh chóng với số lượng phần tử và xem trước trực quan.
Đặt Modal
Đánh dấu bất kỳ màn hình nào là lớp phủ modal thay vì trang đầy đủ.
Nhấp Để Chỉnh Sửa
Nhấp vào bất kỳ thẻ khung nào để nhảy vào giao diện canvas để chỉnh sửa chi tiết.
Điều Khiển Thu Phóng
Sử dụng điều khiển thu phóng bên trái để phóng to/thu nhỏ storyboard.
Kết Nối Luồng
Trực quan hóa cách các màn hình được kết nối qua hành động luồng giữa các khung.
Thuộc Tính Phần Tử
Nhấn đúp vào bất kỳ phần tử nào trên canvas để vào và mở bảng thuộc tính trong thanh bên phải. Bảng có ba tab: Thuộc tính, Luồng và Màu sắc. Từ đây bạn có thể chỉnh sửa vị trí, kích thước, kiểu dáng và hành vi của mỗi phần tử.
Tab Thuộc Tính
Vị Trí (X, Y)
Đặt vị trí pixel chính xác của phần tử trên canvas.
Kích Thước (Rộng, Cao)
Đặt kích thước phần tử theo pixel.
Z-Index (Thứ Tự Lớp)
Kiểm soát phần tử nào xuất hiện phía trên phần tử khác.
Bo Góc
Đặt bo tròn góc bằng giá trị số hoặc sử dụng cài sẵn Sắc, Bo tròn hoặc Viên.
Nội Dung Văn Bản
Chỉnh sửa văn bản hiển thị bên trong phần tử.
Tab Màu Sắc
Tùy chỉnh màu nền, đường viền và văn bản cho phần tử đã chọn.
Luồng
Luồng xác định hành động và điều hướng giữa các màn hình. Luồng là hành động như điều hướng đến trang khác, mở modal hoặc chuyển hướng đến khu vực khác. Biểu tượng liên kết nhỏ trên canvas cho biết phần tử nào có luồng được gắn. Khung được tự động liên kết với nhau trong quá trình tạo AI, và kết nối luồng cũng được tạo.
Thiết Lập Luồng
Select an Element
Click the element you want to add a flow to.
Open Flow Tab
In the right sidebar, switch to the Flow tab to see existing connections or add new ones.
Add Connection
Click Add First Connection (or the + button) to create a new flow. Choose a target screen or frame to link to.
View on Canvas
Connected elements show a small link icon on the canvas to indicate they have flow actions.
Kết Nối Block
Kết nối khối cho phép bạn đính kèm các khối từ Thư viện khối trực tiếp vào các phần tử wireframe. Khi bạn nhấn đúp vào một phần tử và cuộn xuống trong bảng thuộc tính, bạn sẽ tìm thấy phần Kết nối khối. Nhấn + Thêm khối để liên kết một khối (HTML, component hoặc mẫu) với phần tử. Các khối được kết nối sẽ được tham chiếu khi tạo mã bằng AI, giúp dễ dàng đính kèm mã HTML hoặc component cụ thể vào các phần tử wireframe.
Chỉnh Sửa AI
Thanh nhập lệnh AI ở dưới cùng canvas cho phép bạn sử dụng AI để chỉnh sửa hoặc tạo màn hình. Chọn mô hình AI từ menu thả xuống bên trái, mô tả các thay đổi bạn muốn và AI sẽ điều chỉnh wireframe cho bạn. Bạn cũng có thể sử dụng nhập giọng nói hoặc nút Chỉnh sửa CLI để chỉnh sửa nâng cao.
Nhắc Nhận Biết Ngữ Cảnh
Màn Hình Đơn
Khi chỉnh sửa một màn hình, thanh nhắc hiển thị "Đang chỉnh sửa 'Tên Màn Hình'" và thay đổi AI chỉ áp dụng cho màn hình đó.
Storyboard
Khi ở chế độ storyboard, AI có thể chỉnh sửa tất cả khung cùng lúc hoặc xây dựng khung mới sử dụng các khung hiện có làm tham chiếu.
Nhập Giọng Nói
Sử dụng biểu tượng micro trong thanh nhắc để đọc hướng dẫn thay vì gõ.
Chỉnh Sửa CLI
Nhấp Chỉnh Sửa CLI cho chế độ chỉnh sửa nâng cao với nhiều kiểm soát hơn đối với thay đổi do AI thực hiện.
Xuất & Tích Hợp
Wireframes có thể được xuất, nhập hoặc sử dụng trực tiếp khi tạo dự án hoặc trong Hub dự án. Điều này giúp dễ dàng chuyển từ thiết kế wireframe sang dự án hoạt động mà không cần tạo lại thiết kế thủ công.