Carbon Design System
Preview

Additional resources

Last updated Jun 30, 2026

Carbon Figma Tools uses AI to turn Figma designs into production-ready Carbon React code, validate Carbon v11 compliance, and accelerate design-to-code workflows.

Additional resources

Carbon Figma and AI tools hello

Carbon Figma Tools is a suite of plugins built to supercharge IBM product teams by bridging the gap between design and development. Powered by the Carbon Design System and infused with AI, these tools help you deliver production-ready code faster, with greater accuracy and consistency.

Figma Code Connect

Bridge the gap between design and development. Generate accurate Carbon React code directly from Figma’s Dev Mode—no guesswork, just clean, component-based output.

Figma Code Connect
IBM bee icon

Carbon v11 Coverage Plugin

Scan your Figma files for non-Carbon v11 components, colors, and typography. Ensure design fidelity and reduce hallucinations in code generation.

Carbon v11 Coverage Plugin
IBM bee icon

IBM Carbon Design to Code

Turn designs into React starter code in two clicks. AI-optimized for structure, readability, accessibility, and testability—with a composite quality score and time-saved estimate.

IBM Carbon Design to Code
IBM bee icon