---
title: "Import a design from Figma"
description: "Send frames from your Figma file to Adapty and turn them into an editable flow. Layout, text, and images come across, so you start from your design instead of a blank screen."
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skill. Claude Code (self-updating via plugin): `claude plugin marketplace add adaptyteam/adapty-skills && claude plugin install adapty-skills@adapty` — other tools: `npx skills add adaptyteam/adapty-skills --all`

The Adapty plugin for Figma turns frames from your design file into a flow. Select frames in Figma, send them to Adapty, and the import creates a draft flow you edit in the flow builder like any other.

## How the import works

The plugin reads selected Figma frames and uploads them to Adapty, which converts them into the screens of a new draft flow. The plugin never changes your Figma file, and nothing leaves Figma until you click **Export to Adapty**. The result looks like your design and works as a basic flow: buttons lead to the next screen, quiz options are selectable, and a paywall is ready for you to link your products.

See [Import limitations](#import-limitations) to learn about the adjustments you may need to make manually.

## Before you start

To import a design, you need:

- **A Figma design file**: The plugin runs in design files only. FigJam boards and Figma Slides aren't supported.
- **Edit access to the file**: The plugin can't run in a file you can only view. Your own drafts work well.
- **An app in Adapty** with flow editing privileges: The import creates the flow inside one of your apps. Make sure you can edit the flows inside the target Adapty app.

## 1. Install the plugin

To install the plugin:

1. Open Figma's [plugin management UI](https://help.figma.com/hc/en-us/articles/360042532714-Use-plugins-in-files). Alternatively, open [the plugin page](https://www.figma.com/community/plugin/1674065404672377144/import-to-adapty) directly in the browser.
2. Search for **Import to Adapty** in the plugin list.

3. Open the plugin page and click **Save**. The plugin should now be visible in the **Plugins** menu.

Figma updates published plugins automatically, so you always run the latest version.

## 2. Send your design to Adapty

To send screens to Adapty:

1. In Figma, select the frames to import. Select several at once to send a whole sequence of screens.
2. Go to **Plugins** > **Import to Adapty**.
3. Review the selection the plugin lists, then click **Export to Adapty**.
4. Click **Open in Adapty**.

The plugin displays the name of the selected element and counts the number of resulting screens. Confirm before continuing.

Once the upload finishes, the plugin displays the **Done** screen. To proceed:
1. Log into Adapty. If you open the import link in an unauthenticated browser, the import won't work.
2. Open the import link in a browser:
    - Click **Open in Adapty** to open the import in your default browser
    - Click **Copy link** to copy the link to your clipboard, and start the import in a different browser or profile.

### How frames become screens

What you select decides how many screens you get:

- **Several frames**: Each frame becomes its own screen.
- **A section**: Each frame inside the section becomes a screen.
- **A single frame**: The whole frame becomes one screen, even if it contains other frames. To import those inner frames as separate screens instead, turn on **Split into separate screens**.

Screens follow the order of the frames in Figma's **Layers** panel, from bottom to top, not their position on the canvas or the order you clicked them. Navigation follows the same order, so arrange the frames in the **Layers** panel before you export, or reorder the screens in the builder afterwards. Select individual frames or a section rather than a whole page. Otherwise you import every other frame on that page too.

### Export settings

To change what the export includes, click **Customize export**:

- **Export images**: Includes image and photo assets. On by default.
- **Image resolution**: Exports images at 1×, 2×, or 3×. Higher resolution increases the sharpness and file size. 2× by default.
- **Split into separate screens**: Imports each frame inside your selection as its own screen. Off by default.

## 3. Finish the import in Adapty

**Open in Adapty** opens a browser tab in your Adapty dashboard. Conversion itself runs on Adapty's servers — the tab shows progress and creates the flow at the end.

1. Select the app this flow belongs to. Conversion starts as soon as you choose.
2. Keep the tab open until the import finishes (may take several minutes). If you close the tab early, open the same link again to resume.

Adapty then converts the design and reports how far along it is.

The finished flow opens in the flow builder as a draft, named after the Figma file it came from, with a descriptive name for each screen. Adapty tells you when parts of the design need a second look.

## Import limitations

An import reproduces the look of your design and wires the basics: navigation, selectable groups, inputs, and purchase actions. Expect to fix the following in the builder:

- **Products**: The import creates product cards, adds purchase actions, and inserts placeholders for product variables. You need to link your actual products and replace the placeholders yourself. See [Set up purchases](paywall-product-block).
- **Navigation**: The import can set up linear navigation with **Navigate to screen** actions. Branching needs to be [set up](onboarding-navigation-branching) by hand.
- **Fonts**: SF Pro and Roboto map to the builder's **System** font. Any other typeface arrives unassigned. To restore it, [upload the font file](using-custom-fonts-in-flow-builder) and select it for the affected text.
- **Videos**: A video exports as an empty image. Replace the video with an image before you export, or [add the video](custom-media) in the builder afterwards.
- **Shape operations**: A layer built with **Subtract**, **Union**, or a similar operation imports unpredictably. Flatten it before you export, or fix the result in the builder.
- **Hidden layers**: A hidden layer doesn't export, so it can't arrive as a hidden element. To keep it, reveal the layer in Figma before the export, and hide the element again in Adapty.
- **Toggles and countdowns**: A switch imports as a static container, a countdown — as plain text. Replace them with a [toggle](builder-toggles) or a [countdown timer](flow-timer).
- **Selection states**: The default selection carries over, but state styling can be off or inconsistent between options in the same group. Check each option's **Default** and **Selected** states.
- **Elements with no builder equivalent**: A chart, a ruler, or another custom control arrives incomplete, as a static image, or not at all. Rebuild it from stacks and images, or export it from Figma as one image.
- **Visual detail**: An image may change its position or z-index. Gradients, shadows, and text that mixes several styles may need adjustment.

Adapty may narrow these gaps in future releases.

One export includes at most **50 screens** and **20 MB** of design data. Image resolution drives that size most, so a large export gets smaller when you set **Image resolution** to 1×.

Each export produces a single flow. To import the same design a second time, export it from Figma again.

An import link stays valid for one hour after the export. Finish the import in one go, or start over.

## Troubleshooting

### Export errors

| Message | What to do |
|---|---|
| Too many screens to export | Split your selection into smaller batches of 50 screens or fewer. |
| Export data is too large | Lower **Image resolution**, or reduce the number of layers in your screens. |
| This frame is too large to export | Export a smaller section of the design. |
| Upload didn't complete | Your design changed while it uploaded. Export it again. |
| This import link has expired | An import link is valid for one hour. Export the design again from Figma. |
| This design was already imported | That export already produced a flow. Export the design again from Figma. |

### After an import

| What you see | Cause and fix |
|---|---|
| A screen looks washed out, as though a haze covers it | A background image was imported as an ordinary element on top of your content. Move it behind the rest of the screen. |
| The **Products** panel is empty and prices show `{{figma_import_…}}` placeholders | The import doesn't link products. Add yours in the **Products** panel, select them in each product card and purchase action, and replace the placeholders. |
| Screens are out of order, or buttons open the wrong screen | Screens and navigation follow the frame order in Figma's **Layers** panel. Reorder the screens in the builder and check each button's **Navigate to screen** action. |
| An image is missing, with only its background left | The layer was a video, was hidden, or was built with a shape operation. Replace the image in the builder. |
| Two options in a single-choice group look selected at once | The non-selected state of the default option does not have the correct styling. Change the styling manually. |
| A countdown shows a fixed time and never counts down | The countdown imported as text. Replace it with a [countdown timer](flow-timer). |
| The font control reads **Select font** | The typeface isn't available in the builder. [Upload the font file](using-custom-fonts-in-flow-builder) and select it. |

## Next steps

The imported flow is a draft, unavailable to users. Improve the flow in the builder and follow the steps below to ship it:

1. [Save and publish the flow](builder-save-publish).
2. [Preview the flow on a real device](paywall-device-compatibility-preview).
3. Create a [flow placement](create-placement) and add the flow to it.
4. Fetch that placement in your app with Adapty SDK v4.0 or later. Earlier SDK versions can't render flows.