Guide

Tips & Tricks

A quick tour of the workflow, plus the shortcuts and small details that aren't obvious the first time you open Tween.

Draw & style

Pick a tool from the left rail — pen, shapes, or Free Draw for a freehand sketch that gets auto-smoothed. Select anything to style it in the Inspector: solid or gradient fills, stroke width, dash, and per-color opacity.

Inspector panel showing gradient fill and dash controls

Import or trace something in

Drag an SVG, image, or SF Symbol straight onto the canvas, paste SVG markup, or paste a SwiftUI Path/Shape snippet. Raster images can be traced into real editable vector points.

Import tab for pasting SVG markup or importing a file

Organize with Layers

Every shape, text label, and image gets its own row — hide, lock, rename, reorder, or multi-select without leaving the canvas. Shapes, text, and images each stack within their own group.

Layers panel listing shapes with hide, lock, and reorder controls

Ask the AI assistant

Bring your own Anthropic or OpenAI API key (saved to the macOS Keychain), describe what you want — "add a red star that spins in over 2 seconds" — and it builds it directly on the canvas.

AI Assistant panel with API key field and chat prompt

Export

PDF, PNG, SVG, or a transparent ProRes video — or open Code Export for a SwiftUI Shape/Path, SVG/HTML/Canvas/React, Android, Compose, or Flutter snippet.

Shortcuts & tricks worth knowing

Hold Space over the canvas to temporarily pan/view, even mid-draw — let go to snap back to your tool.
Hold Shift over the canvas to temporarily switch to Select mode without changing tools.
Arrow keys nudge a selection 1pt; Shift+Arrow nudges it 10pt.
Arrow keys in a number field step the value by 1 (or 0.1 on a percentage field).
Shift while dragging a resize handle keeps proportions locked.
Cmd+A / Delete / Esc select all, delete, or clear the current selection.
Cmd+C / Cmd+V copy and paste points, text, or images — paste lands under your mouse.
In the Layers tab, ↑/↓ moves your selection between layers; Shift+↑/↓ selects a range.
Shapes snap into alignment automatically — to another layer's center, the canvas center, or a nearby anchor.
Right-click a point, label, image, or layer row for a context menu (smooth/corner, delete, rename…).
Pinch or scroll to zoom (20%–500%); the toolbar's 100% button resets it instantly.
On the Animate tab, drag a shape's rotation-pivot handle to change what it spins around — right-click it to reset to center.