Figma

736 posts

www.figma.com/blog/engineering

Filter by tag

Figma528 Design Systems246 User Experience140 Prototyping135 AI110 Figjam98 Product Design76 User Interface63 Generative AI47 Collaborative Design47 Accessibility41 React39+1265

figmaApr 30, 20262 min readCurated summary

Workflow Lab: Expanding the Canvas with Figma MCP | Figma Blog

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.

Design Systems AI Agents Design To Code Claude Code+1

figmaApr 29, 20262 min readCurated summary

How to Design Agentic Tools for Work | Figma Blog

Gemini Enterprise is designed to make complex, multi-agent business workflows feel simple without hiding AI’s role. Its core principle is to keep users focused on goals while making intervention, accountability, and data context visible. The result is an agentic system that supports not only individual productivity but shared team intelligence. ## A Familiar Brand with Business-Specific Capabilities - Gemini Enterprise shares Gemini’s visual language, including the sparkle icon, gradients, rounded shapes, and motion. - Its enterprise experience emphasizes integrations with tools such as Google Workspace, Jira, and Notion. - Connectors are made prominent in the prompt experience so agents can access the business context needed to produce useful results. ## Moving Beyond Chat with the AI Inbox - Enterprise work often involves multiple tools, data sources, deadlines, and agents working simultaneously. - The AI Inbox provides a visual overview of: - Tasks agents are currently handling - Completed work - Items requiring human intervention - Deliverables awaiting review - This dashboard is intended to feel more like a team status check-in than a sequence of chat messages. ## Collaborative Projects as Shared Workspaces - Gemini Enterprise replaces isolated chat threads with persistent, shared project spaces. - AI participates as a visible team member by: - Performing tasks - Summarizing discussions - Finding project files - Answering questions about shared material - Requests are attributed to individual team members, improving accountability and helping others understand the context behind an agent’s actions. - Shared spaces reduce information silos by allowing teammates to discover and use one another’s uploaded materials. - The assistant becomes a single source of truth and a “team intelligence amplifier,” rather than merely a personal productivity tool. ## Multiple Modes of Team Interaction - Teams can communicate with AI in group chats within Collaborative Projects. - In Canvas Mode, the assistant can generate and edit documents. - These modes allow AI to remain embedded in ongoing team workflows instead of being limited to isolated prompts. Gemini Enterprise’s design recommendation is to combine powerful orchestration with clear visibility and human control. Agents should work proactively, but their actions, sources, status, and opportunities for intervention must remain understandable to the people responsible for the outcome.

AI Jira Multi Agent Systems Agentic Workflows+4

figmaApr 28, 20263 min readCurated summary

FigJam Is Now Your Coding Agent’s Whiteboard Too | Figma Blog

FigJam is being positioned as a shared whiteboard for coding agents and engineering teams. New MCP skills let agents generate architecture and ER diagrams, write to and read from FigJam, and turn research or project plans into collaborative visual boards. The workflow connects agent-generated planning, human review, and implementation, reducing architectural confusion as teams ship code faster. ## Turning Agent Output into Visual Plans - The author built on Figma’s existing `generate_diagram` MCP tool to support more complex architecture and ERD layouts. - The new `figma-use-figjam` MCP skill allows agents to read and write directly to FigJam boards. - Skills such as `generate-project-plan` can transform documentation, codebases, and conversations into visual project plans. - Diagrams can include: - Architecture and entity-relationship diagrams - Notes and annotations - Code blocks - Implementation context and technical decisions ## Step 1: Research, Plan, and Visualize - The coding agent gathers relevant documentation, codebase structure, existing patterns, and implementation constraints. - It evaluates possible solutions, researches tradeoffs, identifies affected services and files, and proposes stacked PRs and testing strategies. - Instead of leaving the plan in a dense Markdown document, the agent exports it to FigJam as an interactive architecture review. - Visualizing the options helps teams understand the system and identify the cleanest approach more quickly. ## Step 2: Collaborate Before Coding - Engineers share the FigJam board with teammates for asynchronous or live review. - Team members can comment on concrete design questions, such as: - Whether a tool should support multiple file types - Whether it should accept a `folderId` - Where newly created files should be stored - FigJam provides a collaborative format that preserves technical context for distributed teams. - Teams can review and refine agent-generated diagrams before implementation begins. ## Step 3: Feed Decisions Back to the Agent - After review, the author uses the `get_figjam` tool to retrieve the board’s diagrams, comments, and decisions. - The coding agent uses that context to update the implementation plan and begin coding. - Pull requests can link back to the FigJam board, preserving the architectural rationale alongside the code. - Because the design has already been reviewed, the resulting PR is easier to evaluate and merge. ## Broader Figma Integration - The workflow builds on `use_figma`, which lets agents create or edit designs directly on the Figma canvas using real components. - `create_new_file` allows agents to generate designs in new Figma files. - Together, these capabilities extend agent collaboration beyond code into design, architecture, planning, and technical communication. Teams adopting coding agents can use FigJam as a reviewable source of shared context: let agents generate the initial plan, have humans refine the architecture visually, then return the approved decisions to the agent for implementation.

