Layers and properties

The layers list

The left panel lists the design's Pages, then the Layers of the current page: each artboard, with everything inside it.

• Click a layer to select it, and the canvas scrolls to it. Shift+click adds to the selection.
• Double-click a layer or an artboard to rename it.
• Point at a row for Lock and Hide. Pointing at a row also highlights the layer on the canvas.
• Right-click a row for the same menu as on the canvas.
• The magnifier (Find a layer) searches layer names and text.

The icons tell you what a layer is: text, an image, a row, a column, a grid, or a plain frame.

The properties panel

The right panel edits whatever is selected. With nothing selected it shows the page's Canvas colour and the design's folder.

Number fields take a plain number in pixels, or any CSS value. Drag a field's label sideways to change it, or use the ↑ and ↓ keys (hold Shift for steps of 10).

Name and align

The layer's type and Name, Duplicate and Delete, and six align buttons. For a layer in a row or column, align sets how its frame lines up its children.

Layout

• X and Y: its position, for layers placed freely.
• ∠: rotation.
• W and H, each Fixed (a set size), Fit (hug the content) or Fill (take the room the frame gives it).
• Min and max size: click + Min and max size to keep a layer from growing or shrinking past a size.
• Absolute position: take a layer out of its row or column and place it freely.
• Wrap in flex (Shift+A): put the selected layers in a new column.

Flex

How a frame lays out what's inside it. Click + (Use flex layout) to turn it on:

• Row, Column, or Row that wraps, and the Gap between items.
• Justify (start, centre, end, space between) and Align (start, centre, end, stretch).
• Padding: one value, or two like 8 16.
• Clip content: hide anything that sticks out.

Without flex, a frame's children sit wherever you put them.

Grid

For cards, galleries and dashboards, a frame can lay out its children in columns and rows instead. Click the grid button (Use grid layout) next to + in the Flex heading; the section becomes Grid:

• Columns and Rows: a number for that many equal columns (like 3), or a list of sizes, like 1fr 1fr 200px (two equal columns and one 200 px wide). Leave Rows empty to add rows as they're needed.
• Col gap and Row gap: the space between columns and between rows.
• Across and Down: where each child sits in its cell (start, centre, end), or stretch to fill it.

Select a layer inside a grid for Col span and Row span: how many columns and rows it takes up. Its W and H read Fill while it fills its cell, and the align buttons line it up inside its cell. Drag it on the canvas to put it in another cell. Click − (Remove grid) to turn the grid off.

Fill

For frames. A frame can have one fill or several, stacked:

• Solid: a colour.
• Gradient: Linear, Radial or Angular (a sweep around the middle). The strip shows the gradient: click it to add a colour stop there, or drag a stop to move it. Each stop has its colour and where it sits, from 0 to 100%; + adds a stop and − removes one (a gradient keeps at least two). Angle turns a linear or angular gradient.
• Image: a picture. It starts with a sample photo link. Upload image uploads your picture (up to 15 MB) to an online upload service and uses its public link, so anyone with the link can see it. You can also paste an https:// link. To keep a picture only on your computer, use an Image layer instead. Choose Cover (fill the frame, cropping the picture), Contain (show all of it) or Tile (repeat it; Tile size sets how big each copy is). Position picks which part stays in view: click one of the nine spots, or type X % and Y %.

