Pages
Pages split one document into separate canvases. Variables, text styles and components stay shared across all of them.
How pages work
A document without pages is a single canvas. When you add a second page, the layers you already have move into a page called "Page 1". From then on, the document's top level holds only page nodes, and each page holds its own top-level frames.
Variables and text styles belong to the document, so every page uses the same ones. Layer ids stay unique across pages, and a component on one page can be used on any other.
The pages list
Pages are listed at the top of the Layers tab, above the layers of the page you are on. Click a page to open it.
- Add page (the plus button) makes a new page.
- Double-click a page, or choose Rename from its right-click menu, to rename it.
- Duplicate copies the page with everything on it.
- Delete removes it. A document always keeps one page.
- Drag a page to reorder the list.
When an agent changes a page while you are looking at another one, that page shows the agent's colored dot until you open it.
Page background
Each page has its own canvas color, the background around its frames. With nothing selected, the Inspector shows Page background for the page you are on. The value is a solid hex color such as "#F5F5F5"; variables, gradients and images are not accepted. Without one, the editor shows its dark default, #0A0A0C. A new page takes the background of the page you were on.
Pages for agents
In an execute snippet, document is the root, and anything inserted, copied or moved into it lands on currentPage, the page the agent works on. In a document without pages, currentPage is "document". The Potlot skill tells agents to make pages only when asked.
| Task | Snippet |
|---|---|
| List pages | GetPages() returns each page's id, name, number of frames, whether it is active, and its background. |
| Add a page | Insert(document, {type: "page", name: "Checkout"}) |
| Rename | Update(pageId, {name: "Onboarding"}) |
| Set the canvas color | Update(pageId, {background: "#F5F5F5"}) |
| Reorder | Move(pageId, document, 0) |
| Move a layer to a page | Move(layerId, pageId) |
| Duplicate | Copy(pageId, document) |
| Delete | Delete(pageId) |
| Point the user to a page | ShowPage(pageId) |
A duplicated page gets its own copies of its components, and the instances in the copy use those. Delete refuses the last page and a page whose components have instances on other pages.
ShowPage does not switch the page for the user. The editor offers the page, and the user decides whether to open it.
The get_app_state tool lists the pages and reports which one the agent works on, and get_comments takes a page id to read only that page's comment threads. In the Comments panel, This page and All pages filter threads the same way. See Reading the document and Comments.
Something unclear, missing or broken? Write to feedback@anaknegeri.dev.