Open in vscode.dev Install

Layout, components and variables

Constraints, auto layout and grid layout; components with variants and properties; styles, variables with modes and expressions, libraries and design tokens.

Auto layout#

Shift+A wraps the items in auto layout; direction, gap and padding; a resized item reflows the frame.
  • Select a frame and press ShiftA
  • Change the direction
  • Set the gap between items
  • Set the padding
  • Resize an item: the frame follows

Select a frame (or several layers) and press ShiftA, or click + in the Auto layout section of the Design panel. The frame now arranges its children:

  • Direction: vertical, horizontal, wrap, or grid with rows and columns.
  • Gap between items (or Auto to space them out) and padding on each side. Hover a field to see the padding and gap as hatched bands on the canvas, and drag the handles in them.
  • Alignment with the 3 × 3 alignment matrix.
  • Sizing of the frame and of each child: Fixed, Hug contents or Fill the container.
  • A child can leave the flow with absolute position.

Drag items inside an auto layout frame to reorder them. UI Designer: Suggest Auto Layout infers direction, gap and padding from loose layers.

Constraints and grids#

Frames without auto layout use constraints (left, right, left and right, centre, scale; the same vertically) to decide how each child responds when the frame is resized. Layout guides (columns, rows, a grid; CtrlShift4 shows them) help you align, and grid layout places children in rows and columns.

Components and instances#

A frame becomes a component; an instance from Assets gets new text, then is swapped.
  • Select a frame and press CtrlAltK
  • Drag the component from Assets: an instance
  • Override the instance’s text
  • Swap the instance for another component
  • CtrlAltK (UI Designer: Create Component) turns the selection into a component. Select several components and Combine as Variants to make a component set.
  • Component properties: variant, boolean, text and instance-swap properties, bound to layers of the component.
  • Instances come from the Assets view or by copying a component. Change their properties and override fills, text and visibility; an orange dot marks an overridden section. Reset Overrides, Swap Instance, Go to Main Component and Push Changes to Main Component are in the layer menu.
  • CtrlAltB detaches an instance into a plain frame.
  • ud components usage lists the instances of each component in this file and across the workspace.

Styles#

Styles (colour, text, effect and grid) are created from the style picker of a property and listed in the Assets view and, with nothing selected, in the Design panel. Changing a style changes every layer that uses it.

Variables and modes#

A colour variable with a Light and a Dark value, bound to a fill, then the card in Dark mode.
  • Open Variables and create a colour variable
  • Give it a Light and a Dark value
  • Bind the card’s fill to the variable
  • Switch the card to the Dark mode

Variables live in collections with modes, such as color with Light and Dark, or spacing with Compact and Comfortable. Open them with UI Designer: Open Variables. Variables hold colours, numbers, strings and booleans, may alias other variables, and can be bound to almost any property: fills, strokes, gap, padding, radius, size, text, visibility. A frame or page chooses which mode its contents use.

Expressions. A number or string variable can compute its value from others: type = in a cell, then the expression, such as = spacing/base * 2; variable names complete as you type. The cell shows the expression with its resolved value, or a red chip when it does not evaluate.

  • Numbers, "strings", + - * / with the usual precedence, parentheses, and the functions min, max, round(x) or round(x, decimals), floor, ceil and abs.
  • Other variables by name (spacing/base) or by collection/name; names with spaces in braces, {Spacing/base size}. A bare name is read as the longest variable name it starts with, so write space/4 / 2 to divide space/4 by 2.
  • + joins text when either side is a string (brand/name + " Pro").
  • References follow the same mode, so spacing/lg = spacing/base * 2 follows Compact and Comfortable.
  • Bad syntax, unknown names, colour or boolean references and cycles are refused when you enter them; an expression that stops evaluating later gives 0 or "" with a warning.

On the command line: ud variable.setValue --variable spacing/lg --mode Compact --expression "spacing/base * 2"; ud variable.resolve prints the value and the expression.

Libraries#

Any .design file in the workspace can be a library. UI Designer: Publish as Library marks a file as one; UI Designer: Open Libraries adds libraries to the current file, and their components, styles and variables appear in Assets. When a library changes, a banner offers Library Updates: review each changed item before and after, and accept all or some of them. The setting ud.libraries offers library files from outside the workspace.

Design tokens#

UI Designer: Export Tokens… writes the variables as design tokens in nine formats: DTCG, CSS, SCSS, Tailwind, Style Dictionary, Tokens Studio, Swift, Kotlin and Flutter. ud.tokens.exportOnSave keeps a tokens file in sync on every save. Expressions are exported as their resolved value, with the expression kept in $extensions["dev.soft-forge.expression"].

Tokens out, tokens in
bash
ud export app.design --format tokens --tokens-format css --out src/styles/tokens.css
ud export app.design --format tokens --tokens-format dtcg --out tokens.json
ud import tokens tokens.json app.design --dry-run

Edit this page