Open in vscode.dev Install

Importing

Bring designs in from Figma, from a running web page, and from Sketch and Penpot files, each with a report of what was approximated.

Figma#

UI Designer: Import from Figma… (or From Figma… when creating a design) asks for the file’s URL and a Figma personal access token, which it keeps in VS Code’s secret storage. It imports through the Figma REST API: pages, components and variants, instances with overrides, styles, variables (with an Enterprise token), auto layout, images and prototype links, one transaction per page. The import report lists every layer that was approximated or skipped, with Show on canvas.

bash
export FIGMA_TOKEN=figd_…
ud import figma "https://www.figma.com/design/<key>/<name>" app.design --dry-run
ud import figma "https://www.figma.com/design/<key>/<name>" app.design --pages Screens --report figma-report.json

ud new app --from-figma <url> creates a new file holding the Figma file.

Web pages#

A running page captured at two widths and rebuilt as editable frames.
  • Start your app’s dev server
  • Run UI Designer: Import Web Page…
  • Enter the URL and the viewport widths
  • Each width becomes a frame with auto layout, text and images

UI Designer: Import Web Page… loads a page in headless Chromium and rebuilds it as frames, one per viewport width (default 1440): flex becomes auto layout, grid becomes grid layout, text keeps its runs, images and SVG come along. With reference, the frame is named “Reference: ” and locked, to rebuild from your components next to it.

A web page into frames
bash
ud import html http://localhost:5173/login app.design --viewport 390,1440
ud import html http://localhost:5173/login app.design --reference
ud capture http://localhost:5173/login --out login.png

Live compare. UI Designer: Compare with Running Page… (ud compare-live <node> <url>) compares a frame with the running page: changed regions, a difference overlay, and spacing, colour and font mismatches of its texts. UI Designer: Capture Web Page… saves a PNG screenshot.

Sketch and Penpot#

A .sketch file imported into the design, with the import report.
  • Run UI Designer: Import Penpot or Sketch file…
  • Pick the .sketch file and the design to import into
  • The file’s pages are added after the design’s
  • The report lists what was approximated, with Show on canvas

UI Designer: Import Penpot or Sketch file… takes a .sketch file, a .penpot file (Penpot 2.x’s Export Penpot file) or a legacy Penpot .zip, adds its pages after the design’s, and opens the report: pages, nodes, components and variables, the share of approximated layers against the 5 % target, and every approximated or skipped layer.

A Sketch file
bash
ud import sketch app.sketch app.design --dry-run
ud import sketch app.sketch app.design --pages Screens --report import-report.json
A Penpot file
bash
ud import penpot shop.penpot shop.design --dry-run
ud import penpot shop.penpot shop.design --no-images

Each page is one transaction (one undo step); a failure part way keeps the pages already imported and names the ones to import again with --pages.

Sketch Penpot UI Designer
Page Page Page
Artboard Board Frame (Penpot flex → auto layout, grid → grid layout; constraints)
Symbol master Main component Component
Symbol instance, override values Copy, changed layers Instance with overrides (text, nested swaps, images, styles)
Group (smart layout → auto layout) Group (masked group → mask) Group, or frame with auto layout
Rectangle, oval, polygon, star, triangle Rect, circle Rectangle (per-corner radii), ellipse, polygon, star
Shape path Path Vector
Shape group Bool Boolean operation
Text Text Text with styled runs
Bitmap Image Rectangle with an image fill
Fills, borders, shadows, blur Fills, strokes, shadows, blur Fills, strokes, effects, opacity, blend mode
Shared layer styles, text styles Typographies Paint, effect and text styles
Colour swatches Library colours Colour variables in a “Colors” collection
Prototype links, flow home Interactions, flows Reactions, flows

Limits#

Every import lists its approximations in the report. For Sketch and Penpot: group tints, noise fills, hotspot layers, motion and zoom blurs (drawn as a uniform blur), text on a path (set on a straight line), mixed boolean operations in one shape group, Sketch smart layout (approximated from the layers’ positions), Penpot svg-raw layers (an empty placeholder frame), flex margins, percentage grid tracks and Penpot design tokens (export them as DTCG and use ud import tokens). Fonts are matched by family and style; a missing face is listed once and drawn with a fallback until it is installed. Symbols from embedded libraries and main components on pages you leave out go to an Imported components page. Web pages are captured as rendered at each width: scripts, hover states and animations are not imported.

Edit this page