Design Variables, Icon Library, scale tool and customizable panels

3 min read

Boris Janković

On this page
The Variables panel and a file's icon library in Wonder

Design tokens land in a Variables panel, every file gets an icon library, and the canvas gains real z-index, a scale tool, customizable panels, and smarter selection — plus a deep round of editor and AI improvements.

Features

  • Variables. Design tokens have arrived: create and manage them in the new Variables panel, bind them to property fields, and detach anytime. Import from CSS variables or pasted Figma tokens, and export as Tailwind, CSS, or DTCG. The AI can create, apply, and reuse them too.
  • Icon library. Every file now has its own icon library. Upload, paste, or add icons from a selection, swap any icon from the properties panel, and copy-as-code produces self-contained icon components.
  • Real z-index. Stacking contexts render like the browser, and z-index is editable from the properties panel.
  • Scale tool. Scale any selection proportionally on canvas, with dedicated cursors, percentage values, and alignment lines.
  • Two selection behaviors. Wonder now defaults to Deep selection, which smartly picks the deepest logical layer in one click. Prefer the classic Figma-style way — parent first, with double-click to drill down? Switch in View > Selection behavior > Classic.
  • Customizable panels and saved views. Add more sidebar panels from the View menu and drag to reorder them however you like. Save arrangements as named views, set a personal default, share a view with your organization, or use the new Focus preset.
  • Advanced ⌘K search. The command palette now searches pages, layers, and files from one place.
  • Interactive onboarding. New users get a hands-on tour of the app: generate a design, work on existing designs with AI, add a shader, and export designs as code.
  • New AI models. GPT 5.6 and Kimi K3 join the chat model picker.

Editor improvements

  • A clearer left panel. Nested frames are easier to scan and select, and layer and variable search was redesigned.
  • Resize to fill. One click to make a node fill its parent.
  • Smoother zoom. Mouse-wheel zooming is smoothed on web and desktop.
  • Crisp canvas labels. Frame labels render sharper, with better contrast at every zoom level.
  • Small niceties. Press feedback on buttons, double-click to hug content, refined text-editing selection, tooltips across the editor, new command palette icons, an eye icon on the page color picker, and polish across core controls.

AI improvements

  • Designs land on the canvas. The AI never answers a design request with a code dump in chat. It builds the design on your canvas.
  • Smoother streaming. Replies reveal at a steady, even pace, and chat now works across multiple tabs.
  • Longer conversations. Long threads are summarized instead of hitting a wall, and the AI can search the full history of a thread.
  • Context at a glance. The chat box shows a live meter of context and credits usage.
  • Chat context menus. Right-click any chat in the history for its own actions.

Bug fixes

  • Exporting multiple layers now downloads a zip file with all of them included.
  • Fixed the canvas background resetting after reopening a file.
  • Fixed new files occasionally opening without a page.
  • Fixed selection boxes drifting on generated designs.
  • Fixed alignment helpers shifting after duplicating rotated nodes, and padding handles moving inversely on flipped nodes.
  • Position can now be toggled between absolute and relative for multiple nodes at once.
  • Fixed legacy hsla() colors and near-black colors rendering incorrectly.
  • Fixed older chat messages jumping to the bottom, and chat content overflowing sideways.
  • Fixed the "Add to chat" chip lingering after a collaborator deleted the selection.