Quickstart
A fig is a self-contained, device-framed HTML mockup generated against your team's real design system. Four ways to make one — pick the surface you already live in.
Settings → Brand — palette, type, components, device frame. Skip it and figs render with the built-in default while you decide.Settings → Tokens. Tokens are scoped to your team and look like fig_…No install. Describe a screen, watch it stream in.
figura.so/app → Studio.Any terminal, any agent. HTML in, hosted fig out.
npm i -g figura-cli # or: bun add -g figura-cli figura login # paste your fig_ token
figura fig create --file mock.html --title "Feed redesign" --area feed cat mock.html | figura fig create --orientation landscape
figura fig list --area feed --limit 20 figura fig open <id> figura comment <id> --body "ship it"
Claude Code, Claude Desktop, or any MCP client.
figura login if you've run it):claude mcp add figura --env FIGURA_TOKEN=fig_xxxxxxxx -- npx -y figura-mcp
figura_create_fig, figura_list_figs, figura_get_fig and figura_comment — ask it to mock something up and the result is persisted to your team as it's made.One phrase in Claude Code: “mock up the settings screen as a fig.”
figura fig create.figura-cli installed and logged in, any agent that can run shell commands already has the full loop — generate, persist, get back a share-ready link:# the whole contract, agent-agnostic: <generate on-brand HTML> | figura fig create --title "Settings — screen"