Anthropic Overhauls Claude Design: Bidirectional Code Handoffs and Design System Imports
anthropic claude mcp claude-code figma claude-design
trending_up Trend: anthropic

Anthropic Overhauls Claude Design: Bidirectional Code Handoffs and Design System Imports

calendar_month June 18, 2026

Anthropic Overhauls Claude Design: Bidirectional Code Handoffs and Design System Imports

Summary

Anthropic has released a sweeping update to its Claude Design tool. Key features include the extraction of design systems directly from existing codebases or Figma files, bidirectional code handoffs to Claude Code via a new Figma MCP server, and a restructured token consumption model. The new model front-loads computation to reduce token burn by over 50% during iterative design processes. Additionally, weekly token limits have been doubled across all subscription tiers (Pro, Max, Team, and Enterprise). This update aims to bridge the gap between design and development with seamless workflows.

What happened?

On June 17, 2026, Anthropic announced a major overhaul of Claude Design. The tool, which originally launched in preview in April 2026, has been updated with deep developer workflow integrations:

  • Design System Imports: Claude Design can now extract design tokens and component libraries directly from existing codebases (e.g., React, Tailwind) or Figma files.
  • Figma MCP Server & Claude Code: Powered by the Model Context Protocol (MCP), Claude Code can now communicate directly with Figma. This enables bidirectional “round-trips” where code changes propagate back to design, and vice versa.
  • Token Efficiency: A structural rewrite of conversation iteration logic distributes computation more efficiently, reducing token consumption by over 50%.
  • Increased Limits: Anthropic has also doubled weekly token limits for Pro, Max, Team, and Enterprise users.

Why it matters

The transition from static design mockups to functional code has historically been a major friction point for product teams. By introducing a Figma MCP server and linking it with Claude Code, Anthropic establishes a seamless bridge between design specs and actual code. Developers no longer need to write components from scratch; instead, they can import design systems directly. Furthermore, the 50% reduction in token burn and the doubled limits lower the cost barrier for enterprises looking to scale generative design tools.

Evidence

Official announcements and tech coverage confirm the release and functionality:

  • Tech press articles on VentureBeat and Crypto Briefing details the technical and business implications.
  • Figma detailed the partnership in their official blog post.
  • Official support updates on Anthropic Support document the new controls and limit changes.
  • Developer video tutorials demonstrate the Figma MCP integration in real-world environments.

Analysis

This move highlights a broader shift in the AI space: simple text-to-design generators fall short if they are not integrated into professional design tools like Figma. Standardizing on the Model Context Protocol (MCP) gives Anthropic a strategic advantage by allowing easy connections to external data sources. By solving the high token burn issue (which previously plagued iterative UI coding), Anthropic has made the tool economically viable for daily use in design and engineering departments.

Practical Takeaways

  • Test Figma MCP Server: Teams should evaluate connecting Claude Code with Figma to automate the translation of design changes into React/HTML code.
  • Import Existing Design Systems: Use the import feature to feed existing CSS and Tailwind classes directly into Claude’s context, rather than defining them manually.
  • Adjust Token Budgets: With a 50% reduction in token burn and doubled limits, teams can plan longer, more complex iterative design sessions without hitting quota limits early.

Open Questions

  • How well does the Figma MCP server handle extremely complex layouts with nested auto-layout structures?
  • Will other design tools like Sketch or Adobe XD adopt similar open protocols to counter the dominant Figma-Anthropic alliance?

Sources

  1. Anthropic Labs Announcement: Introducing Claude Design by Anthropic Labs
  2. VentureBeat: Anthropic Overhaul of Claude Design
  3. Crypto Briefing: Anthropic Claude Design Overhaul
  4. Figma Blog: Introducing Claude Code to Figma
  5. Anthropic Support: Claude AI Collections
  6. YouTube: Claude Design Figma MCP Tutorial
  7. FindSkill: Claude Design Figma Import & Tokens