Seuil analysisThe faster workflow is not design-to-code. It is design-to-decision, provided the team keeps production acceptance criteria outside the canvas.
What Figma launched on October 15
Figma's October 15 release notes say Code Layers are rolling out in open beta. A code layer is an interactive prototype backed by running code on the Figma canvas, available across Starter, Education, Professional, Organization and Enterprise plans for people with edit access.
Teams can create one from a prompt, convert selected frames, upload a local folder, clone a connected GitHub repository or capture code from a webpage with Figma's Chrome extension. The documentation also describes opening a code editor, editing properties and creating pull requests back to a connected repository.
Availability is gradual. Figma says people in the same organization may receive access at different times. Creating and editing inside Code Layers is free on paid plans through November 4, 2026; afterward those tasks use Figma AI credits.
Running states can improve a product review
A code-backed prototype can expose behavior that a static frame hides. Teams can compare loading, empty, error and completed states beside each other and interact with several variants on the same canvas.
Consider a file upload flow. A polished success screen says little about a 40-second upload, a rejected file or a retry. Putting those states into a running prototype lets product, design and engineering review timing, copy and recovery before scheduling production work.
W3C guidance requires important dynamic status messages to be programmatically available to assistive technology when focus does not move. A visual spinner that looks correct in the prototype still needs a status role, meaningful text and screen-reader verification.
Use a product discovery workshop to choose the uncertain behavior worth prototyping. Recreating an already understood page in code only proves that the tool can draw it.
A live canvas is not a production environment
Treat Code Layers as an exploration surface, not deployment proof. The open beta can show interaction and component behavior, but it does not establish production performance, browser coverage, security, data handling or maintainability.
A checkout prototype may call sample data and feel complete. Production still needs authentication, error observability, payment boundaries, analytics, accessibility checks and rollback. Those responsibilities do not disappear because the prototype began from a real repository.
Figma notes that MCP imports can take ten minutes or more and some projects need changes to run as Code Layers. That is a useful reminder: compatibility with the canvas is its own environment constraint, not evidence that the production architecture should change.
Pilot one risky flow with four acceptance gates
Choose one bounded journey, one repository branch and one owner. Define what the team must learn before importing anything, then compare the result with the current workflow.
For the upload flow, the pilot could test whether design can change error recovery without breaking the shared button, status and file-list components. Engineering reviews the resulting diff; design reviews every state; product records whether the decision arrived sooner with fewer unresolved questions.
| Gate | Test | Pass evidence |
|---|---|---|
| Behavior | Run success, waiting, error and retry states | Every state is reachable and understandable |
| Accessibility | Use keyboard and screen reader on status changes | Focus and announcements match the intended flow |
| Code | Review dependencies, component reuse and generated diff | No hidden fork or unsafe shortcut |
| Exit | Move the accepted change back to the owned repository | Build, tests and normal review pass outside Figma |
Design system rules matter more when agents can edit code
Connect a small, documented code surface before exposing an entire frontend. The agent needs component intent, supported variants and prohibited shortcuts; a repository alone contains implementation, not every design decision.
If the prototype creates a third button component instead of using the supported one, visual speed has produced maintenance debt. Review the contribution through the same owners and release path described in the design system governance guide.
Keep generated changes in a branch, require human review and preserve the standard test suite. Closed-beta code sources and newly announced design-system guidelines may change the workflow later, but the October 15 release does not make governance automatic.
The open beta leaves costs and fit uncertain
Credit use varies with task complexity after the free period, and access is still rolling out. Teams cannot yet infer a stable operating cost or organization-wide availability from the launch announcement.
The strongest use case is a front-end interaction whose uncertainty can be reproduced on the canvas. It is weaker for backend architecture, sensitive production data, cross-service failure or research questions that need real users rather than a richer prototype.
If the main issue is how people understand an AI-assisted state or correct a system action, start with the AI UX design guide. Code Layers can render the recovery; they cannot decide what responsible recovery should be.
What product teams should do now
- Wait until the Code tool is enabled for the people in the pilot.
- Select one consequential interaction, not a whole product migration.
- List the success, waiting, empty, error and recovery states first.
- Connect the smallest repository surface and use an isolated branch.
- Test keyboard, focus, status announcements and mobile interaction.
- Review the generated diff, dependencies and design-system reuse.
- Require the normal build, tests and code review outside Figma.
- Measure decision quality and rework before estimating broader adoption.
Run the pilot as a product experiment. If it improves one real decision and the accepted change exits cleanly through the normal delivery pipeline, then evaluate a wider workflow with the product design agency buying criteria.