pages-layers

Summary

In Edit, the left panel has Layers under the pages: everything on the open page, as Figma's layers list. What you drew is a tree with names you give it; what was captured is listed by component.

Raw wireframe

• .context/designs/web/pages-arrange/pages-layers.html
• .context/designs/web/pages-arrange/pages-rename-layer.html

Why it is drawn this way

Under the pages, not instead of them. The page list keeps the top of the panel and scrolls on its own; Layers takes the rest, headed by the page's route. Moving to another page in the list changes the layers with it.

Drawn, as a tree. A frame holds what is drawn in it, with a chevron to fold it. Each row is the kind's icon and its name. A new element is named for its kind and a number (Rectangle 4), as Figma does; a Text is named by its words until it is renamed. The row of what is picked on the canvas is picked here, and the other way round; ⇧-click picks several, as on the canvas.

Rename, hide, reorder. Double-click a name, or ⌘R with it picked, to rename it in place (pages-layers-rename): ⏎ keeps it, Esc puts it back. The eye shows on hover and hides the element (⇧⌘H, or ⌃⇧H where the browser keeps ⇧⌘H, as Chrome on a Mac does); a hidden one stays in the list, greyed, with its eye shut. Dragging a row puts the element in front of or behind its neighbours, or into a frame. Each is a change in the draft, like any other, and one Undo.

Captured, by component. Below, the components the page uses, each opening its component; the captured page itself is not a tree of tags, which nobody can read. The inspector's own Layers section goes, so the list is said once.

The name is the element's. It is a name change on the drawn element, kept when it is copied, and it shows in the inspector's header. Hiding is a hidden change: a hidden element, and what is in it, is not drawn. A row dropped in the list is saved by drawing.place, which writes the frame's whole order as one chain (chainOrder), so orders changed again and again never loop, and keeps the element's place on the page when it goes into or out of a frame (moveInto).

Not yet: the name is not in Review's line or in Get code; a row cannot be dragged into a folded frame.

Related

• pages-edit
• pages-multi-select
• shortcuts

Sources

• .context/designs/web/pages-arrange/pages-layers.html
• .context/designs/web/pages-arrange/pages-rename-layer.html