> For the complete documentation index, see [llms.txt](https://xfigura.gitbook.io/xfigura-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xfigura.gitbook.io/xfigura-docs/getting-started/canvas-guide.md).

# Canvas Guide

Learn how to navigate and organize the xFigura canvas.

The xFigura canvas is the workspace where you arrange assets, build nodes, connect outputs, and run creative workflows.

## Navigate the canvas

* **Scroll** to zoom in and out.
* **Right-click and drag** to pan across the board.
* **Click** an item to select it.
* **Click and drag** across the canvas to select multiple items.

<div data-with-frame="true"><figure><img src="https://1105741269-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FezPs4sBq27l9GhXqMswu%2Fuploads%2FmApWlZsmtF1lCX13PtXH%2Fimage.png?alt=media&#x26;token=aa88f628-cc98-43e7-9286-b1566b16ed49" alt=""><figcaption></figcaption></figure></div>

## Organize your work

The canvas has no fixed boundary. Arrange content by client, project, phase, option, or any other structure that supports your work.

Use **auto-organize** when you need to quickly tidy the placement of nodes.

<div data-with-frame="true"><figure><img src="https://1105741269-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FezPs4sBq27l9GhXqMswu%2Fuploads%2FJaH3YIt7PIqelzdSlgLy%2F00_Navigating%20Canvas.gif?alt=media&#x26;token=320a83c2-2a6c-4365-9035-6db650f15096" alt=""><figcaption></figcaption></figure></div>

## Build a workflow

Create nodes, move them into position, and connect an output to a compatible input. Board layout, node placement, and connections persist when the page is reloaded.

<div data-with-frame="true"><figure><img src="https://1105741269-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FezPs4sBq27l9GhXqMswu%2Fuploads%2FF9hhvVZsYbEQxoYCONQZ%2Fimage.png?alt=media&#x26;token=c2cf2c7a-f219-443f-907b-d239ea591c17" alt=""><figcaption></figcaption></figure></div>

See [Node Overview](/xfigura-docs/generate/node-overview.md) for the main node types and connection model.
