Figma Code Connect UI Now Supports Multiple Code Files Per Component.

Figma rolled out an update to its Code Connect UI that allows teams to map multiple code files to a single Figma component. The change addresses a common friction point in design systems where components span multiple files in production codebases.

Code Connect, Figma's tool for linking design system components to their code implementations, previously required a one-to-one relationship between Figma components and code files. The new multi-file mapping capability reflects how modern front-end architectures actually work, where a single component might include separate files for logic, styles, tests, and documentation.

The updated UI lets developers associate multiple code files with a single Figma component directly within the Code Connect interface. This means a button component in Figma can now point to Button.tsx, Button.styles.ts, Button.test.tsx, and Button.stories.tsx simultaneously, rather than forcing teams to choose one canonical file or maintain multiple separate mappings.

For teams using component-driven development, this eliminates manual coordination work. Developers no longer need to document file relationships in external wikis or rely on tribal knowledge to understand which code files correspond to which design components.

The change builds on Figma's broader design system infrastructure, which has increasingly focused on reducing friction between design intent and production code. Code Connect itself launched to solve the gap between static design specs and live codebases, a problem that grows as design systems scale across larger engineering teams.

Multi-file support particularly benefits organizations with mature design systems. In practice, enterprise component libraries often split functionality across dozens of related files: core implementation, platform-specific variants, accessibility utilities, and integration tests. Being able to surface all relevant files from a single Figma component makes onboarding faster and reduces the chance developers implement components incorrectly.

The update also improves audit trails. When design system leads need to track which code files are affected by a design change, they can now see the complete picture without cross-referencing multiple tools or repositories.

Figma announced the feature via LinkedIn, noting the update is live in the Code Connect UI for all users. No additional configuration or migration is required for existing Code Connect setups.

The timing aligns with Figma's recent push into developer tooling, including MCP server integrations with AI code editors. As AI-assisted coding becomes more common, maintaining accurate mappings between design components and code becomes even more critical to ensure generated code matches design system standards.

Teams already using Code Connect can access the multi-file mapping feature immediately through the existing interface. Figma has not announced whether similar capabilities will extend to other parts of the Dev Mode workflow.