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.
- Design with AI: prompt Wonder to generate, explore, and refine designs on the canvas.
Bring your work in
- Import from Figma: paste Figma frames straight onto the canvas as editable layers.
- Bring your code onto the canvas: 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.
Connect your code
- MCP: connect your coding agent to read and write the canvas.