Marquee Studio
v4.0Live components are here

Design with the components your team already ships.

Marquee is a design canvas that runs on your codebase. Every layer is a production component, every color is a token, and handoff is a link.

free for 3 editors · no card
Acme /Checkoutmain
Share
Checkout — Desktop1440 × 900
Team plan5 seats

Upgrade your team

$480/ year

  • Unlimited files and editors
  • GitHub and Linear sync
  • Version history
you@company.comStart trialSecure checkout · cancel anytime
100%

Product teams at 4,800 companies design in Marquee

NorthwindhalcyonPARABOLAlumen/OkapiFieldnote
Canvas

Stop redrawing what already exists.

Your design system is already written in code. Marquee puts that code on the canvas, so the file and the product are the same thing.

Get started
variant
size
icon

Components, not copies

Connect your React library once. Drag in the real Button, with its real props, states and edge cases.

color⌘K

Tokens all the way down

Pick from your color, spacing and type tokens. There is no hex field, so there is nothing to get wrong.

⌥hold to measure

Specs that measure themselves

Hold ⌥ over any layer to see padding and gaps, in the same units your CSS uses.

Button2 × 4 · auto
defaulthoverpresseddisabledSaveSaveSaveSaveSaveSaveSaveSave

Every state, already drawn

Marquee reads your props and lays out each variant and state. You see the edge cases before QA does.

desktop · 992

Breakpoints that reflow

Resize a frame and the layout follows your real CSS. There is no separate mobile file to keep in sync.

pricing-v2mainmerged #482

Branch it like code

Try a direction on a branch, review it, then merge it into main. Every change has a history.

Handoff

Handoff is a link, not a meeting.

Engineers open the same file and copy the component, the props and the tokens. Nothing to translate, nothing to guess.

before
  • Redlines exported to a PDF
  • Screenshots pasted into Slack
  • “Is this 14 or 16px?”
  • A second Button, rebuilt by hand
with marquee
Button / primary· from layer
import { Button } from "@acme/ui";

<Button variant="primary" size="md" fill>
  Pay $48.00
</Button>
Review

Comments that stay on the pixel.

  1. 01Press C, click anywhere, type.
  2. 02Threads stay on the layer, even when it moves.
  3. 03Resolve from GitHub when the PR merges.

Mayaon Heading

Can the title sit on one line at 1280?

Done. Switched to title/sm.

“We deleted our spec docs. Engineers open the file and copy the component. Our last redesign shipped in two sprints.”
Priya RamanDesign lead, Halcyon
1 linkper handoff, not a spec doc
0hex codes typed by hand
4,800teams designing in code
Pricing

Pay per editor. Viewers are always free.

Starter

$0free forever
  • 3 editors, unlimited viewers
  • 1 connected component library
  • Comments and review

Team

$18per editor / month
  • Unlimited editors and files
  • Unlimited libraries and tokens
  • GitHub and Linear sync
  • Branching and version history

Enterprise

Custombilled yearly
  • SSO, SCIM and audit logs
  • Private library hosting
  • A named design engineer
Talk to us

Stop drawing pictures of software.

Connect your component library in five minutes. Your first file is already on brand.

Book a demo