Figma launches Runtime Components 2.0 with bidirectional sync for React, Svelte and Flutter

Tech · 5 min read

Figma's Runtime Components 2.0, announced this week, expands on the company's earlier live/component initiatives by offering a formalized bidirectional sync between Figma components and runtime implementations in React, Svelte and Flutter. Designers can now annotate instances with framework-specific props in Figma, and engineers get an automated mapping that preserves prop names, default values and documentation in generated component wrappers.

The update includes a runtime SDK that standardizes how design tokens, accessibility attributes and interaction hooks are serialized into framework code. Teams can choose to keep Figma as the source of truth or opt for a split workflow; the system records provenance metadata so merge conflicts between design and code are visible and resolvable from the Figma UI. Figma also added a CLI that generates or updates production-ready component wrappers as part of CI pipelines.

Early tests with partner teams showed faster handoffs and fewer iteration cycles, because front-end engineers no longer had to reverse-engineer component states or prop contracts. The feature includes a policy layer for larger orgs to define which aspects of a component are writable from design, and which are guarded by engineering to avoid breaking runtime behavior.