Import from Figma

Import works in the opposite direction to export: an existing Figma frame becomes an editable UXMagic screen you can then iterate on with AI.

Steps#

1. Connect Figma from Integrations (an OAuth connection — you authorise UXMagic once).
2. Paste the Figma frame URL, or pick the file and frame from the picker.
3. Choose whether to import the frame's own styles as your project theme, or map it onto the theme you already have.
4. Import.

What comes across#

• Layout and hierarchy, including auto-layout structure.
• Text, with its type styles.
• Colours and effects, including gradients and shadows.
• Images, copied into your project's assets.
• Vectors and icons, rebuilt as markup.

What to expect#

Figma is a vector canvas and the web is a box model, so the import is a faithful translation, not a byte-identical copy. Expect very close structure and spacing, with small differences in text rendering and in effects that have no direct web equivalent.

Imports are most accurate when the Figma frame uses auto-layout. Absolutely-positioned free-form layouts import, but with less structural fidelity.

Getting the URL right#

Select the frame in Figma, then right-click → Copy link to selection. A link to the file without a selected node imports the wrong thing, or nothing.

After importing#

The imported screen behaves like any other: chat edits, edit mode, theming, versions, export. This is the fastest route to "we have designs already, but we want to move faster now."

Design systems and component libraries#

You can also import a component library or design system so generated screens use your components. See Component libraries.