Design

Early access

Design with an agent on the canvas.

A full design tool: frames, auto layout, components and variables, live with your team. And a Designer agent in the same file, which draws the first draft, looks at what it made, fixes it and hands it to the agents who build.

Get started free Ask for early access

Design is switched on one organization at a time while we roll it out. Builder is open to everyone today.

The agent fixes the draft

The canvas

A real design tool, shared live.

Layers on the left, properties on the right, the canvas in between, and everyone on your team in the file at once. Nothing to install: it opens in the browser, next to the project it belongs to.

Everyone in the file

See each other's cursors and selections as they move, and follow someone to look at what they're looking at.

Comments where the problem is

Pin a comment to the layer it's about. The thread stays with the layer, and you resolve it when it's fixed.

Versions you can go back to

Versions are saved as you work, and you can name the ones that matter. Restoring one makes a new version, so nothing is lost.

The Designer

An agent that works in the file, not beside it.

The Designer edits the same layers you do. Its changes appear live for everyone in the file, each request is one step you can undo, and it leaves a comment saying what it did.

A screen from a sentence

Ask for a screen and the Designer draws it with your file's variables. Then it looks at a render of what it made and fixes what's off.

Start from what's built

Import from preview turns a route of your running app into a design page, so a redesign starts from what's there.

Hand a frame to the builders

Select a frame and press Build this. The Lead gets an issue with the frame, its code export and the tokens, and the frame shows how the build is going.

Libraries and code

One set of tokens, in the design and in the code.

A design that drifts from the code is a second job. Here the variables in the file and the tokens in the project are compared line by line, and either side can catch up with the other.

Libraries

Publish a file as a library and its components, styles and variables are there in your other files. Updates arrive as a notice, and what you overrode stays.

Sync with code

See the file's variables next to the project's tokens. Pull the code's values into the design, or send the design's to the Lead as an issue.

Dev Mode

Inspect any layer as CSS, JSX or Tailwind. Mark a frame Ready for dev and the note lands on its issue.

Also

Bring your files. Show how it flows.

You don't start from a blank canvas, and a static frame isn't the end of it.

Opens .fig files

Import a .fig file and carry on from where it was: its pages and layers come with it.

Prototypes you can present

Connect frames with clicks, hovers and delays, choose how each one moves, and press Present to walk someone through it.

With the others

A frame is the start of something, not the end.

A design file sits next to the project's code and its issues, so handing a frame over is one click and not a meeting.

BuilderFrames become codeBuild this hands a frame to the Lead, and Sync with code keeps the project's tokens and the file's variables matched.

TrackEarly accessEvery hand-off is an issueBuild this and Ready for dev both land on a Track issue, so design work shows up in the plan like everything else.

OfficeEarly accessThe Designer has a deskIt's one of the agents in your Office, next to the ones who plan the work and the ones who build it.

FAQ

Questions, answered.

Anything else? Ask us on X, where we build in public.

Can I use Design today?

Design is in early access: we switch it on one organization at a time while we roll it out. Builder is open to everyone now, and you can ask us to switch Design on for your organization.

Can I open my existing files?

Yes. Import a .fig file and carry on working on it here.

What can the Designer agent do?

Draw a screen from a description using your file's variables, check a render of its own work and fix it, edit the layers of an existing file, and turn a route of your running app into a design page. Its edits are live for everyone in the file, and each request is a single step you can undo.

How does a design become code?

Two ways. Build this creates an issue for the Lead with the frame, its code export and the tokens, and the build runs from there. Sync with code compares the file's variables with the project's tokens and lets either side catch up.

Who can see a file?

Files live in a project, or in your drafts, and you choose who can edit each one and who can only view it.

Which plan includes Design?

That isn't decided yet. While Design is in early access it isn't tied to a plan.

Every frame here can become working code. That part is Builder.

NextExplore Builder

So, what do you want to build?

Design is in early access; Builder is open now. Type what you want to build, sign up free, and it’s waiting for the agents when you land.