Focus mode vs. design mode

Plasmic offers two operational modes:

Focus mode: shows a single canvas artboard in Plasmic Studio. This canvas can become interactive.

Design mode: shows multiple canvas artboards, each representing different design variants or components. These aren’t interactive.

Focus mode is the default.

But for website projects, and where the role is either designer or developer, design mode is the default.

You can switch between these from the View menu, or by pressing the M key whenever you have an artboard selected.

Comparison

Simplicity

Focus mode, similar to traditional page builders, provides a more straightforward editing experience by allowing you to focus on one screen at a time. You can switch screen variants from a dropdown menu in the top toolbar.

This can be simpler for most roles to work with, if they do not need to work on layout or responsiveness and are just focusing on content (see also content creator mode).

Interactivity

Focus mode enables you to toggle interactivity on or off. Turn on interactive mode to click on a button and trigger a state change.

You can then deactivate interactive mode to continue editing your design without losing the current state.

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

This is disabled in multi-artboard arenas because each artboard typically represents a specific variant. Especially with more dynamic pages and components—which allow any number of variants to be toggled on and off due to interactions and variant conditions—it is more confusing than helpful to allow each artboard to change away from its original variant. As a result, the artboards are kept “locked” to that variant by preventing interactivity.

Performance

Focus mode is also higher performance, ensuring that only the single artboard is loaded in-memory. You can continue to view and edit different variants using the dropdown menu in the top toolbar.

Was this page helpful?

Have feedback on this page? Let us know on our forum.