OneClick

About this plugin

What This Plugin Does (Plain English)

You select a Figma frame → click Compile → receive:

a production-ready React component

clean JSX

CSS Modules or Tailwind

props inferred automatically

assets exported and wired

a tiny README so it’s not a mystery

Not a demo. Not a code dump. Something you can paste into a repo and ship.

Core User Flow (Simple, Fast)

Select a Frame

Must be auto-layout aware (warn if not)

Choose Output

React + CSS Modules

React + Tailwind

Click Compile

Plugin analyzes structure

Shows a preview of props + files

One-click export (zip or copy)

That’s it.

What It Compiles (MVP Scope)

1. Layout → JSX

Auto Layout → flex

Direction, gap, alignment mapped cleanly

Nested frames → nested components (optional toggle)

Example output:

integration-error.md: 9 lines selected

2. Text → Props

Text layers become props by default

Option to “lock” text as static

Smart prop naming:

Title / Heading → title

Button Label → ctaText

3. Images & Icons

Exported as optimized PNG/SVG

Wired as imports

Optional inline SVG for icons

4. Styles (Two Modes)

CSS Modules

Clean class names

No inline styles

Shared tokens grouped

Tailwind

Utility classes generated intelligently

No insane class spam

Respects spacing & typography scales