figma/code-connect

Health v2 · maintenance only

Adoption not part of the score

1563 stars · 121 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-30, confidence not recorded

Code Connect is a Figma tool that links design system components in code with their counterparts in Figma, so Dev Mode shows true-to-production code snippets. It supports framework-agnostic template files plus integrations for React, HTML, SwiftUI, and Jetpack Compose.

Use cases

• show real design system code snippets in Figma Dev Mode
• map component props from code to Figma layers
• keep design and engineering on a shared source of truth
• drive consistent adoption of a design system across teams
• document React, SwiftUI, or Compose components for designers
• generate dynamic code examples from Figma component variants

When to choose

• your team uses Figma Dev Mode with an existing design system
• you want autogenerated Dev Mode snippets replaced with true-to-production code
• you need type-safe, maintainable component-to-Figma mappings
• you're on a Figma Organization or Enterprise plan with Dev Mode seats

When to avoid

• you're on a free or Professional Figma plan (Code Connect requires Organization/Enterprise)
• you rely on framework-specific parsers, which are no longer maintained
• your team doesn't use Figma or Dev Mode
• you need a general-purpose design token or style sync tool rather than component code snippets

Facets

cli-tool · maturity active

developer-tools documentation cli parser sdk developer-tools web-development frontend documentation cli cross-platform figma design-systems dev-mode code-snippets react swiftui jetpack-compose storybook design-to-code nodejs

Member repositories

For agents

markdown · JSON · MCP: product_card(name="figma/code-connect")