How to Build a Figma File for Jurni

Last updated: August 2026

Overview

This guide shows you how to prepare a Figma file so Jurni can turn it into an agentic shopping journey with the fewest revisions. Figma gives the engine your content and structure. Jurni layers in your brand system, product data, animations, and conversion intelligence on top of it.

Follow the steps in order. Most import issues come from work skipped before the file reaches Jurni.

Prerequisites

• A Figma account with access to the file

• Admin access to your Jurni workspace settings

• Final copy, approved imagery, and confirmed product and offer details

• Your Shopify catalog connected, if the journey includes a product section

1. Connect your Figma account

1. Go to Settings> Integrations in Jurni.

2. Open the Figma connection and authorize with OAuth.

3. Confirm the connection shows as active.

Files do not need to be public. Once authorized, Jurni can read private files in your Figma account.

Tip: If a file imports incorrectly, check the connection status before you start debugging the design.

2. Configure your brand settings first

Set your brand system in Jurni before importing Figma Configure:

• Fonts, including the correct font variants

• Colors

• Border radius

• Button typography and defaults

Each experience is created as an independent copy of your shop-level brand settings. Changing brand settings later does not update experiences that already exist, so getting this right first saves rework.

After an experience is created, review its own theme, especially typography. Use brand tokens for text wherever possible and reserve custom fonts for cases that genuinely need them.

3. Prepare your Figma file

The import reads your page structure from the way the file is organized. It works best with Figma sections, frames, and a clean layer hierarchy. Your file does not need to be perfectly grouped for the import to run, but a well organized file produces a more accurate result.

Before you import:

1. Include both a mobile and a desktop version in the same file, side by side. This is required for the import to build responsive layouts correctly.

2. Build the experience out fully in Figma. The import recreates what is in the file, so anything left unfinished will need to be completed in Jurni afterward.

3. Name your frames clearly so the intended pages and breakpoints are easy to identify.

Have your content final before you build:

• Approved image and asset bank at full quality

• Final, proofread copy

• Correct product, variant, and offer details

• Any required legal or compliance content

• A defined footer or other shared sections

Off-brand output is usually a content problem rather than a design problem.

4. Import into Jurni

1. Open the Agent> click +> Figma

2. Copy the Figma link and paste it into Jurni.

3. Prompt the Agent to build out the Figma file pixel perfect. Add any supporting images, screenshots, or files alongside the link if the design references assets that are not in the file.

5. Review both breakpoints after import

Jurni treats desktop and mobile as distinct experiences. Edits made in desktop mode apply to desktop only, so review mobile separately rather than assuming changes carry across.

• Start with mobile, then move to standard desktop

• Check wide screens at 1440px and above for max widths, typography, and layout consistency

6. What the import brings across

Jurni performs best when Figma provides a strong foundation, followed by review and iteration in the editor. Plan a short QA and prompting pass after import, especially for:

7. Parallax and animations

Parallax effects and other animations are not imported from Figma. The import brings in your content and structure only. Animations are added in Jurni after the file is imported.

There is no special way to lay out a Figma file for parallax. Two things to keep in mind:

1. Every element that will carry a parallax effect needs to exist in the Figma file as content.

2. The effect itself, and any further animation edits, are applied in Jurni once the import is complete.

For bespoke interactive components, flag them at the start of the project. Some need additional prompting or custom code. Keep a simpler fallback ready, such as an accordion, so your launch date does not depend on a single effect.

8. Design with reusable Jurni sections in mind

1. Build your first one or two pages carefully to the standard you want.

2. Save approved sections for reuse.

3. Turn that work into one or two reusable templates instead of starting each page from scratch.

Choose the right section type:

• Saved sections: use when each page needs its own editable instance

• Global sections: use when one edit should apply everywhere

For product sections and buy boxes, start from an existing saved product section and expose the product selector. This keeps price, discount, and images dynamic from Shopify rather than static in the design.

9. QA checklist before publishing

Save your work before previewing. Preview renders the last saved version.

• Brand fonts, colors, border radius, and button styles match your brand system

• Mobile, standard desktop, and wide desktop all reviewed

• Every button, link, and scroll-to-section target works

• Product, price, variants, discounts, and selling plans pull correctly

• Animations and parallax effects applied and tested in Jurni

• Image quality holds at full width

• Copy is final and accurate

• Footer and global sections are included

Recommended workflow

1. Configure Jurni brand settings.

2. Finalize Figma desktop and mobile frames, side by side and fully built out.

3. Import using the Figma link, plus any supporting assets.

4. Build and QA one page to the required standard, including animations.

5. Save approved repeated elements as global sections.

6. Convert that work into one or two reusable templates.

Troubleshooting

Related articles

• Configuring your brand settings in Jurni

• Saved sections vs global sections

• Connecting Shopify to Jurni

• Adding animations and parallax effects

• Publishing and QA checklist for agentic shopping journeys

Still stuck? Contact the Jurni support team with your file link and journey name, and we will take a look.