Figma's New Code Layers: Scaffolding, Not a Silver Bullet

The ritual is familiar: a designer hands off a perfectly crafted Figma file, and a developer spends the next three days meticulously translating every pixel and property into CSS. Figma’s new Code Layers and custom AI plugin capabilities are not just aiming to make that ritual a thing of the past. They are embedding executable code generation and intelligent automation directly into the design canvas. This fundamentally shifts the design-to-development interface, but only if the output is actually usable.

From Mockup to Scaffold

Code Layers is a meaningful evolution beyond Dev Mode. Not because it generates more code, but because it generates it differently. Dev Mode gives you literal values: padding-left: 16px;. Code Layers aims for semantic structure, targeting design tokens: padding: var(--spacing-md). This is a critical distinction. It shows an understanding of how design systems work in practice.

At launch, Figma is targeting React/TypeScript, HTML/CSS, SwiftUI, and Jetpack Compose. Let’s take a simple responsive card component. In theory, Code Layers can generate a React component that maps Figma variants to TypeScript props and uses CSS variables for styling.

// Example generated React component
import './Card.css';

interface CardProps {
  variant: 'default' | 'featured';
  title: string;
  bodyText: string;
}

export const Card = ({ variant = 'default', title, bodyText }: CardProps) => {
  return (
    <div className={`card card--${variant}`}>
      <h3 className="card-title">{title}</h3>
      <p className="card-body">{bodyText}</p>
    </div>
  );
};

/* Example generated CSS with design tokens */
.card {
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}

.card--featured {
  border-color: var(--color-border-accent);
}

This is useful scaffolding. It’s a starting point. But it breaks down quickly. The generator won’t handle complex state logic, ARIA roles for accessibility, or integration with a third-party library like Framer Motion. It’s a tool for getting the boilerplate on the page, not for shipping the feature. Think of it as a better create-react-app template, not a replacement for an engineer.

Motion as a First-Class Citizen

Figma’s native motion and shader support moves it from a static spec tool to an interactive one. This is a big deal. For years, developers have had to interpret GIFs or watch videos to understand a designer’s intent for an animation. Now, that spec can live inside the design file.

The key question is how this data leaves Figma. If the output is just a proprietary JSON file or a non-performant CSS animation, it’s a prettier prototype, not a development asset. The value depends on whether Figma provides a clean export to a format like Lottie or a direct API to query animation curves and delays. Details on the rendering engine, likely WebGL for shaders, and the export formats are still unconfirmed.

A shader-driven distortion on hover is a great demo. But for a developer, that demo raises immediate questions about performance, bundle size, and cross-browser compatibility. Until we see how these new motion specs translate into shippable code, it’s a promising but unproven feature.

The Extensibility Layer: Custom AI Plugins

The new AI plugin framework is the highest-ceiling feature in this update. It allows teams to encode their own design system intelligence and automate bespoke workflows. This all hinges on the API. Can plugins call external LLM APIs like gpt-4o or claude-opus-4-8 with our own keys, or are we locked into a native model? An open model means we control cost, capability, and data privacy. A closed one is a serious limitation.

Assuming an open model, the possibilities are significant.

1. A/B Layout Generator: A plugin could use an LLM to interpret design constraints (“make this section feel more spacious”) and generate multiple valid CSS Grid or Flexbox arrangements, going beyond what a simple rule-based template switcher could do.
2. Semantic Accessibility Scanner: Instead of just checking color contrast, an AI plugin could analyze a component’s structure and purpose to suggest specific ARIA labels and alt text. It could understand that a group of elements is a product card and recommend role="group".
3. Context-Aware Content Population: A plugin could use generative models to fill designs with realistic, context-aware content. For a user profile card, it could generate a plausible name, job title, and bio, making the mockup feel much closer to the final product.

New Power, New Obligations

These tools reduce the friction of design-to-code translation. But they introduce a new kind of friction: governance. Who owns AI-generated code? How does it fit into existing CI/CD pipelines and review processes? When is it faster to use the scaffolder versus just writing the component from scratch?

This update isn’t just about better tooling; it’s about changing the collaboration model. It moves teams from a linear handoff to a continuous co-authorship. That shift requires new team agreements and clear ownership, not just a shared login. Other tools like Framer and Anima have long offered similar features, but Figma’s native integration into the industry-standard tool makes this a workflow change that builders can’t ignore.

The right move isn’t to replace your entire workflow overnight. Start with a pilot project. Use Code Layers to scaffold a non-critical component. See how much of the output you keep and how much you throw away. The real value isn’t in replacing developers, but in freeing them up from the most repetitive parts of their job.