Figma AI Agents Figjam Model Context Protocol+3

figmaApr 21, 20262 min readCurated summary

How AI Leaders Are Borrowing From the Design Playbook | Figma Blog

AI transformation requires more than deploying new tools; it requires redesigning how organizations work. Figma argues that the most effective AI leaders adopt design practices—hands-on experimentation, close observation of workflows, and rapid prototyping—to turn adoption and innovation into meaningful business change. ## AI Leadership as Organizational Design - New AI innovation and acceleration roles are emerging to improve workflows, speed product launches, and expand tool adoption. - These leaders often coordinate AI strategy across product, support, internal operations, and technology investments. - A major risk is “performative progress”: adopting tools for appearances without changing the underlying systems and processes. - Effective leaders connect technology, teams, workflows, and business outcomes. ## Learn the Material by Using It Yourself - Leaders need firsthand experience with AI tools rather than relying only on strategic or executive-level perspectives. - Prompting, building agents, and experimenting across different tools reveals practical limitations, trade-offs, and adoption barriers. - Personal projects—such as planning travel, organizing events, or managing volunteer work—can provide low-risk opportunities to develop AI fluency. - Leaders cannot effectively guide organizations through probabilistic technologies without understanding how those technologies behave in real situations. ## Observe How Teams Actually Work - Understanding AI use across the business requires studying workflows, not just tools and their outputs. - Useful signals include Slack discussions, survey responses, usage patterns, frustrations, and points where employees get stuck. - An automation may appear successful technically but fail because it adds friction to an already complicated process. - When adoption stalls, teams may be routing around the official solution and creating unofficial alternatives; observing this behavior helps identify the real problem. ## Turn Ideas Into Prototypes - Ideas often fail because teams cannot visualize or evaluate them, not because the ideas themselves are flawed. - Prototyping converts abstract AI concepts into tangible experiences that teams can discuss and test. - Tools such as Figma Make can help leaders and teams explore concepts quickly and make early possibilities easier to understand. - Design combines observation with action: leaders should learn from real behavior, then use prototypes to test potential solutions. AI leaders should therefore combine technical curiosity with design discipline: use the tools personally, study how people work, and prototype proposed changes before attempting broad implementation.

AI AI Agents Prototyping Automation+2

figmaApr 15, 20262 min readCurated summary

The TL;DR on MCP: Why Context Matters and How to Put It to Work | Figma Blog

MCP (Model Context Protocol) connects AI tools to the design decisions and data stored in tools like Figma. Figma argues that giving coding agents structured access to components, tokens, and layout rules produces code that better matches the intended design and design system. It also creates a two-way workflow in which developers and designers can move between code and canvas without losing context. ## MCP Connects Design and Development - Product work is increasingly iterative rather than a linear design-to-development handoff. - MCP lets AI coding tools access Figma files as structured design sources, not merely as screenshots. - Figma’s MCP server helps bring design context into code, while code-to-canvas tools can bring working interfaces back into Figma. - This keeps the broader product team involved as designs and implementations evolve. ## Why Context Matters for AI-Generated Code - Without context, an AI tool may: - Choose a color that resembles the brand color but is not linked to the correct design token. - Recreate a card instead of reusing an established component. - Flatten a complex, nested form into a single basic element. - These seemingly minor deviations accumulate across screens and components. - MCP exposes the underlying components, tokens, and layout decisions that explain how a design was built. ## Designers: Files Directly Influence Production Code - Design systems now influence not only human implementation but also AI-generated code, from prototypes through production. - Well-structured, consistent Figma files can guide AI toward more reliable and on-brand results. - Poor organization or small inconsistencies can spread widely because AI reproduces them at scale. - MCP also lets designers review code-built interfaces in Figma, add missing states, refine details, and prepare work for production without starting over. ## Developers: Less Translation, More Building - AI coding tools can accelerate implementation, but their output is less accurate when design intent is unavailable. - MCP reduces the translation required between a visual design and working code by supplying the system and component context behind the design. - Developers can spend more time building instead of reconstructing design decisions from screenshots or incomplete handoffs. Figma’s practical recommendation is to treat design files and design systems as active inputs to AI workflows. The better the structure and context captured in those files, the more consistently AI can generate code that reflects the intended product.

