Open in vscode.dev Install

Handoff to code

Inspect a design for its measurements and code, generate files into the workspace, map components to your code, lint, comment, compare versions and trace layers to requirements and models.

Inspect#

Inspect mode: a layer’s CSS, then the React snippet, copied.
  • Press ShiftD for Inspect (Dev Mode)
  • Select a layer: its CSS
  • Switch the snippet to React
  • Copy it

Press ShiftD, click Inspect in the editor’s title bar, or run UI Designer: Toggle Inspect Mode. Inspect mode is read-only. The Inspect view shows, for the selected layer: its name, type and, for components and instances, the code component it maps to; the box model with padding and size; layout; the variables and styles it uses; typography; and code in the language you choose (React, React with CSS modules, Tailwind, custom elements, HTML, CSS, SwiftUI, Jetpack Compose), ready to copy. Hovering another layer shows redlines with the distances. With nothing selected, it lists the frames marked Ready for development and flags those changed since.

Mark a section or frame Ready for development (UI Designer: Mark Ready for Development) so developers see what is final. Annotations (UI Designer: Add Annotation) attach notes and measurements to layers.

Generate code into the workspace#

Generate code: HTML and CSS for a frame, previewed, then applied.
  • Select a frame and open Inspect
  • Choose Generate code…
  • Pick HTML + CSS and preview the files
  • Apply: the files are written

UI Designer: Generate Code… writes code for the selection into your workspace (by default src/generated). Preview shows each file with its diff before Apply writes anything. Generated code sits between ud:generated markers: generating again replaces only that part, so your edits outside the markers stay.

Snippets and code generation
bash
ud snippet "Screens/Login" app.design --language react
ud codegen "Screens/Login" app.design --framework react --out src/components --dry-run
ud codegen "Screens/Login" app.design --framework react --out src/components

The code map#

Map a component to the code component that implements it (Map to a code component… in the Inspect view, or ud codemap set). Generated code and snippets then use your component (<Button size="sm">) instead of re-creating it, as Figma’s Code Connect does. ud codemap suggest proposes mappings from the components found in your workspace.

The way back: in a source file (TypeScript, JavaScript, CSS, HTML, Swift, Kotlin), a @design nd-… comment (or @design app.design#nd-…) and the export of a mapped component get a CodeLens and a hover with a thumbnail; clicking it runs Open Node in UI Designer (ud.openNode), which opens the design and selects the layer. Lint findings in the Problems panel open their layer the same way.

Exports#

  • UI Designer: Export Selection… (CtrlShiftE) exports layers as PNG, JPG, WebP, SVG or PDF with their export settings; the Export section of the Design panel sets per-layer formats and scales. CtrlShiftC copies the selection as a PNG.
  • ud export app.design --format pdf writes a vector PDF with embedded fonts, one page per top-level frame.
  • Design tokens: see Layout, components and variables.

Lint#

UI Designer: Lint Design checks the design against its rules (.design-lint.json next to the design): detached instances, raw colours, text without a style, contrast per mode, touch targets, spacing off the scale, unnamed layers, alt text and more. Findings appear in the Problems panel; UI Designer: Fix Lint Findings fixes what can be fixed automatically. ud lint exits with 1 when there are errors, so it fits in CI.

Lint and fix
bash
ud lint app.design
ud lint app.design --fix --dry-run
ud lint app.design --fix

Comments#

A comment pinned with C, a reply, then the thread resolved.
  • Press C and click to pin a comment
  • Write it and press Enter
  • Reply in the thread
  • Resolve the thread

Press C (or UI Designer: Toggle Comment Mode) and click the canvas to start a thread. The Comments view lists the threads of every page, filtered by Open, Resolved or Mine. Threads have replies, @mentions, reactions and resolving. Comments are stored in the design file, so they travel with it through git; ud comments lists them in a terminal.

History, versions and diffs#

UI Designer: Compare with Branch or Revision… shows which frames changed since a branch, a commit or the moment they were marked Ready for development, each before and after. In a terminal, the history and the named versions are one command away, and ud diff compares any two points: a change number, a named version, another .design file or a git revision.

History and versions
bash
ud history app.design --limit 5
ud version save "Before review" app.design
ud versions app.design
What changed since the last commit
bash
ud diff HEAD app.design
ud diff HEAD app.design --image diff.png
ud compare ready app.design --out compare

UI Designer: Compare with Running Page… compares a frame with a page of your running app: changed regions, a difference overlay, and spacing, colour and font mismatches. See Importing.

Traces to requirements and models#

The Traces row of the Inspect view links a layer to what it realises:

  • Project Board: + picks an item of a planning file (.pb) in the workspace, a requirement id such as DEV-4 or an issue #12; the chip shows its title and state.
  • Software Board: Trace to Software Board element… picks a Component, Class, Interface, Use case or Actor of a model (.uml) in the workspace. Clicking the chip opens the model at that element; without the Software Board extension the .uml file opens as text.

From the terminal: ud trace.add --kind uml --file ui-designer.uml --item el-… --node "Screens/Login", ud trace.list, and ud trace.find --kind uml --item el-… for the frames that trace to an element.

The Software Board extension asks UI Designer the same question through two commands: Frames Tracing to a Software Board Element (ud.framesOf {file, item}, the frames of the open and workspace designs that trace to an element) and Open Traced Software Board Element (ud.openTrace {file, item}).

Edit this page