Gbasin Figma To React
- 7 repo stars
- Updated December 25, 2025
- gbasin/figma-to-react
gbasin-figma-to-react is a Claude Code plugin that converts linear Figma screen flows into React components with exact assets, iOS-native animations, and automated visual verification.
About
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. developers 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.
- 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)
Gbasin Figma To React by the numbers
- Data as of Jul 23, 2026 (Skillselion catalog sync)
/plugin install gbasin-figma-to-react@gbasin/figma-to-reactAdd your badge
Show developers this plugin is listed on Skillselion. Paste this into your README.
| repo stars | ★ 7 |
|---|---|
| Last updated | December 25, 2025 |
| Repository | gbasin/figma-to-react ↗ |
What it does
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.
Who is it for?
Best when you have finished Figma flows and build React (often Tailwind) mobile or responsive apps and want design-to-code speed with QA-style visual checks.
Skip if: Backend-only APIs, non-React stacks, or teams still iterating unstructured explorations in Figma without linear screen flows.
What you get
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.
- React components mapped from Figma screen flows
- Bundled or referenced visual assets from designs
- Visual verification feedback against Figma references
By the numbers
- Repository: gbasin/figma-to-react
- Plugin count: 1
- Catalog categories: design
Recommended Plugins
0xdesign Design PluginDesign exploration plugins for Claude Code743
Adlsdztony Claude Marketplace1 plugin2
Alexanderop Claude Skill Vue DevelopmentA Claude Code Agent Skill for Vue.js development with TypeScript, emphasizing testing-first development, functional patterns, and maintainable architecture.27
Alonw0 Web Asset GeneratorClaude skill to generate favicons, app icons, and social media images from logos, text, or emojis.469
Ankish8 Storybook NpmLocal plugins for myOperator UI2
Antvis Chart Visualization Skills⛏️ Turning data into a visual language for better thinking with Skills.446How it compares
Design-to-code Claude Code plugin, not a Figma MCP replacement or generic UI component library.
FAQ
Who is Gbasin Figma To React for?
It is for developers 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.