# Layers and properties

The layers list, every section of the properties panel (layout, flex, grid, layout grids, fill, shader, animation, type, image, appearance, border, shadow, effects, other CSS), theme tokens, saved styles, and components.

Canonical page: https://themachine.myapps.ai/docs/desktop/design/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.

![The left panel: Design and Theme tabs, Pages, and the layers of iOS · Today with Hero card selected](/images/docs/desktop/design-left-panel.webp)

- 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).

![Properties of a frame: name, align, layout, component, flex, and fill](/images/docs/desktop/design-panel-frame.webp)

### 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

![Properties of a text layer: layout, typography and appearance](/images/docs/desktop/design-panel-text.webp)

For text: its text style (see [Saved styles](#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](/docs/desktop/design/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](/docs/desktop/design/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`.

![The Theme tab](/images/docs/desktop/design-theme.webp)

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](#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.