Bootstrap a component from a Figma frame

When to use this

When a designer just shipped a Figma frame for a component that doesn’t exist in code yet, or when you’re building a new marketing section ahead of having a code artifact.

Do not use this flow when the component already exists in code (use the plugin’s token round-trip, or the Pro research track for structural edits) or when the change is token-only — the Free plugin’s Push to Code already handles that.

What you need

An AI coding agent with the Figma MCP server configured. MCP (Model Context Protocol) is the open standard most modern coding agents support today — Claude Code, Cursor, Windsurf, Cline, Continue, the Codex CLI, Gemini-based agents, and others. Whichever agent you use, the Figma MCP setup is a one-time addition to your client’s MCP config. See the Figma MCP server guide for install steps.

No MCP support in your agent? Skip to the fallback path — you can still drive the same workflow by pasting Figma Dev Mode output or a screenshot into the chat.

The workflow, end to end

Paste the Figma URL into a chat with your AI agent, along with a short prompt that points at this page. The agent calls the Figma MCP’s get_design_context tool and returns React + Tailwind. You then refine it against the adaptation checklist below before committing.

Bootstrap a new story from this Figma frame:
<paste-url-here>

Use the Figma MCP server's get_design_context tool to pull the
React + Tailwind reference, then adapt it per the checklist at
/docs/methodology/figma-bootstrap. Put the component under
<target-path> with a "<title-prefix>/<name>" story title.

The MCP output is a draft, not final code. Every output needs the adaptations below to become project-fit.

Adaptation checklist

Story conventions

• Pick the right title prefix: Components/UI/ for shadcn-style primitives, Feature/Marketing/ for marketing molecules, Components/ for shared components.
• Wrap stories in a fixed-width container (e.g. max-w-7xl w-full) so the Figma plugin generates the correct desktop frame width.
• Add one story per visual state (Default, Open, Loading) instead of one mega-story with toggles. The plugin renders each story as its own frame.

Component conventions

• No className prop on marketing or static feature components. The scanner treats classless components as fixed-size frames; a forwarded className breaks layout extraction.
• No inline styles for theme values — style={{ color: '#0a0' }} is invisible to the scanner. Use Tailwind classes (text-primary, text-[#0a0] for arbitraries).
• Use clsx for conditional classes everywhere except inside src/components/ui/ wrappers, which use cn() from ~/lib/utils.
• Server Component by default — only add "use client" when you actually need state, effects, or browser APIs.

Map values to tokens

The MCP often returns raw hex and px when the design isn’t bound to Figma Variables. Translate during adaptation:

• Colours → bg-primary instead of bg-[#3b82f6].
• Spacing → gap-4 instead of gap-[16px].
• Radius → rounded-xl instead of rounded-[12px].

Before reaching for raw <button> / <input> / <dialog>, check your ui/ folder for an existing shadcn primitive. The MCP doesn’t know about your component library; reach for ~/components/ui/button instead of bare HTML.

File layout

src/components/<name>/
├── <name>.tsx
├── <name>.stories.tsx
└── index.ts

For new marketing molecules, swap src/components for src/feature/marketing/components. index.ts is a one-line barrel:

export { ComponentName } from "./component-name";

Validate

1. pnpm storybook — open the new story and check every state renders correctly.
2. pnpm check-types && pnpm lint — fix anything the MCP output introduced (unused props, any types, raw inline styles).
3. Import the plugin in a fresh Figma file, run Generate Design System Page, and confirm the new component renders as expected. Rendering bugs are scanner bugs — file them under the plugin’s rendering-gaps backlog, not the story.

Fallback: AI agents without MCP

If your AI agent doesn’t support MCP, the workflow still works — you just feed it the design context manually instead of via the MCP tool call. Two reasonable paths:

• Figma Dev Mode → paste. Open the frame in Figma Desktop, switch to Dev Mode, copy the generated Tailwind CSS / HTML, paste it into the chat with the same prompt. Less faithful than the MCP path (Dev Mode output is generic, not framework-aware) but a workable starting point.
• Screenshot + paste. Screenshot the Figma frame and drop it into a multimodal AI chat. Ask for React + Tailwind. Lowest fidelity — the AI infers everything from pixels — but useful when neither MCP nor Dev Mode access is available.

Whichever path you use, the adaptation checklist is the load-bearing piece — that’s what turns generic AI output into project-fit code. The input source matters less than the conventions you apply on the output.

Why we don’t ship a pnpm new-story scaffolder

Inkbridge does ship a CLI — inkbridge setup, inkbridge path, inkbridge skill install. What we deliberately don’t ship is a pnpm new-story <url> scaffolder for this Figma-bootstrap workflow specifically. The Figma MCP server runs inside an AI session — it’s not callable from a pnpm script. A scaffolder could either re-implement the Figma REST API call (duplicating the MCP, needing separate auth) or just scaffold empty template files (marginal value over cp -r). The leverage is in the checklist above, not in a thin wrapper.

Related

• Storybook Story Parsing
• Component Scanner
• Design System Page