From Figma

Designers' work lives in many places. In Wonder, you can bring your designs from different sources including Figma, just copy any selection from a Figma file and paste it onto the canvas, where it renders as editable layers.

Copy & paste a Figma selection

To import your work from Figma into Wonder:

1. Open the Figma file you want to import from.
2. Select the frames you want to bring into Wonder.
3. Copy the selection to your clipboard (cmd + c, or right-click and choose Copy).
4. Open your Wonder file and paste the selection (cmd + v, or right-click and choose Paste).

Variables

Wonder can import designs that have Figma variables attached. If your Wonder file already has a variable with the same name, Wonder matches them automatically during the import.

For example, if a frame in Figma uses --neutral-50 for its background and your Wonder file has a variable of the same name, that connection stays intact through the import rather than breaking.

Limitations and gotchas

The Wonder canvas is built on real code and CSS (see Design is code). Because of that, some Figma features that CSS can't reproduce in the browser aren't supported, or are translated to the closest equivalent. Here's what to watch for.

Importing images

Importing images from Figma isn't supported yet. If your selection contains images, they won't come across, they'll appear as empty image frames instead. To complete the design, export the images from Figma and add them to your design in Wonder.

Components

Figma components and their instances are detached when you paste them into Wonder.

Borders

Some border features aren't supported by CSS, so they're translated on import:

• Multiple stacked colors: the first color is preserved here.
• Custom border styles: translated to a dashed border.
• Gradient border strokes: are not preserved in Wonder.

Effects

Drop shadows, layer blurs, and background blurs translate correctly. Inner shadows translate too, with one edge case: because Figma handles them differently from CSS, a translated inner shadow is applied to each child element rather than the parent. (In Figma, an inner shadow on a fill-less parent shows on its children but is assigned to the parent.)

These effects aren't supported and won't be preserved:

• Textures
• Glass
• Noise

Layout

Grid layouts aren't supported yet, so they're translated to a flex layout while preserving the design intent.

Text

Multiple text formats (rich text) within a single text box aren't supported yet (Example: different font sizes or weights in one text box).

Other ways to bring your work in

• From your codebase: connect a repository for your real components, tokens, and icons.