Case Study · 2025

← Back to Work

AI Figma Plugin

A prompt-driven Figma plugin that generates production-ready UI components from natural language. Synced 1:1 with the coded design system so anyone on the team can design on-brand without being a designer.

Prompt → Component Design system synced Designed + Developed
Plugin interface in Figma
Plugin prompt and generation
Generated component on canvas
The Idea

As the sole designer, I'm a bottleneck. PMs need mockups for stakeholder alignment. Engineers need component specs for edge cases. Marketing needs landing page layouts. Every request flows through me.

The question: what if anyone could generate an on-brand Figma component by describing what they need in plain English? Not a generic AI design tool — one that knows our exact design system, our tokens, our component library, our visual language.

So I built it.

How It Works
1

Describe

User types a natural language prompt: "Create a booking confirmation card with check-in date, guest name, and a cancel button"

2

Generate

Claude processes the prompt against the component registry — matching to existing patterns, applying correct tokens, and generating Figma-native output

3

Render

The component appears directly on the Figma canvas — correct colors, typography, spacing, auto-layout. Editable like any native Figma element.

Plugin UI with prompt input
Component generation workflow
Design system registry in action
Under the Hood

Component registry

The plugin's intelligence comes from a comprehensive registry of 90+ components, each documented with properties, variants, color mappings, spacing rules, and usage context. When Claude receives a prompt, it matches against this registry to determine which components to compose and how to configure them.

Claude API integration

Prompts are sent to Claude's API with the full component registry as context. The response is structured JSON that maps directly to Figma's plugin API — createFrame, createText, setFills. This isn't screenshot-to-code; it's semantic generation of native Figma objects.

Multiple interaction modes

The plugin supports different workflows: quick generation from a prompt, iteration on an existing selection ("make this button larger and add an icon"), and a chat mode for collaborative exploration of design options.

1:1 code sync

Because the registry is derived from the same Tailwind config that powers production, generated components use the exact same tokens. What you see in Figma is what gets built. No translation layer, no drift.

Impact

Scaling design beyond the designer.

This plugin doesn't replace the designer — it scales design thinking to the whole team. PMs can mock up ideas before requesting design time. Engineers can generate specs for edge cases. The design system stops being a reference doc and becomes a generative tool.

90+

Components in the registry with full metadata

3

Interaction modes: generate, iterate, explore