Click + (Add a fill) to add a fill on top. With more than one, each fill gets a row, top first: click a row to edit it, use the arrows to move it up or down, the eye to hide it (it's kept, just not drawn), and − to remove it. A see-through colour on top tints whatever is under it.

Shader

An animated fill for a frame, drawn behind everything inside it. Click + (Add a shader fill) in the Shader section, then:

• Pick a look: Mesh (soft colours drifting into each other), Grain (a gradient with film grain), Waves, Aurora (glowing blobs) or Noise (smoky swirls).
• Colors: two to four. Click a swatch to change it, + to add one, − to remove the last.
• Speed, Scale and Intensity: drag the sliders. Speed 0 holds it still.

The shader plays on the canvas and pauses while it's scrolled out of view or Machine is in the background. PNG, SVG and PDF exports, copied code and Machine Code's canvas show a still gradient in the same colours instead. Click − (Remove shader) to go back to the frame's plain fill.

Animation

Make any layer move. Click + (Add an animation), then pick Fade in, Slide up, Pulse, Float or Spin, and set:

• Time: how long one run takes, in milliseconds.
• Delay: how long it waits before it starts.
• Loop: play it again and again. Fade in and slide up play once; pulse, float and spin loop.

The animation plays on the canvas; Replay (the circular arrow) plays it again. It's kept as the layer's CSS, so copied code moves too: HTML, Vue and Svelte include what the animation needs, and React adds a note with the CSS to paste into your stylesheet.

Typography

For text: its text style (see Saved styles), the text itself, font, weight, Size, Line height, Track (letter spacing), alignment, uppercase, underline or strikethrough, and Color.

Click the font field to search popular Google Fonts and the fonts on your computer, or type any font name and pick Use "…". Any font from Google Fonts works by name, even one that isn't installed: Design loads it for you (you need to be online), and PNG and PDF exports and copied code bring it along. A font that isn't on Google Fonts must be installed on your computer to show; otherwise it falls back to another one.

Mixed styles in one text

One text layer can mix styles: a bold word, a coloured word, or a link. Double-click the text to edit it, then select some words. A small toolbar appears above them: Bold, Italic, Underline, Colour, Link and Clear styles. Ctrl+B, Ctrl+I, Ctrl+U and Ctrl+K do the same. The rest of the Typography settings still apply to the whole text.

When some words have their own style, Typography says so. Editing the words in the text box keeps those styles; Clear removes them.

Image

For Image layers: Upload a picture from your computer (it's copied into design/assets) or Use a link, add Alt text, and choose Cover, Contain or Stretch. With Cover or Contain, the nine-spot picker (or X % and Y %) sets which part of the picture stays in view.

Appearance, Border, Shadow, Effects

• Radius (rounded corners), Opacity, and Blend mode.
• Border: width, solid, dashed or dotted, and colour. Click + again to add more borders. The first sits just inside the layer's edge; each one after it rings the outside of the one before and is always solid. Use the arrows to reorder them.
• Shadow: X, Y, blur, spread and colour.
• Blur blurs the layer, Backdrop blurs what's behind it (for frosted glass).

Other styles

Any CSS the sections above don't cover, such as text-wrap: balance. Click + (Add a CSS property) to add one.

Artboards

Select an artboard to set its Name, its size and position, or one of the size presets: Desktop (1440 × 900), Laptop (1280 × 800), Tablet (834 × 1194) or Phone (390 × 844). Its Export settings are at the bottom. See Export and code.

Layout grid draws guides over the artboard to line things up with:

• + Columns: a column grid. Set its Count, the Gutter between columns and the Margin at each side. It starts at 12 columns.
• + Rows: the same, across the artboard.
• + Square grid: squares of a size you choose, 8 px to start.

Click − to remove one. The eye at the top, or Ctrl+G, shows or hides layout grids on every artboard. While they show, layers snap to the column and row edges. Layout grids are saved with the artboard, never in its CSS. See The canvas for rulers and guides.

Several layers

With several layers selected you can Duplicate, Delete or Wrap in flex them together, and change the styles they share: fill (when they're all frames), typography (when they're all text), and appearance, border, shadow and effects. The fields show the first layer's values, and a change goes to every selected layer.

Theme tokens

The Theme tab holds your design's tokens: colours, sizes and fonts every artboard can use as var(--name). They're saved in design/tokens.css.

Click + (Add token), give it a name like brand and a value like #e8407f, and click Add. A token that holds a colour is listed under Colour styles (see Saved styles). Change a token and every layer using it changes too.

The quickest way to a full theme is to ask: "Make a theme for this design: a brand colour, two greys, a heading font and a body font, and use them on every board."

Modes (light and dark)

A mode gives your tokens a second set of values, such as a dark theme.

1. At the top of the Theme tab, click + next to Default, type a name like dark and click Add.
2. With the mode picked, change the tokens that should look different. Faded values still come from Default; a token you change gets its own value in this mode. Hover over it and click − to go back to the default.
3. Select an artboard and pick the mode under Mode in the right panel. The artboard is drawn with that mode's values, and so is its export.

Remove mode deletes the mode and its values. Modes are saved in tokens.css as a [data-mode="dark"] block after :root, so the same file works in your own code.

Saved styles

Saved styles are named looks you reuse: text styles (font, weight, size, line height and letter spacing together) and colour styles. Change a style once and every layer using it changes too.

Make a text style. Select a text and click the style field at the top of Typography (it says No text style). Pick Create text style, type a name like Heading and press Enter. The text now uses the style.

Use a text style. Select one or more texts, click the same field and pick the style. Detach style keeps the look but stops following the style.

Make a colour style. Click the small swatch-book button at the right end of any colour field (text Color, a fill, a gradient stop, a border) and pick Create colour style. Name it and press Enter. The same button lists your colour styles to pick from, and Detach style turns the colour back into a plain one.

Edit, rename and delete. Styles are listed at the top of the Theme tab, under Text styles and Colour styles.

• Click a text style's Aa to change its font, weight, size, line height and spacing.
• Click a colour style's swatch to pick a new colour, or type one.
• Click a name to rename it. Layers using the style follow the new name.
• Hover over a style and click − to delete it. Layers that used it keep their look as their own values.
• + next to each heading adds a style from scratch.

With a mode picked, the styles show and change that mode's values.

Styles are saved in tokens.css like any token, so agents use them too. Copied code writes a text style's values out in full.

Components

Make a frame you use again and again, like a button, a card or a tab bar, into a component: change it once and every copy follows.

1. Select the frame and click Create component in the right panel. It becomes the Main component.
2. In the left panel, Components now lists it. Select a frame or an artboard, point at the component and click Insert to add a copy (an instance).
3. Edit the main component, and every instance updates.

An instance keeps its own place and size, but its look and layers come from the main component. Select an instance for Go to main, or Detach to turn it back into an ordinary frame. Agents follow the same rule: they edit the main component, never an instance.

Variants

One component can come in several looks, like a button in sizes S, M and L and states Default, Hover and Disabled. Each look is a variant.

1. Select the main component and click + Variant. The first time, the component becomes a set: your design moves into a Default variant and a copy is added beside it, inside a dashed box.
2. Select a variant to set its values, such as Size L. Click + Variant property on the main component to add another property like State, and rename a property by typing over its name.
3. Change each variant the way it should look.

Instances show the first variant. Select an instance and pick the values you want in the right panel; it shows the matching variant, and takes that variant's size unless you've resized it.

Toggle and text properties

On the main component, + Toggle lets instances show or hide one of its layers (an icon, say), and + Text lets them change a text layer (a label). Pick the layer from the list. Instances then get a switch or a text field for it.

Changing one instance

You can change a single instance without detaching it: edit a text inside it, change a colour or fill, or hide a layer. Those changes are overrides. They stay when the main component changes; everything else still follows the main. Reset overrides puts the instance back to the main's look.

Copy code turns a component with variants into one React component whose props pick the variant and fill the properties.