Get started with PreviewFlows in four steps

PreviewFlows puts your live Klaviyo flow emails on the Figma canvas — full-length email previews, grouped per flow, badged live/draft/removed — so you can audit, redesign, and present flows without stitching screenshots.

Step 1 — Create your account

1. Go to previewflows.com and sign up (email or Google — the free plan needs no card).
2. Create a workspace. Everything — connected Klaviyo accounts, email previews, billing — belongs to the workspace, so your whole team can share it.

Step 2 — Connect Klaviyo

1. On the dashboard, click Connect Klaviyo.
2. You'll be taken to Klaviyo's own login page to approve the connection. PreviewFlows asks only for read-only access (accounts:read, flows:read, templates:read) — it can never send, edit, or delete anything in your Klaviyo account.
3. You land back on the dashboard with a success banner, and the connected Klaviyo account appears as a row.
4. Agencies: repeat for each client account. The free plan includes 1 connected Klaviyo account; paid plans allow more — see previewflows.com/pricing.

Step 3 — Generate previews

1. On the dashboard, click Generate previews on the connected account's row. Progress shows live right on the row — first "Reading your flows…", then "Making previews" with a per-email counter. A typical account finishes in 1–3 minutes.
2. Each email becomes a full-length preview image with its subject line, preview text, live/draft/removed status, and product-recommendation notes.
3. Everything runs server-side, so you can close the tab and come back — the run keeps going without you.

Step 4 — Bring it into Figma

1. Install the PreviewFlows plugin. The Figma Community listing is currently in review — search "PreviewFlows" in Figma Community plugins to find it once it's live.
2. Run the plugin in Figma desktop and press Sign in with PreviewFlows. Your browser opens: the plugin shows a 6-character code, and the browser shows the same code — just confirm they match in the browser. You never type the code anywhere.
3. Back in Figma, pick your brand and press Get my email previews — every flow lands on the canvas as its own tidy frame, and flow titles click through to Klaviyo.
4. On later runs the button reads Update previews: it refreshes the previews in place without rearranging your layout. Reuse last snapshot places your most recent finished previews instantly, without spending a new canvas refresh.
5. Closed the plugin mid-run? No problem — previews keep generating server-side, and reopening the plugin reconnects to the run in progress.

Reading the canvas

Every preview is badged so you can see flow state at a glance:

• Red outline — this email is live right now.
• Greyed — draft (the email or its whole flow is in draft).
• Faded, dashed — removed from Klaviyo since the last refresh.

The free plan includes 1 connected Klaviyo account, 150 email previews, and 1 canvas refresh per month. Paid plans and beta pricing are at previewflows.com/pricing.

Disconnecting

Dashboard → connected account's row → Disconnect. This revokes the connected Klaviyo account, so its stored token is no longer used. Preview images expire automatically after 7 days regardless. In the plugin, Sign out of this plugin unlinks that Figma file from your workspace.

Need help?

Questions? Email georg@beyondwelcome.com — we're happy to walk you through setup. Pricing details live at previewflows.com/pricing.