Figma AI Design Systems AI Agents+3

figmaApr 9, 20262 min readCurated summary

Turning Prompts into Five Scalable Workflows with Figma Weave | Figma Blog

Figma Weave presents AI creation as a scalable, editable workflow rather than a one-off prompt. Its canvas connects AI models and processing nodes so creators can branch, refine, and reuse each step while maintaining control over imagery, video, audio, and 3D output. The article introduces five workflows, beginning with a method for deriving a reusable visual style from multiple reference images. ## Figma Weave as a Creative Workflow Canvas - Figma Weave evolved from Weavy, which Figma acquired to expand its capabilities in: - Image and video generation - Animation and motion design - Audio and 3D creation - VFX and professional editing - Users can chain prompts and AI nodes together, moving from references to finished assets without losing the ability to revise intermediate steps. - Figma has published more than 20 Community templates covering tasks such as: - Turning images into videos - Generating 3D models - Combining visual references - Comparing image-generation models ## Why Workflows Are More Scalable Than Single Prompts - A single prompt produces one interpretation of a style. - A workflow lets creators independently adjust how strongly each reference influences the result. - Individual stages can be reshaped, reused, and applied across multiple assets and channels. - The example brand, Epoch, demonstrates how the system can support a consistent visual identity based on distorted textures and 3D natural forms. ## Combining Two Images into a Reusable Style Guide - The first workflow combines a hibiscus flower and a rock face from Epoch’s existing visual references. - Each image is processed through an **Image Describer node**, which extracts attributes such as: - Texture - Color - Lighting - Composition - The resulting text descriptions can be edited and merged into a new style definition. - The balance between the two references can be adjusted until the desired blend is achieved. - The combined style can then be tested across different image-generation models, helping the team validate the look at scale. - The output is treated as a reusable style system rather than a single prompt for one image. The practical recommendation is to build visual direction as a modular workflow: analyze existing references, combine and tune their characteristics, and preserve the resulting style definition for reuse in future assets.

Generative AI Prompt Engineering Figma Weave Image Generation+2

figmaApr 8, 20263 min readCurated summary

How Figmates Used Figma AI to Take Delight to the Next Level | Figma Blog

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.

Prototyping Generative AI Github Copilot Figma Make+2

figmaApr 2, 20262 min readCurated summary

Build With More Context and More Control in Figma Make | Figma Blog

Figma’s Make kits and Make attachments add structured context to AI-generated prototypes, helping them start closer to production reality. Make kits provide design-system guidance through code packages, libraries, styles, and tokens, while attachments bring in project-specific data and requirements. Together, they reduce cleanup and make generated designs more consistent with how products are actually built. ## Make Kits Teach Make About the Design System - Make kits are reusable packages that combine components or styles with guidelines explaining how they should be used. - They can use: - JavaScript components from public npm packages - Packages from Figma’s secure private registry - Styles and design tokens from Figma libraries - Guidelines tell Make not only which components exist, but also how to apply them. - Instead of starting with generic UI and repeatedly correcting spacing, patterns, and components, Make can begin with production-aligned structures. - This helps: - Maintain consistency across forms, dashboards, settings, and onboarding - Let teams generate work in parallel without drifting from the design system - Reduce preparation and correction before review - Engineers can more easily recognize familiar components and focus on evaluating the proposal rather than translating it into their system. - Figma plans to expand kits to represent more design-system structure, including component structures from Figma libraries. ## Make Attachments Ground Prototypes in Project Context - Design systems do not capture every project-specific constraint, such as: - Real data - Migration requirements - Edge cases - Compliance rules - Legal copy and content - Make attachments allow users to provide source material directly instead of describing everything in a long prompt. - Supported materials include: - PDFs and Markdown files - CSV and JSON datasets - Screenshots and images - Brand guidelines - Legal copy - Media and SVG files - Code and other project assets - Attachments help Make create prototypes that reflect actual data, validation states, content, and requirements rather than producing an idealized version that omits complexity. - For example, an onboarding flow can be grounded in real user data, complete legal requirements, and multiple validation states instead of shortened copy and simplified edge cases. ## A More Production-Aligned Starting Point - Make kits provide the reusable design and code foundation. - Attachments add the details and constraints unique to a specific project. - The combination is intended to shorten the distance between an AI-generated prototype and a shippable product, allowing teams to spend less time rewriting and more time refining the experience.

