Decouple Popovers from the Inspector

Currently, when a property popover (like the Color Picker) is open in the Inspector, it blocks interaction with other properties. The user must first manually dismiss the open popover before they can open a new one for a different property (e.g., switching from editing a Fill color to a Border color). This creates an inefficient, multi-step workflow for a very common task.

The Current Behavior (The Problem):

As shown in the video, the user’s workflow is interrupted when trying to adjust multiple properties sequentially.

  1. A user clicks on the color swatch in the Fills section to open the Color Picker.
  2. With the Fill’s Color Picker open, the user wants to adjust a different property, such as the Border color.
  3. The Issue: The user cannot click on any other control within the Inspector. The UI is unresponsive because the active popover is blocking all other interactions in that panel.
  4. The Workaround: The user is forced to perform an extra action to close the Fill’s Color Picker (e.g., pressing Escape or re-clicking the swatch) before they can select the other control.

Why This is a UX Issue:

  • Introduces Friction: This behavior adds unnecessary steps (dismiss, then re-engage) to a fluid design process, slowing down the user.

  • Counter-Intuitive: The user’s intent is clear: “I am done with this color, I want to edit that color now.” The UI should respond to this intent directly, rather than forcing a manual state change (dismissal).


Proposed Solution:

Instead of having popovers open within and on top of the Inspector, they should be detached and appear as floating panels over the main canvas , adjacent to the Inspector.

This approach, similar to the one used in Figma, would solve the core issue by fundamentally changing the popover’s behavior.


Videos


@Jace I think you’re going to really like what we’ve got coming this autumn. :wink:

7 Likes

Aleluja.