# figma/code-connect

A tool for connecting your design system components in code with your design system in Figma

Repository: https://github.com/figma/code-connect
Canonical: https://ross.abutalabs.com/products/code-connect
Language: TypeScript
License: MIT
License Family: permissive
Last push: 2026-08-20T17:11:18+00:00

## Health v2 (maintenance only)
Score: 91/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 98, release rhythm 98, longevity 62
- inputs: {"age_days": 873, "days_push": 13, "days_rel": 15, "gap_med": 15, "n_releases_24m": 36}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1563, forks 121 (observed 2026-08-28T04:05:03.992287+00:00)

## What it is
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
- artifact type: cli-tool
- maturity: active
- function: developer-tools, documentation, cli, parser, sdk
- domain: developer-tools, web-development, frontend, documentation
- platform: cli, cross-platform
- tags: figma, design-systems, dev-mode, code-snippets, react, swiftui, jetpack-compose, storybook, design-to-code, nodejs

## Member repositories
- figma/code-connect (main) score 91

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:05:03.992287+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T04:00:15.872902+00:00, confidence not recorded.
  - readme: https://github.com/figma/code-connect (fetched 2026-08-28T04:05:03.992287+00:00, sha 8bd47c37ea57)
- Data as of 2026-08-30T08:39:29.467469+00:00.