Outline views

Design the outline view for a design tool’s layer panel. This is the place where users scan a document structure, jump to objects, and manage visibility and lock state without leaving the canvas.

The layout should show a clear hierarchy: artboards, groups, nested components, and individual layers. Rows need indentation, disclosure controls, type labels, and truncation rules that keep long names usable. Include selection, hover, keyboard focus, and multi-select states.

Add the actions people use most from this panel: show/hide, lock/unlock, rename, drag to reorder, and search. Keep those controls discoverable on dense rows without making the tree feel crowded. If an item is filtered out or not found, the panel should explain what happened and offer a way back to the full list.

Design the panel as a working component system, not a static list. Include empty, loading, and no-results states, plus a compact version for smaller windows. The result should feel fast to scan, easy to edit, and safe to use in large files.

Incorporate keyboard shortcuts in your design to foster a quicker workflow for users familiar with outline view functionality.