figma-mcp

7 posts

figma

How To Move Fast Toward the Right Thing | Figma Blog (opens in new tab)

AI has made software execution dramatically faster, but it has not made judgment easier. The article argues that teams must deliberately decide what is worth building, provide agents with strong context and constraints, and preserve a distinct human point of view. Otherwise, polished prototypes can create hidden tech debt and increasingly average products. ## AI Accelerates Execution, Not Clarity - AI can quickly produce polished, production-like outputs, but apparent polish may hide weak decisions and fragile implementation. - Large language models often fill in missing requirements themselves, causing prototypes to fail under real-world constraints. - **Cognitive surrender** describes accepting AI-generated decisions without scrutiny or independent deliberation. - Teams should follow a “consideration imperative”: pause to understand the problem and define the right outcome before accepting the first plausible solution. ## Context Has to Come First - Agentic engineering shifts developers from manually writing every line of code to expressing intent clearly and directing AI. - Effective intent requires: - **Deterministic layers**, such as tests, type checks, and validation, to catch model errors consistently. - **High-signal context**, including specifications and documented components. - **Clear interfaces**, so agents understand how systems and components connect. - Tools such as Figma MCP’s Code Connect can provide agents with real production components, including props and variants, rather than forcing them to infer implementation from pixels. - Investing in design systems and documented decisions gives agents a precise vocabulary and guardrails, producing more consistent output, leaner code, and less technical debt. ## Good Can Still Be Average - AI tends to generate work that resembles common patterns in its training data, or work that is “in distribution.” - Typical AI-generated results—geometric gradient logos, familiar presentation fonts, or rounded-corner cards—are competent but interchangeable. - When teams repeatedly accept adequate results, their judgment can narrow from asking “What should this be?” to choosing “Which option is least wrong?” - As AI raises the baseline of acceptable work, products can become unremarkable unless people deliberately define what makes them distinctive. ## The Point of View Needs to Be Yours - AI can improve execution, but it cannot replace a team’s responsibility to establish intent, standards, and a meaningful perspective. - Without a clear point of view, the model’s default assumptions determine both what gets built and how it looks. - Moving quickly is valuable only when speed is paired with careful consideration, strong context, and deliberate choices. Teams should treat AI as an execution partner—not as the source of product judgment. Define the problem, encode decisions in systems and safeguards, and challenge generic outputs before shipping.

figma

Better Code, Fewer Tokens: The Benefits of Code Connect in MCP | Figma Blog (opens in new tab)

Code Connect improves how coding agents translate Figma designs into production code by supplying real design-system components, imports, and prop values. Figma’s evaluations found that Code Connect reduced median task duration by 19.6%, lowered token usage by 29.5%, and increased code quality by one point on a 1–4 scale. The central conclusion is that better design-to-code context helps agents work faster while producing code that fits existing codebases. ## The Problem: Visually Correct but Technically Wrong Code - Without production context, agents often: - Rebuild interfaces from basic primitives. - Invent components that already exist. - Choose the wrong design-system component. - Spend extra tokens searching, debugging, and rewriting. - Figma’s MCP server normally provides a React representation of the design through `get_design_context`. - This output may match the visual design but does not explain how the design maps to a company’s actual component library. ## How Code Connect Enriches MCP Responses - Code Connect links Figma components to their real implementations in a codebase. - With Code Connect templates configured, MCP responses replace generic React markup with production-relevant snippets. - Agents receive: - Correct component imports. - Accurate component names. - Appropriate property values. - Code that reflects the company’s design system. - For example, generic markup for a tab control can be replaced with an existing component such as: ```tsx <SegmentedControl value="design" options={["Design", "Code"]} /> ``` ## Coinbase Case Study - Coinbase’s Design Systems team adopted Code Connect as engineers increasingly used coding agents. - Without Code Connect, agents sometimes fabricated alternatives, such as constructing a stepper from progress bars. - With Code Connect, agents received literal imports and accurate code representations for Coinbase Design System components. - Coinbase reported improved output quality and reduced token usage. ## Evaluation Results - Figma created an evaluation harness that ran identical design-to-code tasks: - Once without Code Connect. - Once with Code Connect templates. - The evaluation covered 27 test cases. - It measured: - Code quality. - Token consumption. - Task duration. - The tests used two React-based design systems: - Simple Design System (SDS), Figma’s example system. - Figma Pattern Library (FPL), a larger internal system. - Across the tests, Code Connect produced: - **19.6% lower median task duration** - **29.5% lower median token usage** - **A one-point increase in code quality on a 1–4 Likert scale** Teams using coding agents for design-to-code work should connect their Figma components to production implementations through Code Connect. Providing exact component context reduces guesswork and tokens while helping agents produce maintainable, design-system-compliant code.

figma

How Decagon Uses AI For Design System Saturation | Figma Blog (opens in new tab)

