Skip to main content

Design Tools

Most tools draw one thing and hand control straight back to Selection — draw a shape, click away, and the selection tool is already armed for your next move. A tool stays active only when it needs more than one gesture.

Selection selection

The resting state. Click an element to select it, drag to move, drag a corner handle to resize, and drag on empty canvas to marquee-select many at once. Holding Space anywhere turns the cursor into a hand so you can pan the canvas — the same gesture works in the timeline.

Rectangle rectangle

Click and drag on the canvas to draw. Hold Shift while dragging to keep it a perfect square. The moment you release, the shape is selected with its handles ready.

Ellipse ellipse

Same gesture as the rectangle — click and drag. Hold Shift for a perfect circle.

Line line

Click where the line starts, drag to where it ends, release. Hold Shift to lock it to 45° steps.

Container container

The auto-layout box — the beating heart of responsive design here. Draw a container, drop elements inside it, and they lay out themselves: Flow (row/column), Wrap, Align, Justify, Gap and Padding all live in the Properties panel. Resize the container and its children reflow — that’s what makes generated designs survive being edited. The layers panel uses the same Columns2 icon, so the object has one identity everywhere.

Pen pen

Click-click-click to place anchor points, drag on a point to pull out bezier handles, double-click to close the path, Enter to commit, Escape to cancel. Every click lands a point you can move later with the direct-selection handles.

Brush brush

Freehand drawing — click and drag a stroke. The stroke is a real editable path, not a flattened image.

Eraser eraser

Scrub across elements to remove them — the stroke deletes whatever it touches.

Text text

Click once and start typing — the box grows with your words. Click and drag instead to draw a fixed-width text box that wraps. Font, size, weight, color, spacing and alignment are all in the Properties panel, and the box stays live as you edit them.

Generate SVG svggen

The AI vector tool. Click and drag a region on the canvas, then describe what you want — a rocket to the moon, a bicycle, a logo mark. The model draws it as grouped, editable vector shapes inside that box, with a pen cursor tracing the linework as it lands. The region stays empty until the SVG streams in.

Eyedropper eyedropper

Pick a color from anywhere on the canvas to reuse it — the fill or stroke adopts the sampled value.