What is Wonder
Wonder is a canvas where you ideate with AI to get to something you actually love. Bring in existing designs from Figma or code, create variations, play with layouts, and wonder! The best part? What you design is code, so what you see is exactly what gets shipped.
On this page
What can you do with Wonder?
Instead of handing off static mockups or prototyping in isolation, your canvas reads and writes the same components, tokens, and source your product is built from. Change something in one place and it carries over to the other, with no duplication and nothing to keep in sync by hand.
Open the canvas, type your first prompt, and see where it takes you. Over the next few guides we'll go deeper on each of these, one at a time, so you're not trying to learn everything at once.
Start with the basics
- Design is code: the idea behind the canvas, where your designs are real, shippable code.
- Designing with AI: prompt Wonder to generate, explore, and refine designs on the canvas.
Bring your work in
- From Figma: paste Figma frames straight onto the canvas as editable layers.
- From your codebase: design with your real components, tokens, and icons.
Work with your design system
- Variables: manage color, typography, and spacing tokens, synced with code.
- Icons: add and reuse icons from your file's library.
Create graphics and effects
- Vectors: generate SVGs from the chat, powered by Quiver.
- Shaders: add animated backgrounds and effects.