Decagon built its Deco design system to maintain quality and consistency as its AI-powered customer service platform scaled. By connecting Figma, Storybook, coding agents, and Figma MCP, the company reduced design-to-code friction and enabled agents to produce higher-fidelity implementations. The result is a shared design language and a continuous loop between design and engineering. ## Building a Design System for Quality at Scale - Decagon initially had no formal design system, while its product and team were expanding rapidly. - Inconsistencies across the platform weakened the polish expected by enterprise customers. - Designers and engineers created Deco together, addressing implementation details early, including: - Focus-mode behavior - Disabled, read-only, error, and warning states - Placeholder decisions - Existing code patterns and edge cases - Deco grew into an organization-wide Figma library with hundreds of components, styles, and variables. - Library analytics recorded tens of thousands of component insertions in 30 days, indicating broad adoption. - The system provides: - A single source of truth for design and implementation - A shared vocabulary between designers and engineers - Faster screen assembly from reusable components - Greater consistency across teams and product areas ## Connecting Design and Code with Figma MCP - Before MCP, designers exported specifications, developers interpreted them, and discrepancies were discovered during review, creating repeated back-and-forth. - Decagon moved its design-system components into Storybook so engineers and coding agents could work from precise, documented implementations. - The team created coding-agent skills that: - Require agents to use approved design-system components - Help designers add new components while keeping Figma and code aligned - With Figma MCP enabled, agents can access design specifications, code context, and the Figma canvas within the same workflow. - Designers can provide a Figma link to a coding agent, which uses design context and maps the requested interface to Deco components. - This produces high-fidelity starting points and speeds up iteration while reducing divergence between the intended design and the final code. Decagon’s experience suggests that design systems become significantly more valuable when they are connected directly to development tools and AI agents. Maintaining synchronized component libraries across Figma and code can help fast-moving teams scale without sacrificing consistency or implementation quality.

figma

Workflow Lab: Expanding the Canvas with Figma MCP | Figma Blog (opens in new tab)

Figma’s workflow demonstrates how the Figma MCP server can reconnect design and implementation as features evolve. By reading coded states and generating editable frames on the canvas, an agent exposes product behavior that was invisible in the original design. This lets designers improve real edge cases and compare the shipped experience with design intent earlier. ## The problem: Code creates new product states - Astra, a fictional AI video platform, ships features rapidly with agentic coding tools. - An initial export flow covered sequence selection, format choice, settings confirmation, and export. - As development progressed, additional states appeared: - Encoding errors - Rendering and loading progress - Empty selections - Unsupported formats - These states were not necessarily design oversights; they emerged from real code and data. - When the canvas represents only the initial flow, designers cannot fully address the experience users will encounter. ## Expanding the canvas with Figma MCP - The Figma MCP server allows an agent to read implementation details and write results to the Figma canvas. - Using `use_figma`, the agent identifies coded states and creates editable frames using the team’s design-system components. - Astra’s canvas expands from four original frames to fourteen frames representing the broader product reality. - This replaces a slower task-and-ticket feedback loop with a direct conversation between design, code, and the agent. ## Designing better edge cases - The designer can immediately work on states that previously remained hidden: - Adds recovery guidance to the encoding error state. - Enhances the render loading state with progress information and an estimated completion time. - Adds copy and personality to the empty-selection state to encourage feature adoption. - Designers spend less time discovering missing requirements and more time shaping actual product behavior. - The canvas becomes a shared workspace for reviewing the full experience, not merely documenting the initial concept. ## Comparing design and implementation - The workflow also places the coded version beside the original Figma design for visual comparison. - A findings panel surfaces discrepancies by severity. - Example differences include: - A larger modal title - An additional “Post share link” button - A removed settings-panel surface - A demoted settings header The practical recommendation is to use Figma MCP as an ongoing design-code feedback loop: bring real implementation states onto the canvas, refine them with design expertise, and use visual comparisons to catch drift before it becomes part of the shipped product.

figma

How Figmates Used Figma AI to Take Delight to the Next Level | Figma Blog (opens in new tab)

Figma’s 2026 April Fun Day project, “FigCade,” used Figma Make, Figma Weave, and the Figma MCP server to create six playable mini-games in only a few days. The tools helped the team rapidly prototype ideas, explore visual styles, produce media, and translate designs into code. The project demonstrated how AI can make design and development more collaborative and iterative. ## Building a playful canvas experience - April Fun Day is Figma’s annual tradition of adding playful surprises and Easter eggs for its community. - This year, the team brought six mini-games directly into the Figma canvas for one week. - The project also gave employees an opportunity to experiment beyond their usual roles and push Figma’s tools in new ways. - The resulting FigCade included games such as: - **2Fast2Figma**, a timed quiz about Figma facts. - **FigPalette** and **Diabolical Magic Square**, featured in the game menu. ## Rapid prototyping with Figma Make - Figma Make helped the team turn ideas into working prototypes quickly. - An early concept for 2Fast2Figma was created on a Sunday morning and became functional that afternoon. - The team generated multiple prototypes, tested them with others, and iterated based on feedback. - This established a fast workflow: build something quickly, review it, align with the team, and refine it. ## Exploring visuals with Figma Weave - Figma Weave helped designers generate and explore visual assets more efficiently. - Designer Lesley Moon used it to create felt-style textures and assets, including the project’s textured cursor. - Generating many variations quickly expanded the range of visual themes the team could consider. - Weave was also used to develop the April Fun Day trailer: - Product Manager Tara Nadella explored the initial concept. - Motion Designer Fifi Law used those explorations and Lesley’s visuals to produce the final trailer in one day. ## Connecting design and code with MCP - The Figma MCP server helped developers turn design explorations into implementation. - Engineer Steven Noto used Claude and GitHub Copilot with MCP authentication. - By sharing links to specific Figma components, the coding agents could access design context and generate code matching the intended specifications. - The team moved back and forth between design and development, using AI to reduce the distance between visual concepts and working software. ## Practical takeaway FigCade illustrates how combining rapid prototyping, generative visual tools, and design-aware coding assistance can help small teams create polished interactive experiences quickly. The strongest results came from treating AI as part of an iterative design-and-development process rather than as a replacement for human direction.

