Design

Unifying design and code iteration on one canvas

AI-assisted code layers let designers turn visual layers into live, GitHub-linked code, iterate with teammates in the same file, and sync changes back to the codebase, reducing handoff friction between design and engineering.

Why the human is still essential here

Designers and developers still need to decide what should be built, judge usability and brand fit, and review whether generated or synced code matches product intent and standards.

How people use this

GitHub-linked component variants

Designers turn a UI element like a pricing card or navigation bar into a live code layer, compare alternate implementations on the canvas, and sync the approved version back to the repository.

Figma Code Layers / GitHub

Interactive state prototyping

AI converts a static component into a coded layer with hover, loading, and error states so design and engineering can refine behavior together before handoff.

Figma Code Layers / Figma AI

Design system code patches

A shared button, form field, or card component is updated as code directly in the design file so visual and implementation changes can be reviewed in one place before shipping.

Figma Code Layers / GitHub

Need Help Implementing AI in Your Organization?

I help companies navigate AI adoption -- from strategy to production. Whether you are building your first LLM-powered feature or scaling an agentic system, I can help you get it right.

LLM Orchestration

Design and build LLM-powered products and agentic systems

AI Strategy

Go from idea to production with a clear implementation roadmap

Compliance & Safety

Build AI with human-in-the-loop in regulated environments

Related Prompts (4)

Latest community stories (1)

News
LinkedIn

Code is a design material

For years our industry has argued about design versus code, as if you had to pick a side. Figma Config 2026 quietly ended that debate this week. The premise underneath every announcement was simple. Code is a design material, the same as vectors, type, and frames, and it belongs on the same canvas as everything else.
That reframe matters more than any single feature, but the features are worth knowing.


Code Layers lets you turn any design layer into an interactive, GitHub-linked code layer with a click or a prompt, iterate on it beside your team, then sync changes back to the codebase. Figma Motion brings a real animation timeline onto the canvas, with keyframes, presets, and export to CSS, React, and JSON, so motion finally lives inside your design system instead of a separate tool. Shaders, generative plugins, 3D transforms, and Weave image workflows round out the "new materials" story.


The part I am watching most closely is the agent. It now carries Skills, which package your team's conventions into reusable instructions, and Connectors, which let it reach into Notion, Slack, GitHub, Atlassian, and more, then send updates back. That is not a design feature. That is an integration architecture, and it looks a lot like the agentic patterns we have been building toward in the enterprise.


Here is the tension worth sitting with. Lowering the floor is easy, and AI has done it everywhere. Raising the ceiling is the hard part, and that still depends on judgment, taste, and the people doing the work. New materials do not make better products on their own. They make the gap between strong design thinking and weak design thinking more visible than ever.


If you design for regulated, high-stakes environments, that gap is the whole job.


What are you most curious to put through its paces first?


#config #Figma #figmaconfig2026

RP
Ravi PalweSenior Manager, Experience Design
Jun 27, 2026