Design Systems React JavaScript Figma Make+3

figmaApr 1, 20263 min readCurated summary

6 Designs That Reimagine How We Interact With Software | Figma Blog

This Figma Make-a-thon showcase argues that software interaction can become more expressive, playful, and socially connective when designers rethink familiar conventions. The winning projects use technology to recreate communal crafts, enable hands-free control, and expand physical experiences beyond traditional limits. Together, they suggest that creativity and emotional connection—not just speed and efficiency—should shape digital experiences. ## Collaborative Embroidery: Common Thread - Charlota Blunárová’s winning project adapts the tradition of handmade samplers into a shared online canvas. - Visitors choose thread colors and stitch types, then contribute to a communal embroidery piece alongside strangers. - The project deliberately imposes constraints: one shared canvas becomes more meaningful as people add to it over time. - More than 100,000 stitches have been added, turning the site into an evolving, collectively authored artifact. - Blunárová built the real-time collaboration and canvas interactions in Figma Make despite having no engineering background. - Her process began with the desired feeling and used visual references, including logos and color palettes created in Figma. ## Hands-Free Interaction: Pucker - Aleyna Çatak’s “Pucker” replaces tapping and voice commands with head movements and a lip gesture. - Users tilt their heads to move through an interface, hold still to select an item, and pucker their lips to confirm. - The concept is designed for situations where users’ hands are occupied, such as cooking, knitting, or designing. - It also points toward more accessible interfaces that can be operated without touch or speech. - Pucker uses a device’s front camera for real-time tracking and states that no data is stored or transmitted. - Çatak describes it as a flexible interaction layer rather than a finished product, potentially adaptable across apps and platforms. - Her advice is to understand basic coding concepts so prototypes can be refined and troubleshot more effectively. ## A Remote Photo Booth: Duet Booth - Paige Latimer reimagines the traditional photo booth as a remote, asynchronous experience. - Duet Booth allows two people in different places—or participating at different times—to take photos that are combined into one photo strip. - The project preserves the photo booth’s sense of immediacy and shared participation while removing its physical and geographic constraints. - Latimer recommends concentrating on the core interaction before polishing visual details, giving the rest of the design a strong foundation. The projects presented in the article demonstrate how Figma Make lowers the barrier to prototyping ambitious ideas. Designers can use it to turn emotional concepts, alternative input methods, and collaborative rituals into working experiences—provided they begin with a clear sense of the feeling or interaction they want to create.

Figma Real Time Collaboration Figma Make Computer Vision+2

figmaMar 25, 20263 min readCurated summary

Figma's Next-Generation Data Caching Platform | Figma Blog

