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.
- A user clicks on the color swatch in the Fills section to open the Color Picker.
- With the Fill’s Color Picker open, the user wants to adjust a different property, such as the Border color.
- 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.
- 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
