Quickstart

Your first fig in five minutes.

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.

01Web Studio 02CLI 03MCP 04The fig skill

Before you start

Create your team and pick a plan — every paid tier includes unlimited fig generations from Claude, the CLI and MCP.

Set your brand under Settings → Brand — palette, type, components, device frame. Skip it and figs render with the built-in default while you decide.

For the CLI and MCP paths, mint an API token under Settings → Tokens. Tokens are scoped to your team and look like fig_…

Web Studio

No install. Describe a screen, watch it stream in.

Open figura.so/app → Studio.

Describe the screen — “the capture screen mid-recording”, “pricing page, annual toggle on”. The Studio generates against your brand profile and streams the fig live.

It lands in your team feed: versioned, commentable, and publishable with a share link. Studio generations draw from your plan's monthly credit pool — the agent paths below are unlimited.

CLI

Any terminal, any agent. HTML in, hosted fig out.

Install and authenticate once:

npm i -g figura-cli     # or: bun add -g figura-cli
figura login            # paste your fig_ token

Create a fig from a file or stdin:

figura fig create --file mock.html --title "Feed redesign" --area feed
cat mock.html | figura fig create --orientation landscape

List, open, comment — the whole library is scriptable:

figura fig list --area feed --limit 20
figura fig open <id>
figura comment <id> --body "ship it"

MCP server

Claude Code, Claude Desktop, or any MCP client.

Add the server (one line; reuses figura login if you've run it):

claude mcp add figura --env FIGURA_TOKEN=fig_xxxxxxxx -- npx -y figura-mcp

Claude gains 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.

Generation runs in your Claude session, so it's unlimited on every paid tier — Figura just hosts, versions and serves the result.

The fig skill

One phrase in Claude Code: “mock up the settings screen as a fig.”

The skill is a thin recipe over the CLI: Claude generates one self-contained HTML screen grounded in your brand tokens, then pipes it through figura fig create.

With 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"

See it in practice in the gallery — every fig there was made this way.

Five minutes. One fig. Your brand, by construction.

Start your team