> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Move designs between Flowstep and Figma

> Copy any Flowstep frame into Figma with copy-and-paste, or import Figma frames into Flowstep as editable screens. Work across both tools without switching.

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.04.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=0e31f66d221bc267a060704be409d9f2" alt="Screenshot 2026 05 06 At 14 19 04" width="1838" height="1266" data-path="images/Screenshot-2026-05-06-at-14.19.04.png" />
</Frame>

Flowstep is built to fit into the design workflow you already use — not to replace it. You can generate a design in Flowstep and immediately bring it into Figma using a simple copy-and-paste, or go the other way and import a Figma frame into Flowstep. This means you get the speed of AI-assisted design generation combined with the precision and collaboration features you rely on in Figma.

<Note>
  Flowstep and Figma are complementary tools, not competitors. Flowstep helps you rapidly generate and explore UI design ideas; Figma is where you refine, collaborate, and build out production-ready work. Using both together gives you the best of both.
</Note>

## How to copy a Flowstep design into Figma

<Steps>
  <Step title="Select one or more screens in Flowstep">
    Click a screen to select it — or select several screens to copy them all in one go. Make sure the selection is highlighted in the canvas.
  </Step>

  <Step title="Copy the selection">
    Press \*\*Cmd+\*\*⇧+**C** on Mac or \*\*Ctrl+\*\*⇧+**C** on Windows. Flowstep shows "Preparing your design — stay on this tab and keep the screen selected" while it works; the copy completes in a moment.
  </Step>

  <Step title="Paste into your Figma file">
    Switch to Figma and open the file where you want to place the design. Press **Cmd+V** on Mac or **Ctrl+V** on Windows to paste. The Flowstep screens appear on your Figma canvas, ready to edit.
  </Step>
</Steps>

<Note>
  Copying to Figma uses your browser's clipboard, so the browser must allow Flowstep clipboard access — if you see a permission error, allow clipboard access in your browser settings and try again. Switching tabs mid-copy interrupts the transfer; keep the Flowstep tab focused until the copy finishes.
</Note>

<Tip>
  Paste the frame onto a dedicated "AI imports" page in Figma to keep your working files organized. From there, you can move elements into your main design system or component library at your own pace.
</Tip>

## Import a design from Figma

You can also go the other way and bring a Figma frame into Flowstep as editable screens. Importing is available to everyone — connect your Figma account once, then import from a frame link.

<Steps>
  <Step title="Connect Figma">
    Connect your Figma account to Flowstep from your settings. Flowstep uses Figma's authorization to read the files you have access to.
  </Step>

  <Step title="Copy a frame link in Figma">
    In Figma, right-click the frame you want and choose **Copy link to selection**. You can also copy a link to a whole page to import all of its top-level frames at once.
  </Step>

  <Step title="Import into Flowstep">
    Use the Figma import option in the Flowstep toolbar and paste the link. Flowstep converts the frame into editable elements on your canvas. Re-importing the same frame updates it in place.
  </Step>
</Steps>

### What gets imported

Flowstep recreates a Figma frame as native, editable elements — not a flat image. An import brings across:

* Frames and their nested layers
* Text, including per-character styling like weight, colour, and bold
* Colours from your Figma variables
* Image fills, and SVG icons and shapes
* Drop and inner shadows, and layer and background blurs
* Dashed and dotted strokes

<Note>
  The file's organization must have Figma connected. If a frame won't import, Flowstep shows an actionable message that tells you what to do next — for example, reconnect Figma if your authorization has expired, wait and retry if Figma is rate-limiting or slow to respond, or, for a Community template, duplicate it to your team first and paste the new link.
</Note>