Your first design
Create a .design file next to your code, draw frames, shapes and text, find your way around the editor, and save.
Esta página está em inglês; a tradução está a caminho.
- Run UI Designer: New Design
- Choose a name and a template
- Draw with R, O and the shapes flyout
- Save with CtrlS
Create a design#
- Open the Command Palette (CtrlShiftP) and run UI Designer: New Design
- Choose a folder and a name
- Pick where to start from, such as Web
- The new
.designfile opens in the design editor
| Start from | You get |
|---|---|
| Blank | One empty page |
| Mobile app | A 390 × 844 frame |
| Web | A 1440 × 1024 frame |
| Desktop app | A 1280 × 800 frame |
| From Figma… | A blank design with Import from Figma open (see Importing) |
The file <name>.design is created where you chose, typically next to the code it designs. Any existing *.design file opens in the design editor when you click it in the Explorer; an empty file opens as a blank design and is written with your first change. From a terminal, ud new app --template mobile does the same.
The editor at a glance#
- Canvas in the centre, with the floating tool bar at the bottom and a slim bar on top: the main menu (☰), the page name, the avatars of working agents and the zoom menu.
- Pages, Layers, Assets, History, Comments: VS Code views in the UI Designer container of the activity bar.
- Design, Prototype, Inspect, Claude: views in the secondary side bar. See Panels.
- Status strip at the bottom of the editor: the selection and its size, the page, save state, lint warnings and your plan.
- Preview, Export, Ask Claude, Inspect and the subscription key are buttons in the editor’s title bar.
Everything follows your VS Code colour theme: light, dark and high contrast.
Shapes#
- Press R and drag to draw a rectangle
- Press O and drag for an ellipse
- Pick Star from the shapes flyout and drag
- Set the fill colour in the Design panel
Hold Shift for squares and circles, Alt to draw from the centre. A click without a drag makes a 100 × 100 layer. Right after drawing, the focus is in the layer’s X field in the Design panel, so you can type its position and size; Esc returns to the canvas.
Frames and layers#
- Press F and drag to draw a frame
- Draw two rectangles inside it
- The Layers view shows the tree
- Double-click a layer to rename it
A frame is a screen or a container: what you draw inside it becomes its child, it clips its content and it can carry auto layout. With the Frame tool selected, the Design panel offers presets for phones, tablets and desktops. In Layers, drag rows to rearrange them (see Panels).
Text#
- Press T and click to place a text
- Type, then Esc to finish
- Set the font size
- Pick a heavier weight
Text is shaped with HarfBuzz, so ligatures, right-to-left scripts and line breaking work as in a browser. The Typography section sets the font, size, weight, line height, letter spacing, alignment and decoration; ranges of a text can have their own style. Fonts come from your system and the workspace’s fonts and assets/fonts folders.
Saving, undo and the file#
A design behaves like any document in VS Code: CtrlS saves, CtrlZ and CtrlShiftZ undo and redo, the tab shows the dirty marker, and hot exit and Revert File work. A compound change, such as a paste, an auto layout or an accepted AI proposal, is one undo step.
The file is plain JSON. UI Designer: Open as Text shows it in the text editor; UI Designer: Open as Design (also in the Explorer context menu) goes back. Each change is appended as one line signed with its author, so git diff shows exactly what changed and who changed it. Images live next to it in <name>.design.assets/. See the file format.