Gbasin Figma To React
gbasin-figma-to-react is a Claude Code plugin for the Build phase that converts linear Figma screen flows into React components with exact assets, iOS-native animations, and automated visual verification.
by gbasin · github.com/gbasin/figma-to-react
Install gbasin-figma-to-react when you have approved Figma screen flows and want Claude Code to generate pixel-accurate React components with assets, motion, and visual checks.
Add it to Claude Code
Install the plugin in Claude Code. One command, paste-ready.
/plugin install gbasin-figma-to-react@gbasin/figma-to-reactBuilt to be called by your agent
Skillselion is itself an MCP server. Your agent can pull this entry and a paste-ready install config straight from the API - no copy-paste.
Retrieve this entry with skillselion.get_details("plugin:gbasin/figma-to-react") and the paste-ready config with skillselion.get_install_config("plugin:gbasin/figma-to-react").
What it does
gbasin-figma-to-react is a design-category Claude Code plugin that turns linear Figma screen flows into React implementations with faithful assets, iOS-style animations, and automated visual verification. Solo builders shipping mobile-leaning or responsive web products often bottleneck at hand-coding screens from Figma; this plugin positions Claude Code as a design-to-code partner that chases pixel-level parity instead of rough wireframes. It suits developers who already finalized flows in Figma and work in React with Tailwind-class styling, especially when motion and screenshot diffs matter for investor demos or App Store polish. The bundle lists one plugin focused on convert, components, and mobile keywords. Register it during active frontend sprints—not during vague ideation—then iterate components screen by screen. Visual verification hooks reduce the usual back-and-forth with designers, though you still own routing, state, and backend integration outside the plugin’s scope.
Highlights
- Converts linear Figma screen flows into React components
- Exports exact assets and design-to-code structure
- iOS-native animation patterns in generated UI
- Automated visual verification against designs
- Tailwind-oriented React mobile workflow (keywords: figma, react, tailwind, pixelperfect)
Why builders use it
Solo builders spend days manually recreating Figma screens in React and still miss assets, motion, and pixel fidelity without a repeatable agent-assisted pipeline.
After you add the plugin, Claude can generate React UI from linear Figma flows and run visual verification so screens match the design before you wire app logic.
At a glance
- Type - Plugin in Frontend & UI.
- Adoption - 0 installs, 2 stars, 0 votes.
FAQ
Who is gbasin-figma-to-react for?
It is for solo builders and small frontend teams using Claude Code who have linear Figma flows and ship React interfaces, especially mobile-leaning products.
When should I use gbasin-figma-to-react?
Use it during the build frontend subphase after designs are approved, when you need components, assets, iOS-style animations, and automated visual comparison to Figma.
How do I add gbasin-figma-to-react to my agent?
Install the gbasin/figma-to-react Claude Code plugin from the marketplace entry plugin:gbasin/figma-to-react, connect Figma access per the repo README, then run conversion on each screen flow.
Comments
Share how you use gbasin-figma-to-react, gotchas, or tips for other indie builders.
No comments yet - be the first to share how you use it.