Figma has released Dev Mode 2.0, introducing AI-powered code generation that transforms designs into production-ready components for React, Vue, and Svelte frameworks.

What's New

The updated Dev Mode can now:

  • Generate complete components with props and state management
  • Export CSS-in-JS or Tailwind classes automatically
  • Handle responsive breakpoints natively
  • Include accessibility attributes by default

Image Block: Split screen showing Figma design on left and generated React code on right

Callout Block: Early beta users report 60% faster frontend development cycles, with designers and developers collaborating more effectively than ever.

Code Quality

Generated components include:

// Auto-generated from Figma design
export const Button = ({ 
  variant = 'primary', 
  size = 'medium',
  children,
  ...props 
}) => {
  return (
    <button 
      className={`btn btn-${variant} btn-${size}`}
      {...props}
    >
      {children}
    </button>
  )
}

The code follows industry best practices with proper TypeScript definitions, semantic HTML, and WCAG compliance.

Pricing & Availability

Dev Mode 2.0 is included in Figma Professional plans ($12/month). The feature rolls out globally over the next two weeks.

"This isn't just code generation—it's intelligent translation of design intent into functional components. The AI understands design systems and maintains consistency."
- Figma Product Team

Supported Frameworks:

  • React (with TypeScript)
  • Vue 3 (Composition API)
  • Svelte/SvelteKit
  • Angular (coming Q4 2024)
  • Web Components
  • Plain HTML/CSS

The update positions Figma as more than a design tool—it's becoming the bridge between design and development workflows.