SoftForge
Marketplace

Products / Engineering tools for VS Code / UI Designer

UI Designer

A design tool inside VS Code: one design file next to your code, which your assistant edits with you.

1.2.0Free · Pro 4.00 · Team 15.00
View on the MarketplaceRead the guide
The design canvas with a selected card laid out automatically, its spacing shown on the canvas and its layout settings in the side panel.
Lay out screens on a canvas that resizes content for you, right next to your code.
A card whose fill uses a brand colour variable, switched to the Dark mode so it turns orange.
Define a colour once and switch a whole design between light and dark.
A checkout flow of five screens linked by arrows, with an interaction panel set to navigate on click with a smart animation.
Link screens into a clickable prototype with animated transitions.

What it does

Frames, auto layout, components, variables with modes, styles, prototypes, comments, design checks, code and tokens export, in one file that reviews show change by change. This portfolio was designed with it.

Where it fits

Your assistant edits the same file you do, and every change it makes appears live in your editor as one undo step.

Version
1.2.0
Plans
Free; Pro 4.00; Team 15.00 a month

Related

  • Electronics Designer

    Schematic and board design inside VS Code on your KiCad projects as they are, with an assistant that designs alongside you.

  • Project Board

    A project board that lives with your code: backlog, milestones, Kanban, requirements, reports and an assistant.