Flowstep và Figma là công cụ bổ trợ cho nhau, không phải đối thủ cạnh tranh. Flowstep giúp bạn nhanh chóng tạo và khám phá ý tưởng thiết kế giao diện; Figma là nơi bạn tinh chỉnh, cộng tác và hoàn thiện công việc sẵn sàng đưa vào sản xuất. Dùng cả hai cùng nhau mang lại hiệu quả tốt nhất.
Cách sao chép thiết kế Flowstep sang Figma
1
Chọn một hoặc nhiều màn hình trong Flowstep
Nhấp vào một màn hình để chọn, hoặc chọn nhiều màn hình để sao chép tất cả cùng lúc. Đảm bảo vùng chọn được làm nổi bật trên canvas.
2
Sao chép vùng đã chọn
Nhấn **Cmd+**⇧+C trên Mac hoặc **Ctrl+**⇧+C trên Windows. Flowstep hiển thị “Preparing your design. Stay on the current tab.” (nghĩa là “Đang chuẩn bị thiết kế của bạn. Giữ nguyên tab hiện tại.”) trong khi xử lý. Quá trình sao chép sẽ hoàn tất sau ít giây.
3
Dán vào tệp Figma của bạn
Chuyển sang Figma và mở tệp bạn muốn đặt thiết kế vào. Nhấn Cmd+V trên Mac hoặc Ctrl+V trên Windows để dán. Các màn hình Flowstep sẽ xuất hiện trên canvas Figma, sẵn sàng để chỉnh sửa.
Việc sao chép sang Figma sử dụng clipboard của trình duyệt, vì vậy trình duyệt phải cho phép Flowstep truy cập clipboard. Nếu bạn thấy lỗi quyền truy cập, hãy cho phép truy cập clipboard trong cài đặt trình duyệt rồi thử lại. Chuyển tab giữa chừng sẽ làm gián đoạn quá trình sao chép; hãy giữ tab Flowstep ở trạng thái đang hoạt động cho đến khi sao chép xong.
Nhập thiết kế từ Figma
Bạn cũng có thể làm ngược lại và đưa một khung Figma vào Flowstep dưới dạng màn hình có thể chỉnh sửa. Tính năng nhập dành cho tất cả mọi người. Hãy kết nối tài khoản Figma của bạn một lần, sau đó nhập từ liên kết khung.1
Kết nối Figma
Kết nối tài khoản Figma của bạn với Flowstep từ phần cài đặt. Flowstep sử dụng cơ chế ủy quyền của Figma để đọc các tệp bạn có quyền truy cập.
2
Sao chép liên kết khung trong Figma
Trong Figma, nhấp chuột phải vào khung bạn muốn rồi chọn Copy link to selection. Bạn cũng có thể sao chép liên kết của cả một trang để nhập tất cả các khung cấp cao nhất của trang đó cùng lúc.
3
Nhập vào Flowstep
Dùng tùy chọn nhập từ Figma trên thanh công cụ của Flowstep và dán liên kết. Flowstep chuyển khung thành các phần tử có thể chỉnh sửa trên canvas của bạn. Mỗi lần nhập sẽ thêm một màn hình mới. Nhập lại cùng một khung không thay thế lần nhập trước, vì vậy hãy xóa màn hình cũ nếu bạn không còn cần nữa.
Những gì được nhập
Flowstep tái tạo khung Figma thành các phần tử gốc, có thể chỉnh sửa, chứ không phải một hình ảnh phẳng. Một lần nhập sẽ đưa sang:- Các khung và lớp lồng bên trong
- Văn bản, bao gồm kiểu định dạng theo từng ký tự như độ đậm, màu sắc và in đậm
- Màu sắc từ các biến Figma của bạn
- Lớp tô bằng hình ảnh, cùng biểu tượng SVG và hình khối
- Bóng đổ bên ngoài và bên trong, cùng hiệu ứng làm mờ lớp và nền
- Nét đứt và nét chấm
Tổ chức sở hữu tệp phải đã kết nối Figma. Nếu một khung không nhập được, Flowstep hiển thị thông báo chỉ rõ bạn nên làm gì tiếp theo. Chẳng hạn, hãy kết nối lại Figma nếu quyền ủy quyền đã hết hạn, chờ rồi thử lại nếu Figma đang giới hạn tốc độ hoặc phản hồi chậm, hoặc, với mẫu từ Cộng đồng, hãy nhân bản mẫu đó sang nhóm của bạn trước rồi dán liên kết mới.