Integrations

Figma Integration

Import your WireFlow wireframes directly into Figma as native frames using the WireFlow Importer plugin — no copy-pasting, no redrawing.

🎭 Integrations5 min read

How it works

The WireFlow Importer is a Figma plugin that reads your project's wireframe bundle via the WireFlow API and reconstructs each page as a Figma frame — complete with auto-layout buttons, text layers, input fields, and image placeholder rectangles that your designers can replace with real assets.

ℹ️

The plugin creates native Figma objects — not linked components or embeds. Once imported, frames are fully editable in Figma with no WireFlow dependency.

Installing the plugin

Download the plugin files

From the WireFlow dashboard go to Settings → Integrations → Figma Plugin and click Download plugin .zip. Unzip to a permanent folder on your machine.

Load in Figma desktop

Open Figma desktop. Go to Plugins → Development → Import plugin from manifest… and select the manifest.json file from the unzipped folder.

Verify installation

The plugin appears under Plugins → Development → WireFlow Importer. You only need to load the manifest once — Figma remembers it.

Importing a project

Get your API token

In WireFlow go to Settings → API tokens and click Generate token. Copy it — you'll only see it once.

Run the plugin

In Figma open or create a file. Run WireFlow Importer from the Plugins menu. Enter your WireFlow URL, project ID (visible in the URL bar in the builder), and the API token.

Select pages

The plugin fetches your project and shows a checklist of all pages. Tick the ones you want to import.

Import

Click Import selected. Frames appear on the Figma canvas grouped by flow, with a labelled section per flow. Large projects may take 10–20 seconds.

What's created in Figma

Sections — one Figma Section per flow, labelled with the flow name.
Frames — one Frame per page, sized to the device target (390×844 mobile, 768×1024 tablet, 1440×900 desktop).
Auto-layout frames — button elements use Figma auto-layout with horizontal padding.
Text layers — with font size, weight, and colour from the wireframe.
Icon placeholders — named ellipses (e.g. icon/home) that your team replaces with the real icon component.

💡

Tip: Run the plugin again after updating wireframes to re-import. Existing frames are placed alongside — not replaced — so you can diff them manually or use Figma's version history.

Limitations

The plugin requires Figma desktop — browser-based Figma does not support development plugins.
Prototype links (arrows) are not imported — Figma prototyping connections need to be set up manually.
Custom fonts used in WireFlow may not match fonts available in Figma — the plugin falls back to Inter.