Figma built FigCache to address scalability, reliability, and operational weaknesses in its Redis-based caching infrastructure. The stateless proxy provides a unified Redis data plane, decouples Redis connections from volatile client fleets, centralizes routing and security, and standardizes observability. After rollout to Figma’s main API in 2025, the caching layer reached six nines of uptime. ## Growing pains in caching - Redis evolved from a secondary component into a critical dependency for site availability. - Redis clusters were nearing connection limits as Figma’s infrastructure grew. - Rapid client-service scaling caused thundering herds of new connections, creating I/O bottlenecks and reducing availability. - Decentralized traffic management allowed applications to pollute or corrupt data across clusters. - Client libraries provided inconsistent observability, complicating incident diagnosis and mitigation. - A fragmented client ecosystem made it difficult to guarantee correct client-side behavior during failovers and topology changes. - Figma initially reduced Redis dependency in core API subsystems and created service-specific connection pooling, but pursued a broader platform redesign for long-term scalability. ## Design goals for a durable platform Figma defined several objectives for a caching platform capable of supporting future growth: - **Decouple Redis from client volatility:** Redis connection volume should not rise directly with elastic application fleets. - **Provide built-in observability:** Service owners and platform operators should receive consistent, granular visibility across workloads in a multitenant environment. - **Hide Redis Cluster complexity:** Clients should not need to manage topology changes such as scaling, failovers, or shard loss. - **Offer a universal endpoint:** Applications should access multiple Redis clusters through a centralized routing layer rather than managing separate endpoints and clients. - **Enable alternative backends:** New storage technologies, including durable systems, should be usable behind the same protocol and API. - **Remain extensible:** Cross-cutting capabilities such as encryption, guardrails, and traffic backpressure should be implemented centrally rather than repeatedly in applications. ## FigCache’s foundational architecture - Figma identified the need for a caching proxy that would serve as: - A unified Redis data plane. - An ingress layer for applications. - A connection multiplexer shielding Redis from client connection spikes. - A language-agnostic interface that hides cluster routing and management. - The platform was designed to centralize traffic decisions and abstract the underlying Redis topology from application developers. - FigCache is stateless and communicates using the Redis RESP wire protocol, allowing existing Redis-compatible clients and first-party libraries to use it. - Its broader platform role includes centralized security, routing, and end-to-end observability across the caching stack. ## Results - FigCache was rolled out to Figma’s main API service during the second half of 2025. - The caching layer subsequently achieved six nines of uptime. - The system established a foundation for more reliable, scalable, and interchangeable ephemeral storage across Figma. Figma’s approach demonstrates that Redis reliability at large scale requires more than larger clusters: a dedicated platform layer can isolate connection volatility, simplify client behavior, and centralize operational controls.

Observability Distributed Systems Redis Caching+2

figmaMar 24, 20263 min readCurated summary

Agents, Meet the Figma Canvas | Figma Blog

Figma is opening its canvas to AI agents, allowing tools such as Claude Code and Codex to create and modify designs directly in Figma files. Through the `use_figma` tool and customizable skills, agents can use a team’s components, variables, design decisions, and workflows instead of producing generic designs. The feature is free during beta but is expected to become usage-based and paid. ## Agents Work Directly on the Figma Canvas - Figma’s MCP integration lets agents read and write Figma files through the `use_figma` tool. - Agents can create or update: - Design assets - Components - Files based on existing design systems - Designs linked to established variables and conventions - Teams can move between code, the command line, and Figma while keeping design context shared. - Figma positions the canvas as the place where product decisions become visible and refined. ## Working Across Code and Canvas - The existing `generate_figma_design` tool converts HTML from live apps and websites into editable Figma layers. - The new `use_figma` tool operates directly on the canvas, using existing components and variables. - The tools are intended to work together: - `generate_figma_design` brings current implementation details into Figma. - `use_figma` edits those designs or creates new system-aligned assets. ## Skills Encode Design Intent - Skills are Markdown-based instructions that tell agents: - Which workflow steps to follow - What sequence to use - Which team conventions to respect - What quality standards and specialized knowledge to apply - Anyone can author a skill without building a plugin or writing traditional code. - The foundational `/figma-use` skill teaches agents Figma’s structure and core principles. - Teams can customize that foundation to reflect their own design systems and working methods. ## Example Skills and Workflows Figma highlights skills for tasks such as: - Generating component libraries from code - Creating designs from existing components and variables - Producing accessibility specifications for VoiceOver, TalkBack, and ARIA - Creating components from structured JSON contracts - Applying design systems to existing designs - Managing spacing through variables and fallbacks - Synchronizing design tokens between code and Figma - Running parallel, multi-agent design workflows ## More Predictable and Self-Correcting Output - Skills make AI behavior more consistent by encoding repeatable instructions and implementation rules. - Agents can use screenshots to identify mismatches and iteratively refine generated screens. - Because agents work with real Figma structure—components, variables, and auto layout—corrections affect the underlying design system rather than only the visual appearance. - Team conventions become active rules that agents apply during creation, rather than static documentation they merely reference. Figma’s agent workflow is most useful when teams invest in well-defined components, variables, and skills. During the beta, teams can experiment with `use_figma` and community skills to automate design work while preserving their existing design intent and system standards.