figma

Think Outside of the Box—with Claude and FigJam | Figma Blog (opens in new tab)

Figma and Anthropic have integrated FigJam with Claude so teams can turn AI conversations into editable diagrams. Users can generate flows, timelines, architecture diagrams, and other visual artifacts from prompts, PDFs, images, screenshots, documentation, or code. The integration is intended to make AI-assisted thinking more collaborative by moving ideas from a private chat into a shared workspace where teams can refine and act on them. ## Turning Conversations into Diagrams - Claude can create editable FigJam diagrams directly from written prompts and uploaded materials. - Product teams can generate user flows from PRDs to identify friction, edge cases, and missing steps. - Visualizing ideas reduces copy-pasting and context switching while making abstract concepts easier to discuss. - Teammates can comment, react, and build on the generated diagrams in FigJam’s shared canvas. ## Supporting Product Planning - Product managers can use Claude and FigJam to create initial project plans and Gantt charts. - Generated timelines can map milestones, dependencies, and sequencing. - Early visual drafts help teams spot planning problems, unblock work, and align more quickly. ## Helping Engineers Explain Complex Systems - Claude can generate diagrams from technical documentation or uploaded code files. - Diagrams can represent: - System architecture - Services and APIs - Databases and dependencies - Request and response flows - Sequence and state transitions - These diagrams provide shared context for front-end and back-end teams and help reduce implementation risk. - Claude can compare system patterns and suggest suitable visualization styles. ## FigJam as a Collaborative Workflow - Ideas generated in Claude can move into the broader Figma ecosystem: - Refined in Figma Design - Shared through Figma Slides - Translated into code - Figma is also improving FigJam with more advanced shape collections and connector types. - Anthropic has released a UI kit for designing Claude MCP apps in Figma. - The workflow connects brainstorming, planning, refinement, and execution in one process. ## AI as an Ongoing Collaborator - Multi-turn conversations let teams iteratively develop user journeys, prioritization strategies, and implementation plans. - Claude can propose alternative solutions and recommend chart formats such as decision trees, Gantt charts, sequence diagrams, and state diagrams. - FigJam diagrams become shared, evolving artifacts rather than one-off AI outputs. - Figma presents this integration as a step toward making complex systems easier for teams to understand and improve together. Teams can access the feature through the Figma Connector in Claude’s browser or desktop apps, with support listed for Claude Opus 4.5 and Sonnet 4.5.

figma

Turn Your ChatGPT Brainstorms Into FigJam Diagrams | Figma Blog (opens in new tab)

Figma’s new ChatGPT app turns brainstorms, sketches, uploaded files, and technical documents into editable FigJam diagrams. It supports flowcharts, sequence and state diagrams, and Gantt charts, helping users move quickly from exploration to collaborative artifacts. The feature is powered by Figma’s remote MCP server and is available to logged-in ChatGPT users outside the EU. ## Turning Conversations into Diagrams - Users can mention Figma in a prompt, such as “Figma, make a diagram from this sketch.” - ChatGPT can recommend the Figma app when diagramming is relevant. - Photos, drawings, PDFs, and other files can provide context. - Generated diagrams can be revised, expanded, or represented in alternative formats. - Figma plans to add more diagram types over time. ## Accelerating Design Iteration - Hand-drawn sketches can become shareable FigJam files. - Designers can ask ChatGPT to update diagrams or explore different visualizations. - Dense documents can be uploaded so ChatGPT can produce an initial draft. - This helps teams move ideas from informal notes or whiteboards into a collaborative workspace. ## Clarifying Technical Systems - Developers can use uploaded documentation and screenshots to create or update software architecture diagrams. - ChatGPT can research technical approaches using blogs and case studies, then visualize them. - Screenshots, such as a pricing page, can be used to map likely React component structures. - The resulting diagrams support system design discussions, technical communication, and interview preparation. ## Planning Products and User Experiences - Product managers can visualize tradeoffs, such as simplicity versus power in a permissions flow. - PRDs can be converted into user journey or process flowcharts. - Product, engineering, and design requirements can be combined into Gantt charts for launch planning. - ChatGPT supports individual exploration, while FigJam enables teams to review and iterate together. The feature is currently live for logged-in ChatGPT users outside the EU. It offers a practical workflow for using ChatGPT to generate a first visual draft and FigJam to refine, discuss, and collaborate on it.