figma-bridge
CommunityBidirectional Figma design-to-code via MCP.
AuthorTechlemariam
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Streamlines the handoff between Figma designs and production UI code by extracting design data, tokens, and layout cues and translating them into maintainable components that align with MCP workflows.
Core Features & Use Cases
- Design-to-code mapping: convert Figma components into React components styled with Tailwind classes.
- Token extraction: capture colors, typography, spacing, and radii as design tokens for a shared design system.
- Workflow integration: synchronize with MCP for live design data exchange and round-tripping between design and code.
Quick Start
Paste a Figma frame link and the bridge will fetch design data and generate components with Tailwind-based styles.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: figma-bridge Download link: https://github.com/Techlemariam/IronForge/archive/main.zip#figma-bridge Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.