Export to Framer and Webflow

Copy a screen into Framer or Webflow with a paste, preserving structure and styling.

Last updated

Framer and Webflow exports work through the clipboard: UXMagic produces the payload each tool understands, and you paste it onto their canvas.

Framer

  1. Select the screen.
  2. Export → Framer.
  3. Copy the generated payload.
  4. Open your Framer project and paste onto the canvas.

Layout structure, text and styling come across as native Framer layers you can keep editing.

Webflow

  1. Select the screen.
  2. Export → Webflow.
  3. Copy the generated payload.
  4. In the Webflow Designer, paste onto the canvas.

You get real Webflow elements with classes, not an embed block.

What to check after pasting

  • Fonts — make sure the typefaces used are available in the destination project.
  • Images — they arrive by URL; upload them into the destination's asset manager before going live.
  • Interactions — animations and interactions are set up in Framer or Webflow, not carried over.

When to use this instead of code export

If the site is going to be maintained by a team that lives in Framer or Webflow, paste it in. If engineers own it, export code instead.

Was this article helpful?

Related articles

Read this in your language