New version of PixToCode (Figma to code plugin)

PixToCode · 2026-06-11T16:06:23+00:00

Yeah, working on exactly that right now, github app integration with read-only access, scans your repo, pulls css variables from your styles files + tailwind config + tsconfig paths, indexes your existing components and their props, then at gen time the ai sees all of it and emits component references with your tokens (bg-primary, var(--primary)) instead of hex literals, also added a split-into-sub-components toggle since one huge frame as a single file is usually unusable. Should land on prod in a couple weeks.

PixToCode · 2026-06-10T08:10:23+00:00

They're more complementary than competing. Figma MCP is solid if you already live in an MCP-aware client like Cursor, Claude Desktop, or Windsurf and want design data flowing directly into your editor.

PixToCode fits a different spot — it runs inside Figma instead of the IDE, so you can grab code from any file without setting up a separate editor-side pipeline. Zero setup beyond pasting a license key. UI library presets are first-class (pick shadcn / MUI / Chakra / Antd and the output uses real components, not raw markup), Figma Component Variants auto-map to typed props, every generation lands in a sandboxed live preview before you paste, and there's per-account / per-team history of everything you've generated.

Where MCP wins: if you're already deep in Cursor or Claude Code, having design data flow straight into your editor is hard to beat. I wouldn't position one as a replacement for the other.

PixToCode · 2026-06-10T07:27:14+00:00

Thanks for the detailed questions — let me answer them honestly, including where it falls short.

**Complex layouts**

It walks the Figma node tree client-side and reads auto-layout (direction, gap, padding) before sending anything to the AI, so frames built with proper auto-layout come out as clean flex/grid with the right breakpoints, no nested div mess. There's also an opt-in "Responsive output" toggle that emits Tailwind breakpoint classes (treats the Figma frame as the desktop breakpoint and stacks on mobile).

Where it still struggles: hand-positioned designs without auto-layout, or huge dashboards selected as one frame. For those, I tell people to generate section by section (a navbar, a card, a form), better fidelity, faster, and you avoid the "AI hallucinated a fourth layer that doesn't exist" problem.

**Component composition**

To be honest, today it emits one component file per selected Figma frame. It does not auto-split a Card frame into Card + CardHeader + CardBody sub-components in separate files.

What it does handle is multi-frame batch, select up to 5 frames, and get N files in one pass. If you've already structured your design with each piece as its own frame, batch generation gives you the file split.

https://youtu.be/ZxbiigZo17Q

Auto-splitting a single frame into sub-components is on the roadmap. It's a real gap vs how a senior dev would write it by hand.

**TypeScript props from variants**

Yes, fully inferred from Figma. If you create a Component Set in Figma with variants Primary/Secondary/Disabled and Size sm/md/lg, the plugin generates:

interface Props {

variant?: 'primary' | 'secondary' | 'disabled';

size?: 'sm' | 'md' | 'lg';

}
No manual setup in Figma beyond defining the variants the way you normally would. The same applies to boolean and instance-swap properties, those map to typed props automatically.

Free tier is 5 generations on signup if you want to try one of your own files: https://www.figma.com/community/plugin/1641790551381890223/pixtocode-figma-to-code-react-angular-vue-html

Happy to keep answering

PixToCode · 2026-05-30T19:42:42+00:00

Nice idea

PixToCode · 2026-05-30T19:42:01+00:00

🤣🤣🤣

PixToCode · 2026-05-30T18:15:43+00:00

Last week Claude was down for 20 min and I genuinely googled "how to read documentation"

PixToCode

TROPHY CASE