Figma Design Systems AI Agents Model Context Protocol+4

figmaMar 17, 20262 min readCurated summary

How We Rebuilt the Foundations of Component Instances | Figma Blog

Figma replaced its decade-old Instance Updater with a reactive foundation called Materializer. The change separates component resolution from layout and variable evaluation, while enabling granular updates instead of recalculating entire instance trees. Figma reports that common operations in large design systems are now up to 50% faster, and the architecture can support other dynamic features beyond components. ## Why the Original Architecture No Longer Scaled - Instance Updater was introduced around 2016 to resolve component properties, manage instance structure, and synchronize instances with their main components. - Over time, Figma added features such as: - Auto layout in 2019 - Variants in 2020 - Component properties in 2022 - Variables in 2023 - Slots, introduced as an open beta feature in 2025 - Modern instances can combine variants, variable bindings, auto layout, nested instances, variable modes, and extensive overrides. - A small edit can therefore propagate through deeply nested trees and trigger widespread recalculation. - Instance Updater accumulated specialized logic for layout, variables, and other integrations, making it increasingly fragile and slow. - In extreme cases, systems repeatedly invalidated one another, causing actions such as instance swaps or property changes to take seconds. ## The Goals of the Rewrite - Figma concluded that incremental optimization would not solve the underlying architectural problems. - The new design aims to separate responsibilities: - The instance system resolves which properties and children an instance should have. - Layout systems handle layout calculations. - Variable systems handle variable evaluation. - Updates should be granular, affecting only the portions of a tree that actually changed rather than rebuilding entire instances. - Figma also wanted reusable infrastructure for dependency tracking, reactive updates, and efficient invalidation across the editor. ## Materializer and Derived Subtrees - Figma built **Materializer**, a generic system that operates on the document tree. - Its purpose is to create and maintain **derived subtrees**—structures whose properties and hierarchy are computed from other sources of truth. - Component instances are one use case, but the same model can support features such as rich text nodes whose content is synchronized with an external CMS. - This broader abstraction allows teams to build dynamic features without embedding bespoke update logic into a single specialized runtime. The rewrite turns component instances from a monolithic synchronization problem into one application of a more general reactive system. By isolating responsibilities and invalidating only affected subtrees, Figma improves performance for complex design systems while creating a foundation for future dynamic features.

Design Systems Auto Layout Component Instances Reactive Programming+3

figmaMar 17, 20262 min readCurated summary

Design’s Influence Is Expanding, and Here’s Why That Feels Hard | Figma Blog

Design is expanding into more products, interactions, and strategic decisions, especially as AI introduces new software categories and interfaces. Although AI makes design work faster, it also increases output, expectations, and workload rather than reducing effort. This leaves designers divided: the field is growing, but many are unsure whether it is improving. ## Design’s Expanding Influence - Each technological shift—from graphical interfaces to the web and mobile apps—has increased design’s scope. - AI is creating new categories such as agent orchestration systems and answer engines. - Existing products are gaining generative, conversational, and predictive features. - Users now interact through prompts, speech, and image uploads, creating new design challenges: - Translating ambiguous input into clear intent - Making automated experiences understandable and human - Designing beyond traditional screen-by-screen navigation - Survey results show mixed sentiment: - 36% of designers think the profession has improved - 35% think it has worsened - 29% see no change - Meanwhile, 82% of hiring managers say demand for designers has increased or remained steady, though only 20% believe the industry itself is improving. ## AI Expands the Work - AI helps teams address new design problems more quickly, but it does not necessarily reduce the amount of work. - Product builders reported a 17.5% year-over-year increase in the number of tasks they perform. - Research from UC Berkeley found that AI users work faster while also taking on more tasks and working longer hours. - Workers often feel more productive without feeling less busy. ## The Jevons Paradox in Design - As AI makes creation cheaper and easier, teams produce more designs, explore more options, and iterate more deeply. - This follows the Jevons Paradox: efficiency increases can lead to greater overall consumption rather than reduced consumption. - Software development experienced a similar pattern when cloud infrastructure made releases easier, resulting in more frequent releases and redesigns. - AI has changed the rhythm and volume of design work rather than eliminating it. Designers should view AI as a force multiplier, not a shortcut to less work. Its benefits will depend on managing rising expectations and workload while developing clearer approaches to complex, automated interactions.

