ComponentBridge

Convert a React .tsx file into an editable Figma design with real component instances.

Build the UI in code, push it to Figma, and let designers refine it without starting over.

For Designers

What is this?

ComponentBridge takes a developer's React code and turns it into a Figma file you can actually edit. The output uses real component instances from the Figma community library — not screenshots, not flattened images.

What you get

• Real component instances — Buttons, Tags, Badges, Inputs, Tables, Tabs, etc. from the Ant Design or Obra shadcn/ui Figma library
• Cross-file resolution — components imported from other files are followed and inlined automatically (up to 5 levels deep)
• Editable text — every label, heading, and data cell is a real text layer
• Variant properties — button types (primary, default), tag colors (green, gold, red), input sizes are already set
• Proper layer hierarchy — scannable Type / Content naming convention (e.g. Card / Revenue, Button / Submit)
• Layout fidelity — justify/align props, gutter arrays, inline style padding, and auto-sizing all map to Figma auto-layout
• Placeholder mode — data-driven text (table cells, stat values) can be replaced with descriptive labels like [Customer Name]
• Correct fonts — actual font families and weights from the code, not hardcoded defaults

How to use it

1. Ask a developer to run ComponentBridge on their page — they'll send you a link or the preview will open automatically
2. Open the HTML preview in your browser
3. Click "Copy to Figma" in the bottom toolbar
4. In Figma, open the ComponentBridge plugin (Plugins > ComponentBridge)
5. Paste the script and click "Run Pasted Script"
6. The design appears on your canvas — ready to edit

What to expect

The output is a starting point, not a final design. You'll likely want to:

• Adjust spacing and alignment
• Swap out placeholder content
• Apply your project's color overrides
• Reorganize layers into auto-layout where needed

The goal is to save you from rebuilding a full dashboard from scratch — start from what the developer already built and refine from there.

For Developers

How it works

TSX Source --> TypeScript AST --> Cross-file Resolution --> UINode Tree --> Figma Plugin Script
                                                      └--> HTML Preview (CDN render)

1. Parse — The CLI reads your .tsx file using the TypeScript compiler. It auto-detects the UI library from imports, extracts component imports, static data, useState calls, and JSX.

2. Resolve — Follows relative imports (import Button from "./components/Button") recursively, parsing each file and inlining component JSX. This means pages using custom wrapper components work out of the box.

3. Extract — Maps JSX elements to a UINode tree using the component map. Extracts props (justify, align, gutter, style padding), layout direction, gap, and alignment. Produces a structured representation of the page.

4. Preview — Generates a standalone HTML page using React 18 + the detected UI library from CDN. Hook-derived variables are stubbed so the page renders without crashing.

5. Generate — Produces a Figma plugin script that imports real component instances from the community library, sets variant properties, overrides text content, and creates frames with proper auto-layout.

Prerequisites

• Node.js v22+ (uses --experimental-strip-types for native TypeScript)
• Claude Code
• Figma desktop app with the Component Bridge plugin installed

Installation

npm install -g component-bridge

This installs the /component-bridge skill for Claude Code automatically.

Usage

Open Claude Code in any project and run the skill:

claude
# then type: /component-bridge src/app/dashboard/page.tsx

The skill handles everything — parsing your TSX, generating the preview, and giving you instructions for the Figma side.

After every run, a summary of what was extracted is shown:

Extraction: 24 nodes: 13 text, 4 card, 3 stack, 2 button, 1 table | 3 component instances (Table, Button)

Figma plugin setup

The Figma plugin executes generated scripts and manages library component caching.

Install the plugin

Search for Component Bridge in the Figma community plugins, or install it from the plugin page.

Enable the Ant Design library

1. Open the Ant Design 5.0 for Figma community file
2. Click "Open in Figma" to duplicate it to your drafts
3. In the duplicated file, open the Assets panel and click the book icon (Team library)
4. Click "Publish" to make it available as a team library
5. In your target design file, open the Assets panel > Team library icon and toggle on the Ant Design library

Scan your library (one-time setup)

Figma component keys are unique to each published file — the keys bundled with ComponentBridge only work for the original publisher's team. To make the plugin work with your team's copy of the library:

1. Open your published Ant Design library file in Figma
2. Run Plugins > Development > ComponentBridge
3. Click "Scan Library" in the plugin panel
4. The plugin discovers all component names and keys, and caches them locally

This only needs to be done once per machine. The cache persists across sessions and files. After scanning, any generated script will automatically use your team's component keys.

The status bar in the plugin shows whether a library has been scanned:

• Grey dot — no library scanned, will use fallback keys
• Green dot — library cached with component count and scan date

Using the plugin

1. Run /component-bridge in Claude Code — it generates a preview and copies a script
2. Open a Figma file that has the Ant Design library enabled
3. Run Plugins > Component Bridge
4. Paste the plugin script into the text area and click "Run Pasted Script"
5. The design appears on your canvas with real component instances

How library portability works

The generated scripts reference components by name and fallback key:

_import("Button", "130370...fallbackKey...")

When the plugin runs a script, it injects your cached library registry (from the "Scan Library" step). The script checks the cache first — if your team's key is found, it uses that. Otherwise, it falls back to the bundled key.

