Plugin Adapty dành cho Figma chuyển đổi các frame từ file thiết kế của bạn thành một flow. Chọn các frame trong Figma, gửi chúng sang Adapty, và quá trình nhập sẽ tạo ra một flow nháp để bạn chỉnh sửa trong flow builder như bất kỳ flow nào khác.

Cách hoạt động của quá trình import

Plugin đọc các frame Figma được chọn và tải chúng lên Adapty, sau đó chuyển đổi thành các màn hình của một flow nháp mới. Plugin không bao giờ thay đổi file Figma của bạn, và không có dữ liệu nào rời khỏi Figma cho đến khi bạn nhấn Export to Adapty. Kết quả trông giống thiết kế của bạn và hoạt động như một flow cơ bản: các nút dẫn đến màn hình tiếp theo, các tùy chọn quiz có thể chọn được, và paywall đã sẵn sàng để bạn liên kết sản phẩm.

Xem Giới hạn của tính năng import để tìm hiểu về những điều chỉnh bạn có thể cần thực hiện thủ công.

Trước khi bắt đầu

Để import một thiết kế, bạn cần:

• Một file thiết kế Figma: Plugin chỉ chạy trong các file thiết kế. FigJam boards và Figma Slides không được hỗ trợ.
• Quyền chỉnh sửa file: Plugin không thể chạy trong file mà bạn chỉ có quyền xem. Các bản nháp của chính bạn hoạt động tốt.
• Một ứng dụng trong Adapty có quyền chỉnh sửa flow: Quá trình import sẽ tạo flow bên trong một trong các ứng dụng của bạn. Hãy đảm bảo bạn có thể chỉnh sửa các flow trong ứng dụng Adapty mục tiêu.

1. Cài đặt plugin

Để cài đặt plugin:

1. Mở trang plugin Import to Adapty.
2. Nhấn Save. Plugin sẽ xuất hiện trong menu Plugins của Figma.
   

Figma tự động cập nhật các plugin đã xuất bản, nên bạn luôn chạy phiên bản mới nhất.

2. Gửi thiết kế của bạn đến Adapty

Để gửi màn hình đến Adapty:

1. Trong Figma, chọn các frame muốn import. Chọn nhiều frame cùng lúc để gửi cả một chuỗi màn hình.
2. Vào Plugins > Import to Adapty.
3. Xem lại danh sách mà plugin hiển thị, rồi nhấn Export to Adapty.
4. Nhấn Open in Adapty.

Plugin hiển thị tên của phần tử đã chọn và đếm số màn hình sẽ được tạo ra. Hãy xác nhận trước khi tiếp tục.

Sau khi tải lên hoàn tất, plugin hiển thị màn hình Done. Để tiếp tục:

1. Đăng nhập vào Adapty. Nếu bạn mở link import trong trình duyệt chưa đăng nhập, quá trình import sẽ không hoạt động.
2. Mở link import trong trình duyệt:
   • Nhấp Open in Adapty để mở import trong trình duyệt mặc định của bạn
   • Nhấp Copy link để sao chép link vào clipboard, rồi bắt đầu import trong trình duyệt hoặc profile khác.

Các frame trở thành màn hình như thế nào

Lựa chọn của bạn quyết định số lượng màn hình bạn nhận được:

• Nhiều frame: Mỗi frame trở thành một màn hình riêng.
• Một section: Mỗi frame bên trong section đó trở thành một màn hình.
• Một frame đơn: Toàn bộ frame trở thành một màn hình, kể cả khi nó chứa các frame khác bên trong. Để import các frame bên trong đó dưới dạng màn hình riêng biệt, hãy bật Split into separate screens.

Các màn hình tuân theo thứ tự của các frame trong bảng Layers của Figma, từ dưới lên trên, không phải vị trí của chúng trên canvas hay thứ tự bạn đã chọn chúng. Điều hướng cũng tuân theo thứ tự này, vì vậy hãy sắp xếp các frame trong bảng Layers trước khi xuất, hoặc sắp xếp lại thứ tự các màn hình trong builder sau đó. Hãy chọn từng frame riêng lẻ hoặc một section thay vì cả một trang. Nếu không, bạn sẽ import tất cả các frame khác trên trang đó.

Cài đặt xuất

Để thay đổi nội dung xuất, nhấn Customize export:

• Export images: Bao gồm các asset hình ảnh và ảnh. Mặc định bật.
• Image resolution: Xuất hình ảnh ở độ phân giải 1×, 2×, hoặc 3×. Độ phân giải càng cao thì hình ảnh càng sắc nét nhưng dung lượng file càng lớn. Mặc định là 2×.
• Split into separate screens: Import từng frame trong vùng chọn thành màn hình riêng biệt. Mặc định tắt.

3. Hoàn tất quá trình import trong Adapty

Open in Adapty mở một tab trình duyệt trong Adapty Dashboard của bạn. Quá trình chuyển đổi chạy trên máy chủ của Adapty — tab này hiển thị tiến độ và tạo flow khi hoàn tất.

