Draw in Formo — what's here and how it's organized

Draw is where you'll spend most of your time in Formo. This is the collection of everything related to making artwork: shapes, brushwork, vector paths, color, and the structural pieces that hold it all together. Nothing here is complicated on its own; it's just a lot of tools, each doing one specific job, the same way the workspace itself turned out to be a handful of simple areas once you knew what was where.

TL;DR:

- Everything you draw lives inside a structure: frames hold things, groups collect them loosely, components make them reusable. Shapes (rectangle, ellipse, star, polygon, line, arrow) are the fastest way to start, parametric and editable after the fact. The brush is for freehand work: pressure-sensitive, and just as editable after drawing as a shape is. The pen and vector network underneath everything give you precise, hand-built paths when a shape or a brush stroke isn't exact enough. Color and fills go well beyond flat color; gradients, images, and live reactive shader fills all stack on the same object. Text is real and editable, not a flattened label.

- Shapes (rectangle, ellipse, star, polygon, line, arrow) are the fastest way to start — parametric, editable after the fact.

- The brush is for freehand work — pressure-sensitive, and just as editable after drawing as a shape is.

- The pen and vector network underneath everything give you precise, hand-built paths when a shape or a brush stroke isn't exact enough.

- Color and fills go well beyond flat color — gradients, images, and live reactive shader fills all stack on the same object.

- Text is real and editable, not a flattened label.

Frames — where things live

A frame is a container: drop shapes, text, or a whole brush layer inside one, and it becomes the frame's contents. Frames are the basic organizational unit of a scene. UI screens might each be its own frame. A frame can optionally clip its own contents to its own shape, so anything inside it that would otherwise spill past its edges gets cut off cleanly, contained to exactly that frame's boundary.

To create a frame, select the Frame tool from the toolbar in Prototyping mode, or press F. Anything you draw or place inside that area from then on becomes the frame's contents: a real structural relationship, not just visual overlap.

Learn more how to work with frames in our guide Frames.

Groups — a lighter way to collect things

A group is a simpler way to treat several objects as one unit, for when you want to move, select, or transform a handful of shapes together without giving them the fuller structure a frame carries. Think of it as the difference between a folder with real properties of its own (a frame) and just a rubber band around a handful of items so they act as one (a group).

To create a group, select the Group tool from the toolbar in Prototyping mode or select two or more objects and press Ctrl+G. They become one group, shown as a single row in the layers panel with the individual objects nested underneath it.

Learn more how to work with groups in our guide Groups.

Components — draw once, reuse everywhere

A component is a reusable definition: build something once — an icon, a prop, a repeated background element — turn it into a component, and place as many instances of it as you need. Redraw the original definition, and every instance updates with it automatically, except any instance you've deliberately changed yourself, which keeps its own override intact instead of snapping back.

To create a component, either select the Component tool from the toolbar in Prototyping mode and press K to start a new one, or select an existing object or group and press Ctrl+Shift+K to convert it directly. Every instance you place afterward updates automatically when you edit the original, except any instance you've deliberately changed yourself.

Learn more how to work with components in our guide Components.

Shapes — the fastest way to start

Rectangle, ellipse, star, polygon, line, and arrow, always in the toolbar. Nothing about them is fixed the moment you draw it: corner radius, point count, angles, and more all stay live and editable, by dragging a handle right on the canvas or typing an exact number.

To create a shape, pick a shape tool from the toolbar in Prototyping mode or press its shortcut key, then click and drag on the canvas.

Learn more how to work with shapes in our guide Shapes.

The brush — for freehand work

A pressure-sensitive brush that turns a rough hand-drawn gesture into a clean vector shape, not a raster smear. It stays editable long after you've drawn it. Nudge the smoothing or nib size later, and the stroke regenerates from your original gesture, not a stretched copy of what you already committed.

To draw with the brush, select it from the Draw mode toolbar (Ctrl+2), then draw directly on the canvas.

Learn more how to work with the brush in our guide Brush & freehand drawing.

The pen and the vector network underneath

Every shape and every brush stroke in Formo is a vector network: a model where any point can connect to any other point, not the closed-loop-only model most tools use. The pen tool gives you direct access to that network: precise, hand-placed points and curves when a freehand stroke won't get you exactly what you need.

To build a path by hand, select the Pen tool from the toolbar, or press P, then click to place points and drag to shape the curve between them.

Learn more how to work with the pen tool and vector networks in our guide Vector Tools.

Color and fills

A fill isn't limited to flat color. Gradients, images, and — uniquely — live reactive shader fills that ripple, glow, and respond to what's happening elsewhere in the scene, all stack on a single object, layered in order. Color itself is built on OKLCH rather than raw RGB, so adjusting lightness, saturation, or hue moves exactly the thing you asked for and nothing else.

To change what a shape is filled with, select it and open the Fill section in the right panel. Add a solid color, a gradient, an image, or a live shader fill, and stack as many as you like on the same object.

Learn more how to work with color and fills in our guide Color, fills, and gradients.

Text

Real, editable text: set the font (search for one or bring your own licensed file), adjust the weight and style, and outline it into vector shapes whenever you want to reshape or animate the letterforms directly.

To add text, select the Text tool from the toolbar, or press T, then click on the canvas and start typing.

Learn more how to work with text in our guide Text.