Import a Figma frame to create a stylized Recurly Engage web popup prompt that you can refine in the prompt editor.

Available on all Recurly plans

Prerequisites

You must use a Figma account with a developer license, so you can generate an API key.
You must create your design from a Recurly Engage Figma template.

Limitations

AI Figma Sync supports web popup prompts only. Other prompt types are not supported.
Mapping accuracy depends on how closely the design follows the provided template. Changes to the template structure can reduce mapping reliability for elements such as legal text and call-to-action buttons.
Recurly Engage supports a maximum of three buttons per prompt. Additional buttons might not map as expected.
Templates use a fixed medium popup size.

Definition

AI Figma Sync lets you turn a Figma design into a styled Recurly Engage web popup prompt without manually rebuilding it. Paste a Figma frame link into Engage to map your styling and messaging into a draft that you can edit.

The feature reads mapped fields (metadata that identifies where each element belongs) in Recurly Engage Figma templates. When you import, AI Figma Sync brings in your title, message, survey options, and buttons, and then translates your custom styles into Cascading Style Sheets (CSS) in the prompt editor.

Key benefits

Faster launches Start from a styled draft instead of a blank canvas.

Lower technical barrier Create brand-aligned prompts without hand-written CSS.

Brand consistency Use approved Figma designs while preserving your styling.

Flexible editing Refine the result in Recurly Engage, or update the design in Figma and re-import it.

Key details

Connect Figma to Recurly Engage

Connect Figma with a developer API key. You only need to add this token once.

Open your Figma account settings

In Figma, open your account settings and select the developer tab.

Generate an API key

Generate an API key and copy it.

Find the Figma tile

In Recurly Engage, open the integrations dashboard and find the Figma tile under Other.

Paste the key and connect

Paste the API key into the plan token field, and then connect to Figma.

Create your design from a template

Recurly Engage templates include mapped fields. These fields let Engage place your title, message, survey options, and buttons in the prompt editor when you import the design.

Make a copy of the template file before you edit it. The original template is shared and can't be edited directly.

You can customize the copy with your own:

Colors, typography, padding, and spacing
Element order and placement, including button placement, as long as the underlying button structure remains consistent with the mapping

Keep the design close to the template structure and include no more than three buttons to maintain reliable mapping.

Copy the Figma frame link

Import a frame link, not a link to the full Figma file.

Select the frame

In Figma, select the frame you want to import, such as the desktop web dialog.

Confirm the URL

Confirm that the browser URL updates to reflect the selected frame.

Copy the URL

Copy the URL from the browser address bar.

Import the design

Create a web popup prompt

In Recurly Engage, go to Prompts and create a web popup prompt.

Start the import

On the prompt detail page, select Import from Figma.

Paste the desktop frame link

Paste your desktop frame link into the Desktop frame link field. You must provide at least one frame link.

Paste the mobile frame link

If you have a separate mobile design, paste its frame link into the Mobile frame link field. Otherwise, reuse the desktop frame link.

Import

Select Import.

Processing typically takes about one minute. When processing finishes, the prompt editor opens with the imported text, mapped buttons, and generated custom CSS. View the generated styling in the CSS tab at the bottom of the prompt.

Edit the imported prompt

Choose one of these approaches after importing:

Edit in Recurly Engage: Update copy, replace the background image, adjust styling, or modify individual elements in the prompt editor.
Edit in Figma and re-import: For a larger change or a redesign, update your Figma file and repeat the import process with the frame link.

Import separate desktop and mobile designs

Recurly Engage imports desktop and mobile web designs separately. When you provide a mobile-specific frame link with the desktop frame link, Engage maps its fields to the prompt's mobile section.