Vectra
Vector drawing, paths, type, booleans and pathfinder, plus eleven design workspaces for brand, logo, icon, pattern, packaging, infographics and UX.
In one line#
Crisp, infinitely scalable shapes and text: the studio for logos, icons, UI mock-ups and anything that has to stay sharp at every size.
The layout#
| Menu bar | File · Edit · Object · Type · Select · View · Plugins |
| Document tabs | one artboard set per tab |
| Toolbar | undo/redo, duplicate, the SVG code view, boolean operations, lock, the fill and stroke swatches with the stroke width, and the align/distribute buttons |
| Guides bar | Grid with its spacing · Snap · Rulers · a logo grid · Safe area · Smart guides |
| Left rail | select, direct-select, type, line, rectangle, pen, shape, rotate, scissors, brush, add-anchor, artboard, hand |
| Right | Properties · Layers · Text · Illust |
| Status bar | artboard, its size, object count, selection count, history position, active tool, zoom |
What you do here#
Draw#
The pen places anchors and handles; direct select edits them afterwards.
Shapes, lines and text are their own tools. The hints live on the toolbar and are
worth reading once: Shift constrains, Alt draws from the centre, arrow keys
nudge.
Position precisely#
The Transform section takes exact numbers (X, Y, width, height, rotation) alongside Flip H, Flip V, and a reset to 0°. The align and distribute buttons on the toolbar work on a selection, and Smart guides snap to the other objects rather than to the grid.
Fill and stroke#
Both are switchable independently: a shape can be a fill with no stroke, a stroke with no fill, or neither. Colours are editable as hex. Under Appearance: opacity, blend mode, and visibility.
Combine shapes#
Pathfinder and the boolean operations on the toolbar: union, subtract, intersect, exclude. A boolean group stays editable, Release boolean group is in the command palette when you need the pieces back.
Type#
The Text tab holds the typographic controls; the Type menu holds the operations: converting text to outlines, and so on.
Effects#
The Effects section applies non-destructively, so the geometry underneath is still the geometry you drew.
Read the SVG#
The code button on the toolbar shows the document as SVG. Useful for checking what will actually be exported, and for pasting a path in from somewhere else.
The right panel: four tabs, then eleven workspaces#
Primary tabs, the four you use constantly:
| Properties | transform, fill, stroke, appearance, effects, align, pathfinder |
| Layers | every object, reorderable, hideable, lockable |
| Text | the typographic controls |
| Illust | the illustration side: brushes, with a brush library whose brushes are editable per type |
Under them, an accordion labelled Workspaces hides eleven scenario panels until you need them. This is the part of Vectra that is not a drawing tool but a design assistant, and it is easy to miss because it is collapsed by default:
| Workspace | What it is for |
|---|---|
| Brand | a brand identity: the deliverable checklist (primary, reversed and monochrome logo, icon/symbol, brand guidelines PDF), with sections you enable or disable |
| Logo | logo types, mockups and export presets: the variations a logo has to ship in |
| Icon | icon sets: sizes, keylines, and the app-platform presets |
| Pattern | repeating patterns: tile types (rope, chain, dashed and the rest), wallpaper groups and motif presets |
| Pack | packaging: product boxes and the other die-line templates |
| Infog | infographics: diagram types, flowchart shapes (data as a parallelogram, database as a cylinder…) and chart types |
| UX | screen design: device frames and breakpoint presets |
| DA | art direction: project metadata, style tiles, and design-token export |
| Auto Layout | Figma-style auto-layout on the selected frame or group |
| Components | reusable symbols: define once, place many |
| Export | a format selector that drives per-format options |
The accordion opens itself when a workspace tab is already active, and the header shows which one. If a panel you used yesterday seems gone, it is behind Workspaces.
Exporting#
Vectra exports eight ways, and the panel says what each one is for rather than leaving you to guess:
| Format | |
|---|---|
| PNG | raster with transparency, web and UI |
| JPG | compressed raster, no transparency |
| WebP | modern web, small, with transparency |
| AVIF | best compression, wide support |
| SVG | vector: scalable and still editable |
| universal document, print and web | |
| EPS | professional print, Adobe-compatible |
| JSON | the document as data |
What you export is a choice too: the selection, the artboard, all artboards, or the slices: the Slice Tool cuts the canvas into named regions and exports them together, which is how a UI mock leaves as a set of assets rather than one image.
Print production#
The part of Vectra that makes it a prepress tool and not only a drawing one. Print Production adds the marks a printer expects:
| Crop marks | where to cut |
| Registration marks | alignment targets for the press |
| Colour bars | the CMYK calibration strip |
| Bleed (mm) | artwork extended past the trim line, so a millimetre of drift does not show as a white edge |
| Overprint preview | what will actually happen where inks overlap |
| Scale bar | for a drawing printed to a scale |
⚠️ CMYK here is simulated. The panel says so itself: the values are a preview, and accurate print colour needs a calibrated colour-management workflow. Treat the CMYK read-out as a guide, not as a proof, and note that CMYK export carries no transparency, which is a property of the colour model, not a limitation of Vectra.
Files it reads and writes#
| Native format | .vectra |
| Imports | .svg |
| Exports | .svg · .pdf · .eps · .png · .jpg · .webp · .avif · .json |
Sending work to other studios#
Produces vector art and Vectra objects: the same drawing in two forms. Accepts vector art and images.
| Destination | What arrives |
|---|---|
| Inkwell, Composer | vector art, still editable |
| Animator | Vectra objects, animatable one by one |
| Engine | a HUD hierarchy, not a picture |
That last one is the point of Vectra for a game. A screen mock-up sent to the Engine arrives as a structure the Engine can lay out and script, buttons that are buttons, rather than as a flattened image you would have to rebuild.
Working with someone else#
Vectra syncs operation by operation: objects added, deleted, updated and replaced wholesale; layers and their ordering; the artboard size; and the active layer.
Limits and common snags#
- A panel you cannot find is probably under Workspaces. Only four tabs are shown; the other eleven are behind the collapsed accordion.
- A shape with no fill and no stroke is invisible but still there. The status bar's object count is the giveaway.
- Smart guides snap to objects, the grid snaps to the grid. If something will not land where you want, check which of the two is on.