1. Chọn ứng dụng mà flow này thuộc về. Quá trình chuyển đổi bắt đầu ngay khi bạn chọn.
2. Giữ tab mở cho đến khi quá trình import hoàn tất (có thể mất vài phút). Nếu bạn đóng tab sớm, hãy mở lại cùng đường dẫn đó để tiếp tục.

Adapty sau đó chuyển đổi thiết kế và báo cáo tiến độ thực hiện.

Flow hoàn chỉnh sẽ mở trong flow builder dưới dạng bản nháp, được đặt tên theo file Figma gốc, với tên mô tả cho từng màn hình. Adapty sẽ thông báo khi có phần nào trong thiết kế cần xem lại.

Giới hạn khi import

Khi import, Adapty sẽ tái tạo giao diện thiết kế của bạn và kết nối các thành phần cơ bản: điều hướng, nhóm có thể chọn, ô nhập liệu và các hành động mua hàng. Tuy nhiên, các phần sau của thiết kế sẽ không được import:

• Sản phẩm: Quá trình import tạo các thẻ sản phẩm, thêm hành động mua hàng và chèn placeholder cho các biến sản phẩm. Bạn cần tự liên kết các sản phẩm thực tế và thay thế các placeholder. Xem Thiết lập mua hàng.
• Phông chữ: Quá trình import không gán phông chữ nào cho văn bản của bạn. Để khôi phục phông chữ, hãy tải file phông chữ lên và chọn nó cho các đoạn văn bản bị ảnh hưởng.
• Video: Video được export dưới dạng placeholder. Hãy thêm video trong builder sau đó.
• Các layer ẩn: Layer bị ẩn sẽ không được export.

Mỗi lần xuất bao gồm tối đa 50 màn hình và 20 MB dữ liệu thiết kế. Độ phân giải ảnh ảnh hưởng nhiều nhất đến dung lượng, vì vậy nếu file xuất quá lớn, hãy đặt Image resolution về 1× để giảm kích thước.

Mỗi lần xuất tạo ra một flow duy nhất. Để import cùng một thiết kế lần thứ hai, bạn cần xuất lại từ Figma.

Link import chỉ có hiệu lực trong một giờ sau khi xuất. Hãy hoàn thành việc import trong một lần, hoặc bắt đầu lại từ đầu.

Khắc phục sự cố

Lỗi xuất dữ liệu

Thông báo	Cách xử lý
Too many screens to export	Chia selection của bạn thành các nhóm nhỏ hơn, tối đa 50 màn hình mỗi nhóm.
Export data is too large	Giảm Image resolution, hoặc giảm số lượng layer trong các màn hình của bạn.
This frame is too large to export	Export một phần nhỏ hơn của thiết kế.
Upload didn’t complete	Thiết kế của bạn đã thay đổi trong khi upload. Hãy export lại.
This import link has expired	Một import link chỉ có hiệu lực trong một giờ. Hãy export lại thiết kế từ Figma.
This design was already imported	Export đó đã tạo ra một flow rồi. Hãy export lại thiết kế từ Figma.

Sau khi import

Những gì bạn thấy	Nguyên nhân và cách khắc phục
Một màn hình trông bị mờ, như có một lớp sương phủ lên	Ảnh nền được import như một phần tử thông thường đặt lên trên nội dung. Hãy chuyển nó ra phía sau các thành phần còn lại của màn hình.
Bảng Products trống và giá hiển thị dạng placeholder {{figma_import_…}}	Quá trình import không liên kết sản phẩm. Thêm sản phẩm của bạn trong bảng Products, chọn chúng trong từng thẻ sản phẩm và hành động mua hàng, rồi thay thế các placeholder.
Các màn hình bị sắp xếp sai thứ tự, hoặc nút mở nhầm màn hình	Thứ tự màn hình và điều hướng theo thứ tự frame trong bảng Layers của Figma. Sắp xếp lại các màn hình trong builder và kiểm tra hành động Navigate to screen của từng nút.
Một hình ảnh bị thiếu, chỉ còn lại nền của nó	Layer đó là video, đang bị ẩn, hoặc được tạo bằng thao tác shape. Hãy thay thế hình ảnh đó trong builder.
Hai tùy chọn trong một nhóm chọn đơn đều trông được chọn cùng lúc	Trạng thái chưa được chọn của tùy chọn mặc định không có kiểu dáng đúng. Hãy thay đổi kiểu dáng thủ công.
Đồng hồ đếm ngược hiển thị thời gian cố định và không đếm ngược	Đồng hồ đếm ngược được import dưới dạng văn bản. Thay thế bằng đồng hồ đếm ngược.
Điều khiển font hiển thị Select font	Kiểu chữ không có sẵn trong builder. Tải lên file font và chọn nó.

Các bước tiếp theo

Flow vừa được nhập là bản nháp, chưa hiển thị cho người dùng. Hãy cải thiện flow trong builder và làm theo các bước dưới đây để triển khai:

1. Lưu và xuất bản flow.
2. Xem trước flow trên thiết bị thực.
3. Tạo một placement flow và thêm flow vào đó.
4. Tải placement đó trong ứng dụng của bạn bằng Adapty SDK v4.0 trở lên. Các phiên bản SDK cũ hơn không thể hiển thị flow.