Canvas

The canvas is where you design in Velork. You draw frames and shapes, paste from Figma, capture live websites, build 3D scenes, and animate layers. Agent reads the same layers, so you can ask it to change a design or build it in code.

Open the canvas

• Click Canvas in the title bar, or press Cmd + Option + C.
• In full-screen chat, pick Canvas in the agents panel launcher to design next to the chat.

Press Cmd + Option + E to go back to the editor.

Where designs are saved

Each canvas page is saved inside your project folder under .velork/designs, so designs travel with the repo. When a chat has no project folder, Velork keeps the design in Drafts (~/Velork/Drafts). To move it into a project, run Move Drafts to a Folder… from the command palette, or click Move… in the share card.

The Design sidebar

The Design sidebar has two sections:

• Pages: switch pages, add one with New Page, or remove one with Delete Page.
• Layers: the layer tree for the current page. Use Find... to search layers, and the row buttons to Hide, Show, Lock, or Unlock a layer.

Select a layer to edit it in the properties panel.

Toolbar

The floating toolbar groups tools the way Figma does. Each group shows the tool you used last; click the small chevron to pick another tool in the group.

The 3D group holds Box, Sphere, Cylinder, Cone, Ring, Import model…, Light, and Camera. See 3D.

To edit the points of a vector, double-click the layer. Press Escape to stop editing the path.

On the right side of the toolbar:

• Actions: opens Figma… (connect your Figma account) and Preferences.
• Design / Motion: switches the canvas mode. Press Shift + M to flip between them. See Motion and prototypes.
• Present: plays the page as a prototype.
• Share: publishes a link to the design. See Sharing and comments.

Canvas preferences

Open Actions → Preferences to switch these on or off:

• Snapping: Snap to geometry and guides, Snap to objects, Snap to pixel grid
• View: Show dimensions on objects, Highlight layers on hover, Show rulers, Show pixel grid, Show snap guides, Show performance chart, Play shaders

Several of them also have shortcuts:

Edit layers

The properties panel shows the sections the selection supports:

• Position: alignment, X and Y, constraints, rotation, and flip
• Layout: auto layout and size. Click the button in the section header to turn auto layout on or off, then set Flow (Freeform, Vertical, Horizontal, or Grid), Resizing, Alignment & Gap, Padding, and Clip Content.
• 3D: depth, materials, lights, and cameras. See 3D.
• Typography: font, weight, size, alignment, and type settings
• Appearance: visibility, opacity, corner radius, and blend mode
• Fill: solid colors, gradients, images, patterns, and animated shader fills
• Stroke: color, weight, and position (Inside, Center, or Outside)
• Effects: shadows, blurs, noise, and glass
• Export: image, vector, and video output. See Export.

Use the + in a section header to add a fill, stroke, effect, or export row.

Select two or more shapes to combine them with Union, Subtract, Intersect, or Exclude.

Components

Select layers and press Cmd + Option + K to make a component. Components you paste from Figma land in a Components section on the page, and color and type tokens land in a Design Tokens section. See Paste from Figma.

Keyboard shortcuts

Bring designs onto the canvas

Work with Agent

Agent can read and edit the canvas in any mode. Use Design mode when you want it to create or refine layouts, and Develop mode when you want code.

Select a frame, then ask:

Build this frame as a React component with Tailwind. Match the spacing and type.

Agent can also generate images for a design. They are saved in the page's assets folder and can fill layers in the design.

While Agent works, the canvas follows it to the screens it is changing. Pan or zoom to look elsewhere, and click Follow Velork AI to follow it again.

Check the result in the built-in browser next to the design.

Next steps