Introducing: New simplified canvas with interactive editing

This week, we’re introducing some fresh updates to Plasmic Studio, taking your interactive design experience to new heights!

• Interactive canvas

• Streamlined single-artboard editing mode

• Enhanced data tab

• And more!

Interactive canvas

In the past weeks, we launched stateful components and data queries to help you build interactive and dynamic experiences within Plasmic. Today, the main editing canvas gets a significant upgrade. You can now interact directly with your designs without needing to switch to a separate preview mode, allowing you to iterate even faster and more intuitively!

With the new “Interactive” toggle, you can easily switch to interactive mode, and click on a button or design element that triggers a state change or toggles a variant. Simply exit interactive mode to make further adjustments to your designs, without losing the current state.

This lets you seamlessly transition between editing and interacting continuously, hopping back and forth as needed. Interact to bring the app into any state, and then continue editing while in that state.

Streamlined single-artboard editing mode

The new "interactive" mode is available in a new enhanced editing mode that displays one artboard at a time. This upgrade delivers better performance and a simpler and more familiar editing experience, especially for those who might be new to design tools, or for content creator roles who don’t need to think about responsive design.

As your pages and components have become more dynamic—allowing any number of variants to be toggled on and off due to interactions and various conditions—the old "one variant per artboard" approach can be more confusing than helpful.

Don’t worry—the original multi-artboard setup is still available as "Design Mode,” and it’s perfect for when you want to compare different component breakpoints/variants side-by-side or do more static design-heavy work.

To switch between these modes, go to the View menu and toggle Design Mode. (Previously, there was a Focus Mode option, which is the inverse of what’s now called Design Mode.)

Enhanced data tab

We’re excited to share improvements to the Page Data / Component Data tab in the right sidebar—now, all your props as well as your queries, state variables, and variants are conveniently accessible in one place!

As you create dynamic components that can take in complex inputs and adapt their rendering and behavior accordingly, we've made it possible for you to set preview values for your component props. This feature allows you to effortlessly test and visualize your component when given different inputs.

Furthermore, you can now update the value of state variables directly from the Page Data tab. Just click on the purple value display, and you'll be able to change the variable to any other value with ease.

And more

• The insert menu has been optimized to use space more efficiently, displaying more items at once. We've also simplified the organization to show the most common items in a single, convenient location.

• When performing queries in interactions, you can control whether the interaction should continue if there’s a query error.

• In code component registrations, you can now specify "page-section" element types in slot defaultValues.

• Working with breakpoints is simpler—you should now only ever see a single breakpoint activated in any artboard, and artboards auto-resize to more reasonable screen sizes for the given breakpoints.

• In code component registrations, you can now specify a layout: "page-section" fake CSS rule for use in defaultStyles.

That’s all for this week! Go play with the latest changes and tell us what you think!