Creating a more connected design system with Code Connect
summary
Code Connect surfaces real component usage code inside Dev Mode by linking a small code connect doc in your repo to a Figma node so instances show runnable snippets instead of just style CSS. Demo shows CLI steps figma connect create/publish, mapping Figma properties and variants to actual React props, handling many‑to‑one and one‑to‑many component mappings, conditional children/slot injection via children mapping, and publishing live updates. Beta supports React and SwiftUI, repo at github.com/figma/code-connect.
AI-written summary · about
chapters (14)
- 0:00Code Connect introduction
- 1:44Design system adoption struggles
- 6:16Code Connect solution
- 8:26Live demo setup
- 11:56Creating a Code Connect document
- 14:25Figma-to-code property links
- 17:36Publish and test component
- 18:19State variants handling
- 20:26Figma to one code component
- 22:12Figma to many code components
- 23:59Child components and slots
- 27:50Advanced use cases
- 29:37Getting started
- 30:40Q&A
related talks
20mConnecting code with craft
22mCrafting design context for agentic coding workflows
31mDesign to Code in 2026: Context-First Development with Figma MCP
34mFrom Figma to Quality Code: Code Connect + AI
42mCode, Creativity, and Community at Figma
54mFrom prompt to code
36mElevate Your React Workflow with Figma
19mBringing Developers into the Design Process