AI Generative AI User Experience Design Cloud Infrastructure+3

figmaMar 16, 20262 min readCurated summary

Issue no.15: The State of Design | Figma Blog

AI is reshaping design by blurring the boundary between code and canvas, while expanding—not eliminating—the need for designers. Figma’s research suggests designers are adapting to new expectations by strengthening both AI-related capabilities and enduring creative fundamentals. The future favors people who can move fluidly across tools, teams, and stages of product development. ## AI’s impact on design work - 91% of surveyed designers say AI tools are helping them improve their work. - “Better design” means different things to different designers, including: - Visual polish - More thoughtful problem-solving - More intuitive user experiences - These differing priorities influence how designers understand and experience their jobs. - Design is increasingly defined by outcomes and problem-solving rather than by a single medium. ## Design hiring remains strong - AI is not reducing demand for designers according to Figma’s research. - 82% of surveyed hiring managers say their need for designers has either remained stable or increased. - Demand is growing beyond technology companies. - Organizations are seeking designers who can help translate new AI capabilities into useful products and experiences. ## Skills for the AI era - Designers are exploring emerging practices such as: - Prompting - MCP-related workflows - Connecting AI tools and processes - Translating between design, engineering, product, and other teams - AI-specific skills complement rather than replace foundational design abilities. - Communication, judgment, craft, and the ability to understand user and business needs remain essential. - The strongest designers are likely to combine technical fluency with human-centered thinking. ## Product teams are prototyping earlier - Product managers are using Figma Make to explore ideas and build conviction more quickly. - Teams at ServiceNow, Ticketmaster, and Affirm use prototypes to: - Communicate complex product behaviors - Test and develop ideas - Make better roadmap decisions - Prototyping is becoming accessible beyond traditional design roles. ## Code and canvas converge - Ideas can begin in code, visual design, or anywhere in between. - Figma presents the future of design as a continuous movement between code and canvas. - This shift makes designers less defined by their tools and more by their ability to shape ideas across mediums. Designers should treat AI as an extension of their creative and problem-solving toolkit, while continuing to develop core design judgment, communication, and craft. The most valuable practitioners will be those who can connect AI-enabled workflows with strong product thinking and cross-functional collaboration.

Figma AI Prototyping Model Context Protocol+3

figmaMar 10, 20262 min readCurated summary

5 Design Skills To Sharpen in the AI Era | Figma Blog

AI is changing product creation by accelerating experimentation and expanding who can participate in design. Figma argues that designers should strengthen adaptable, technology-oriented skills rather than rely only on traditional craft. The first priority is becoming fluent with AI tools and learning to prompt them effectively, while maintaining human judgment and design fundamentals. ## AI Fluency and Prompting - AI skills are becoming essential for designers and increasingly important in non-design roles such as product management, development, and marketing. - More than half of designers and hiring managers consider AI design capabilities—such as rapid prototyping and “vibe coding”—important hiring skills. - Among designers who adopted AI during the past year: - 91% say it helps them create better designs. - 89% say it helps them work faster. - AI can support many activities, including: - Editing images directly within a workflow. - Building prototypes instead of writing traditional product requirements documents. - Testing assumptions and creating tangible artifacts for team alignment. ## Writing Better Prompts - Clear, structured prompts produce more reliable AI-generated results. - Figma recommends organizing prompts around: - The task - Context - Required elements - Behavior - Constraints - Prompting is presented as a repeatable design practice, not merely a way to get a one-off output. - Strong prompts help turn AI into a consistent design partner rather than an unpredictable experimentation tool. ## Broader Changes to Design Work - AI is lowering barriers to participation and blurring boundaries between product roles. - Designers are increasingly expected to work across disciplines and use AI to extend their capabilities. - Prototyping is becoming a faster way to communicate ideas, validate assumptions, and build momentum than relying solely on written documentation. Designers should build practical fluency with AI tools, practice structured prompting, and use prototypes to make ideas concrete—while applying their own judgment to guide and evaluate the results.

Figma AI Prototyping Figma Make+2