Composer
Layout and design: pages, frames, components and real typography, with a prototype view and a code view.
In one line#
An infinite canvas for arranging things: multi-page documents, screen designs and layouts, with typographic controls that go past "pick a font and a size".
The layout#
| Menu bar | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Toolbar | undo/redo, select, frame, shapes, line, arrow, pen, type, hand: then Margins, Guides, Baseline, and the artboard count |
| Left | Pages, then Layers · Assets · Components · Frames, then the layer-category list |
| Centre | the canvas, with the zoom and a page indicator |
| Right | Design · Prototype · Code |
| Status bar | artboards, objects, selection, active tool, zoom |
What you do here#
Pages and frames#
A document has pages; a page holds frames (artboards). That is the difference from Vectra, which draws on one artboard at a time: Composer is for a set of screens or a set of spreads.
Layers, assets and components#
Four tabs over the same document. Components are the reusable pieces, define once, place many, edit the definition and every instance follows. Assets is what the document is pulling in. The layer list is grouped by kind (Text, Images, Graphics), which is faster to scan than a flat list on a busy page.
Layout precisely#
X, Y, W, H and a corner radius, plus align and distribute. Margins, Guides and a Baseline grid are toggles on the toolbar: the baseline grid is what makes multi-column text line up across a spread.
Typography#
The part that earns Composer its place:
| Font, size, leading, tracking | as numbers, not as a slider |
| Alignment | horizontal, and vertical within the box: top, middle, bottom |
| Weight and case | including "as typed" |
| Paragraph spacing, lists | bulleted or numbered |
| Resize mode | Fixed size, Auto width, Auto height: whether the box follows the text or the text wraps to the box |
| Text threading | link one text box to the next so overflow flows on |
| Text styles | named, reusable |
Prototype and code#
The Prototype tab wires screens together into a clickable flow. The Code tab shows the design as code.
Variables and styles#
Two panels that turn a document into a system rather than a set of pages:
- Variables: named values (a colour, a number, a string) used across the document, with a variable picker wherever a value is set. Change the variable, every use follows.
- Styles: named text and object styles.
- Fills: the fill editor, including gradients and images.
Together with Components, they are what makes a design token-driven: the Vectra DA workspace can export design tokens, and Composer is where they get used.
Prototyping#
A prototype here is a graph over the frames you already drew. Each interaction is four things: a trigger (click or hover), a target frame, a transition and a duration. Drag from a frame's connect handle to the frame it should lead to.
Prototype Mode turns the canvas into the flow view; the Preview Player runs it as the reader would see it, with a restart. There is no separate prototyping document, the frames are the screens.
Dev Mode, handing the design to code#
The Inspect tab is the other half of a design tool: it reads the selection and produces the code for it, on three platform tabs.
| Tab | Output |
|---|---|
| CSS | the web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Alongside the generated code it reports the real numbers a developer asks for: size, radius, rotation, opacity, fill, stroke, effects, font and font size, and spacing measured to the parent and to siblings: the two distances that decide a layout. Code copies to the clipboard or downloads.
Exporting#
Export in Composer is a list of settings, not a single choice: add several, select which ones to run, and every selected setting produces its own file in one pass. Each setting carries:
| Format and quality | per setting, so a PNG and a JPG can leave together |
| Scale and DPI | @2x and print resolution |
| CMYK (print) | for the press-bound version |
| Naming | a prefix and a suffix, project- and @2x |
| Background | including transparent, where the format allows it |
Two details the panel states rather than leaving you to discover:
- Only PNG and SVG carry transparency. Choosing a transparent background on a JPG is a setting with no effect, and the panel says so.
- The source of an export is either a node or a slice: Create Slice makes an export region out of the current selection, which is how you export part of a frame without cutting the frame up.
Presets save a whole set of settings, so the export configuration for a project is written once.
Files it reads and writes#
| Native format | .comp |
| Exports | .png · .jpg · .svg, at any scale or DPI, in RGB or CMYK |
| Generates | CSS · SwiftUI · Jetpack Compose |
Sending work to other studios#
Produces a composition, and the active artboard rendered as an image. Accepts pixel art, vector art and images.
Working with someone else#
Composer syncs as a document: the whole state, debounced, plus dispatched actions. Two people editing the same page at the same instant will have one of them win; work on different pages.
Limits and common snags#
- Auto width and auto height fight fixed layouts. A box set to auto width will not wrap; if text is running off the frame, that is usually why.
- Text threading is not automatic. A box reports Not linked until you thread it.
- Components propagate from the definition, not from an instance. Editing an instance does not update the others.