Use the Focus bar as a complete inspector: add searchable properties, edit or reset values, reorder the selected element, control visibility and lock state, and reach advanced component, class, variable, and accessibility controls.
Where: Focus mode → select an element → floating property bar
Before you start
- The project must be in Focus mode and an editable element must be selected.
Key ideas
- Selection-aware controls: Layout, Text, Fill, Border, Effects, Visibility, Transform, and Media pills appear only when they are meaningful for the selected element.
- Add any CSS property: The + search ranks known properties, opens a matching editor, and can send an unrecognized request to AI with the current selection attached.
- Advanced is still available: The overflow holds uncatalogued properties, component dimensions/states/instance controls, video effects, variables, classes, alignment, custom CSS, and accessibility.
Steps
- Switch to Focus, select one element, and use a starter pill for the most common property groups.
- Choose +, search for a property, and select the result; use Ask AI only when the desired change is better described in plain language.
- Open a pill to edit its value. Use Reset to remove the local value, or Detach when a variable-backed value should become a literal on this element.
- Use the directional controls to reorder the element within its current layout, then use Hide or Lock only after checking the parent state.
- Open ⋯ for component authoring, classes, variables/custom CSS, alignment, accessibility, and properties that do not have a dedicated pill.
Reorder semantics follow layout
- A flex row moves the element left or right.
- A column, block, or grid moves it up or down.
- A free-positioned parent changes paint/sibling order rather than its x/y position.
Why the bar may move or disappear
The bar normally anchors above the selection, moves below elements near the top edge, freezes while a popover or text edit is active, and hides during viewport pan/zoom so it does not obstruct navigation.
Tips
- Keep reusable values attached to design-system variables; Detach only for an intentional one-off.
- Use Hide for responsive/editor visibility changes and Lock to prevent accidental pointer selection, not as substitutes for publishing permissions.
Troubleshooting
The Lock control is unavailable
Check whether an ancestor is locked. Unlock the parent first; a child cannot override an inherited locked editing state.
A property does not appear as a pill
Search with +. Known properties open their editor; less common properties appear in the Advanced overflow after they are added.