Figma Code Layers Beta: Merge GitHub Repos Into the Design Canvas

Figma Launches Code Layers Beta in July 2026

Announced at Figma's annual Config 2026 conference on 24 June 2026, Code Layers is a new Figma capability that lets design and engineering teams bring a live GitHub repository directly onto the Figma design canvas and work on production code and design in the same multiplayer file. Early access through the waitlist at figma.com/config-betas began opening to approved teams in July 2026. Code Layers supports React-based repositories and npm packages — including motion libraries and 3D rendering frameworks — and represents Figma's most direct move into the software engineering workflow after more than a decade as a design-first tool. One widely cited analysis described the launch as Figma positioning itself against AI-native code editors such as Cursor, which carries a reported valuation of around 60 billion dollars.

How Code Layers Works

Code Layers operates through a direct GitHub integration. A team member connects a repository to Figma, which clones the codebase onto the canvas as a structured layer tree. Any design layer in the file can then be converted into an interactive, code-backed layer with a single click or a natural-language prompt. The resulting code layer is live: it runs the actual component from the GitHub repository, reflects its current state, and can be edited directly on the Figma canvas.

Changes made through the canvas interface can be synced back to the GitHub repository, closing the loop between design iteration and version-controlled code. Designers, product managers, and engineers can all work in the same Figma file — leaving comments, editing frames, and modifying component logic — without switching between separate tools. On the canvas, a code layer can be duplicated to explore multiple implementation directions side by side, the same way a designer would duplicate a frame to compare design variants.

Figma Motion: Keyframes in Open Beta

Alongside Code Layers, Figma shipped Figma Motion into open beta on 24 June 2026. Motion adds a keyframe timeline with animation presets to the Figma canvas, with exports in CSS, JSON, React, MP4, WebM, Animated SVG, and GIF formats. Figma Motion is available on all Figma subscription plans. Developers who previously animated components in a separate tool after receiving design specifications can now receive motion-ready exports directly from the same Figma file where the original design lives, removing one post-processing step from the design-to-production workflow.

The Design-to-Code Handoff Problem Code Layers Solves

The gap between a design file and a running application has been a persistent cost centre in software teams for over a decade. A designer specifies a component in Figma; a developer recreates it in code; visual regressions appear; the review cycle begins again. AI-assisted coding tools have addressed this by making code generation faster, but the structural problem remains: the design file and the production codebase are separate artefacts in separate tools, maintained by different people working from different representations of the same intent.

Code Layers addresses this structurally rather than through faster generation. By treating the production GitHub repository as the source of truth that appears directly on the canvas, the feature makes the Figma file and the codebase the same artefact rather than parallel representations. A class of errors that arise during translation from design to implementation — inconsistent spacing, misapplied component variants, missed interaction states — is eliminated structurally, not merely caught faster.

Figma Versus AI-Native Code Editors

The launch positions Figma in direct competition with AI-native code editors for the engineering workflow. AI-native editors like Cursor take the approach of bringing design-like features and UI generation into a code editor. Figma Code Layers moves in the opposite direction: it brings the production codebase and its live components onto the design canvas. These two approaches reflect a genuine architectural choice about where design-engineering convergence should happen — in the code editor or in the design tool — and Figma's answer is now unambiguous.

The current constraint is that the July 2026 beta supports React-based repositories and npm packages, covering the majority of frontend web development but excluding native mobile applications and non-JavaScript frameworks. Teams building in Vue, Angular, or Svelte, and teams working on native iOS or Android, are not yet supported. General availability timelines beyond the waitlist beta have not been announced.

What Code Layers Means for Indian Product and Engineering Teams

India's software services industry handles a significant volume of design-to-development handoff work on behalf of global clients. For Indian product teams at startups and for engineering teams at IT services firms managing React-based frontend engagements, Code Layers directly affects workflow economics. If design-development iteration cycles are shorter because the canvas and the codebase are the same file, sprint velocity improves and the cost of UI rework across a delivery engagement drops.

For teams building SaaS products that sell to global markets from India, the Figma Motion export feature simplifies producing animated UI components — onboarding flows, interactive product tours, and marketing site animations — without a separate animation tool or an additional engineering pass. Teams building on React-based frontends should join the waitlist at figma.com/config-betas now to assess whether the design-code integration model fits before it reaches general availability and the waitlist closes.

The Bottom Line

Figma's Code Layers feature, opening beta in July 2026 via figma.com/config-betas, connects a GitHub repository directly to the Figma canvas, converts design layers to live React code components, and syncs changes back to the repository — all within a single multiplayer file. Announced at Config 2026 on 24 June 2026, it supports React and npm packages. Figma Motion, shipping in open beta on the same date on all plans, adds a keyframe timeline with exports in CSS, JSON, React, MP4, WebM, Animated SVG, and GIF. Together, these features position Figma as a design-plus-engineering platform and place it in direct competition with AI-native code editors. For Indian product and engineering teams on React-based frontends, both features reduce tool-switching overhead and shorten the design-to-production feedback loop.