This means:

• Scripts generated by anyone work on any team's library
• No API tokens or config files needed
• Each team scans once, then everything just works
• If a component can't be found, it gracefully falls back to a raw frame

Supported components

42 Ant Design components are registered with Figma component keys. Components with prop-to-variant mappings have their React props translated to Figma variant properties automatically.

Full prop mapping

| Component | Mapped Props | |-----------|-------------| | Button | type, size, shape, disabled, danger, ghost | | Input | size, disabled, variant | | Card | size, bordered, title (head), cover, actions | | Table | expandable | | Tabs | centered, tabBarExtraContent | | Checkbox | checked, indeterminate, disabled | | Switch | size, checked, disabled, loading | | Tag | color, icon | | Badge | size, color | | Avatar | shape, size, src (type), icon (type) | | Alert | type, showIcon, closable, description | | Result | status, subTitle, extra | | Divider | type, dashed, children (title), orientation | | Steps | direction, size, description | | Pagination | size, disabled, showTotal | | Drawer | placement | | Message | type | | Menu | mode, inlineCollapsed | | DatePicker | size, variant | | TimePicker | size, variant, disabled | | Upload | listType | | Form | layout, size | | Rate | count, value, defaultValue (rating) | | Slider | range, marks | | Radio | direction | | Select | open | | Tooltip | placement | | Popover | placement | | Popconfirm | placement | | Notification | icon |

Registry-only (instance created with default variant)

Breadcrumb, Calendar, Collapse, Dropdown, Image, List, Modal, Skeleton, Statistic, Timeline, Transfer, Tree

Project structure

component_bridge/
  antd-registry.json          Ant Design component keys + variant definitions
  figma-plugin/               Figma plugin (manifest + UI + script runner + library scanner)
    manifest.json
    code.js                   Plugin backend — script executor + library scan + cache
    ui.html                   Plugin UI — paste script, scan library, registry status
  packages/
    ast-extractor/            TSX parser — extracts components and props from source
    cli/                      CLI entry point, HTML preview generator, bookmarklet
    extractor/                DOM walker — extracts from rendered HTML
    figma-writer/             Converts schema nodes to Figma plugin script
    mapper/                   Normalizes extracted nodes into clean schema
    registry/                 Component registry lookup + prop-to-variant mappings
    schema/                   Shared UINode type definitions
  docs/
    ARCHITECTURE.md           Design principles and pipeline overview
    MVP.md                    Product scope and acceptance criteria

Running tests

npm test                      # Run all tests
npm run test:extractor        # Extractor tests only
npm run test:mapper           # Mapper tests only
npm run test:figma-writer     # Figma writer tests only
npm run test:e2e              # End-to-end tests

v0.2.1 — What's new

shadcn/ui table, alert, and tabs quality

• Compositional table extraction — shadcn Table with TableHeader/TableBody/TableRow now extracts real column headers and cell data instead of fallback placeholders
• Table cell Figma instances — each header and data cell uses Table Header / Table Cell from the Obra registry with correct Content variants (Badge, Checkbox, Avatar+Name, Buttons, Text)
• Alert text extraction — AlertTitle and AlertDescription children are extracted (previously showed default "Line 1" from the Figma component)
• Tab labels — TabsTrigger text extracted and applied as Tab component instances with correct labels
• Variable references — property access expressions like {m.name}, {item.title} now extracted as text placeholders

HTML preview improvements

• Local function components — non-exported components defined in the same file (e.g. ProductTable) are now included in the preview
• render prop support — DialogTrigger and DropdownMenuTrigger with render prop work correctly
• ml-auto layout — children with margin-left: auto get layoutGrow=1 for right-aligned flex positioning
• inline-flex sizing — inline-flex elements no longer stretch to fill parent width

v0.1.1

Cross-file import resolution

Pages that use custom wrapper components (e.g. import ProductTable from "./components/ProductTable") now work automatically. The extractor follows relative imports up to 5 levels deep, inlining component JSX from other files.

Container/layout improvements

• Justify/align mapping — justify="space-between" and align="center" on Row, Flex, Space now map to Figma auto-layout alignment
• Gutter arrays — gutter={[16, 24]} correctly parses both horizontal and vertical values
• Divider rendering — Divider components render as visible lines instead of invisible empty groups
• Inline style parsing — style={{ padding: '24px 16px', gap: 16 }} extracted and applied to Figma frames
• Form layout — Form layout="horizontal" renders label and input side by side; layout="inline" renders items in a row
• Auto-sizing — Vertical containers use AUTO height (grow with content), buttons use HUG width in horizontal layouts

Multi-library architecture

The extractor is now library-agnostic with auto-detection from imports. Currently supports Ant Design, extensible to other libraries.

Limitations

• One-way — code to Figma only, no sync back
• Static render — hooks run with initial values, no API data, no router
• Ant Design, shadcn/ui, Flowbite — three supported libraries (architecture supports adding others)
• Desktop layouts — optimized for dashboard/admin screens
• Container components (Card, Table, Menu) are raw frames with content inside, not component instances with overrides
• Cross-file resolution supports @/ path aliases (via tsconfig) and relative imports