Figma

736 posts

www.figma.com/blog/engineering

Filter by tag

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

Try These 10 Skills—And Show Off Your Own | Figma Blog (opens in new tab)

Skills are plain-text Markdown instructions that help Figma’s agent apply a designer’s preferences, workflows, and judgment. The post argues that skills are useful not only for engineers but also for codifying creative approaches, such as easing curves, typography, image audits, and motion principles. Figma now lets users create, preview, edit, and iterate on skills directly in the product, with some also compatible with Figma’s MCP server. ## What Figma skills enable - Designers can create skills from: - A reference design frame - Specific instructions or guidelines - Repeated personal workflows - The agent can draft a skill, which users can preview and test in chat. - Skills can be refined by: - Editing instructions and formatting - Asking the agent for recommendations - Opening the Markdown editor for manual changes - Skills can capture individual design judgment and help teams reproduce a consistent point of view. - Some skills work with Figma’s MCP server and third-party agents. ## Examples of personal design skills - `/image-audit` checks whether images in a file can be exported and places a report on the canvas. - `/shader-starter` helps users write more effective shader prompts. - `/make-a-type-scale` creates a type scale from selected text and generates corresponding font variables. - `/ease-like-miggi` applies the author’s preferred easing curves to motion keyframes, allowing teammates to use the same motion style. ## `/xray-scan`: Create radiographic image effects Created by Adele Ix, this skill transforms a photo or description into a realistic X-ray image. - Produces two visual treatments: - Glowing white lines on black - Darker tones on white - Supports layered monochrome collages with glowing edges. - Is especially suited to combining multiple scans into a unified composition. ## `/find-animation-opportunities`: Identify missing motion Created by Emil Kowalski of Linear, this skill reviews a design and suggests where animation could improve the experience. - Identifies elements that should animate and areas that may be over-animated. - Recommends: - What should move - Where the motion should occur - Exact animation values - Suggestions can be implemented manually in Figma Motion or applied by the agent. - Works best when focused on one frame with contextual information, such as the target persona. - It can also be asked which elements should remain static. ## `/camera-pan-and-zoom`: Animate static compositions Created by Mallory Dean, this skill adds camera-like movement to a static design. - Builds a nested camera rig around selected content. - Supports pan, zoom, and roll animations. - Can create directed sequences, such as touring a grid of cards before zooming out to reveal the full composition. - The skill is intended to make static compositions feel more cinematic and dynamic. ## Practical takeaway Designers can use skills to turn personal techniques and repeatable creative decisions into reusable tools. Start with a focused workflow, test the generated skill in Figma, and refine its Markdown instructions until it reliably produces the desired result.

figma

Measuring Time Savings From Figma Make | Figma Blog (opens in new tab)

Figma’s Data Science team found that Figma Make reduced design-task completion time by 20% and made work 16% easier. Product managers benefited most, completing tasks 23% faster and reporting a 37% improvement in ease. Because ordinary A/B tests and observational analyses could not adequately control for task complexity and user experience, Figma used a randomized controlled trial (RCT) with 100 participants. ## Why Measuring AI Time Savings Is Difficult - Productivity is influenced by confounders such as: - Job tenure and career experience - Individual design ability - Task complexity - Without controlling for these factors, it is difficult to determine whether improvements come from AI or from differences among users and tasks. ## Limitations of Common Research Methods - **Online A/B testing** - Randomly assigning users to treatment and control groups helps balance user characteristics. - However, users may perform different tasks, making it difficult to ensure that task complexity is comparable. - **Causal inference using product logs** - Methods such as propensity score matching require all relevant confounders to be present in the data. - Anonymized logs cannot capture subjective factors such as a user’s design experience. - Instrumental-variable analysis requires a valid factor that influences AI usage without independently affecting task speed; Figma could not identify one. ## The Randomized Controlled Trial - RCTs were selected because they can control confounders before data collection begins. - The study combined: - Random assignment to Figma Make and control groups - Identical tasks for all participants - Moderation by trained researchers - The study focused only on Figma Make to avoid introducing variables from multiple AI tools. - Participants included 100 people: - 50 product designers - 50 product managers - The sample size was based on effect sizes from prior industry research, including GitHub Copilot RCTs, followed by a statistical power analysis. ## Findings - Overall, Figma Make: - Made design work **20% faster** - Made work **16% easier** - Product managers experienced the largest gains: - Tasks were **23% faster** - Tasks were **37% easier** The study suggests that a carefully controlled RCT is a more reliable way to measure AI’s productivity impact when task differences and user characteristics are difficult to capture in product data. Teams evaluating similar tools should standardize tasks, randomize participants, and moderate the study to separate genuine AI benefits from other sources of variation.

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

Code, Craft, and the Making of Nested Folders | Figma Blog (opens in new tab)

Figma’s nested folders feature required much more than a file-browser update: it involved rethinking content structure, permissions, sharing, administration, and core infrastructure. The team responded to changing priorities and faster AI-assisted development by replacing a sequential product process with code-led experimentation, flexible roles, and continuous collaboration. This approach helped them turn early ideas into working solutions and ship a complex, long-requested feature. ## Nested folders required foundational changes - Nested folders help growing teams organize files within shared projects. - Implementing them affected: - The file browser - Admin controls - Sharing and permissions - Figma’s underlying content model - Core infrastructure - The feature was therefore treated as a systems-level redesign rather than a simple quality-of-life improvement. ## Moving beyond the traditional product process - Initially, the team followed a conventional sequence: - Product defined requirements. - Design mapped the user experience. - Engineering started implementation after the concepts were considered complete. - Midway through the project, priorities shifted as resources were also needed for AI-native initiatives. - Tools such as Figma Make, the Figma MCP server, agent skills, codebase prototyping, and context-aware agents made it possible to begin work from prototypes, code, or even informal ideas shared in Slack. ## Leading with code - As code became faster and cheaper to produce, the team used pull requests as a way to explore product ideas. - Working prototypes and PRs helped the team test assumptions directly instead of spending too long debating theoretical solutions. - Code became a proposal and a communication tool, not merely the final implementation step. ## Flexible roles and shared ownership - Responsibilities shifted according to the problem being solved: - Engineers made design decisions. - The designer contributed code. - The product manager focused less on daily execution and more on strategic questions. - This flexibility allowed the team to respond quickly as technical and product requirements evolved. ## Replacing handoffs with conversations - Blurred roles turned team members into both students and teachers. - Instead of relying on formal handoffs between product, design, and engineering, the team collaborated continuously. - Sharing specialized knowledge and previously guarded parts of each craft helped build the trust needed to make decisions quickly. The broader lesson is that complex product work benefits from treating code, design, and product thinking as shared responsibilities. For teams building foundational features under changing conditions, early prototypes, cross-functional ownership, and ongoing conversation can be more effective than rigid sequential handoffs.

figma

AI Fluency Isn’t the Finish Line | Figma Blog (opens in new tab)

AI skills are increasingly viewed as essential, but Figma argues that tool fluency is only the starting point. As AI makes it easier to generate work, the more valuable capabilities are building shared systems, guiding teams toward decisions, and creating an environment where people can experiment together. The goal is not for one person to work dramatically faster alone, but for entire teams to move faster collectively. ## Become an Internal Product Builder - Individual AI expertise has greater impact when turned into shared tools that benefit the whole team. - Useful examples include: - Prototyping agents - Brand plugins - Shared prompt libraries - Internal prototyping playgrounds - Figma researcher Shane Johnston used AI to build an interactive website for exploring the company’s AI report data, making the information accessible to cross-functional stakeholders. - Figma’s Brand Studio created an image-effect generator in Figma Make so teammates could apply custom, on-brand textures to designs with one click. - AI enables more employees—not just engineers—to identify workflow friction and build tools that solve it. - The broader opportunity is shifting from one person working “10x faster” to the entire team becoming more productive. ## Guide People to a Decision - When AI can produce dozens of possible directions quickly, evaluating and selecting among them becomes a core product skill. - Effective facilitation requires involving the right stakeholders, including: - People with dissenting or contrarian perspectives - Colleagues with historical context - Experts who can identify operational, security, or governance risks - One team discovered that an internally vibe-coded app exposed sensitive company project information, illustrating why data governance experts should be involved early. - Teams should provide context before review meetings through: - Prototype demonstrations - Loom videos - Annotated FigJam files - At Figma, these materials help shift meetings away from explaining options and toward discussing trade-offs and making decisions. - Facilitators should ensure discussions reach a clear outcome by inviting quieter participants, clarifying vague recommendations, asking forward-moving questions, and confirming next steps. ## Share Bad Ideas - AI adoption is occurring at different speeds across teams and organizations. - The report found that: - 20% of respondents said individual contributors were advancing faster than their organizations could support. - 27% said leadership was pushing AI adoption while teams struggled to keep up. - Without deliberate knowledge-sharing and collaboration, the gap between early adopters and less experienced users can continue to widen.

figma

A Properties Panel and Annotations, Now in Figma Make | Figma Blog (opens in new tab)

Figma Make now combines visual editing with code-aware prompting through a properties panel and annotations. The properties panel handles precise visual changes, while annotations let users describe interactions and animations in context. Together, these tools reduce prompting guesswork, use fewer credits, and help ensure visual edits are reflected in the underlying code. ## Visual Editing with the Properties Panel - Users can select elements and adjust spacing, typography, layout, opacity, z-index, borders, corner radii, and other properties. - A DOM tree acts like a layers panel, making it easier to find and select elements in the code. - Multiple instances of an element can be updated simultaneously. - Edits use existing color and typography tokens from the codebase. - Each change is staged in the prompt box for review or disposal before being applied. - Applying the changes updates the underlying code and creates a new file version. - Future Code Connect integration will link Make elements to Figma Design components. ## Contextual Changes with Annotations - Users can mark one or more areas directly on the canvas and describe the desired change. - Annotations support behavior beyond basic styling, such as: - Hover zoom effects - Delayed button fades - Press effects - Full-screen navigation overlays - The agent receives the exact location and context of the selected elements, making prompts more specific. - This approach supports flexible natural-language instructions while avoiding the ambiguity of describing element locations manually. ## Credit Savings and Workflow - Direct manipulation gives the agent a precise target and requires fewer tokens than a text-only prompt. - Edits are staged without consuming credits. - Credits are used only when the user applies the changes. - The workflow keeps design experimentation, review, prompting, and code updates in one continuous process. Figma’s broader goal is to make code editing feel more like visual design. The same properties-and-annotation workflow is planned for code layers on the Figma canvas, further connecting design exploration with production code.

figma

How We Secure Figma’s Internal Systems With Agents | Figma Blog (opens in new tab)

Figma built an AI-powered security agent to reduce the manual work involved in investigating SIEM alerts. What began as a retrieval system for finding similar past incidents evolved into an agent that investigates alerts, queries security data, writes fixes, opens pull requests, and retains useful knowledge. The system reportedly reduced alert time-to-resolution by 71% and changed how security engineers handle on-call work. ## The Challenge of Internal Security Operations - Figma’s infrastructure, SaaS tools, identity systems, and employee devices change constantly. - Panther, Figma’s SIEM, monitors these systems and sends alerts to Slack while creating Asana tickets. - On-call engineers previously spent significant time gathering context: - Comparing alerts with incidents from the previous week - Checking whether an existing pull request addressed the issue - Searching Slack discussions for related investigations - Determining whether an alert was new, recurring, or already understood - Existing agent work focused on securing Figma’s codebase, but the team needed a broader system for the many issues detected by its SIEM. ## The RAG Layer: Giving Alerts Historical Context - Figma first created a retrieval-augmented generation system using: - AWS Bedrock Knowledge Bases - Amazon Kendra - Lambda handlers connected to Panther - Each Panther alert is converted into a standardized searchable document. - The system extracts structured information such as: - IP addresses - Usernames and actors - AWS account IDs from ARNs - Alert type, severity, tags, status, and timestamps - Similar alerts are retrieved semantically using the alert title, typically containing the detection name and actor username. - Searches prioritize: - Recent alerts, since investigation procedures evolve - Alerts containing actual investigation context - Comments from engineers rather than merely closed alerts ## Turning Engineer Comments into Institutional Memory - When an on-call engineer comments in a Slack alert thread, Figma captures that text and attaches it to the original alert. - Asana tickets follow a similar process. - The updated alert document is reindexed with: - The accumulated investigation comments - A `has_investigation_context` flag - Future alerts can retrieve these previous explanations and recommendations. - Engineers do not need to adopt a separate annotation workflow; their normal Slack and Asana comments become reusable knowledge. - Each useful investigation effectively makes subsequent similar alerts faster and less expensive to triage. Figma’s approach demonstrates how security agents can build on existing workflows rather than requiring entirely new ones. Starting with searchable historical context allowed the team to progressively develop a broader agentic system while turning everyday investigative work into persistent operational knowledge.

figma

Digital Tools, Human Expression: The Visual Identity Behind Config 2026 | Figma Blog (opens in new tab)

Config 2026’s visual identity used digital tools and AI to express human creativity rather than replace it. Figma’s Brand Studio built a system around evolution, fluidity, and harmony, combining expressive glyphs, imperfect textures, and structured compositions. The result connected AI-assisted making with craft, experimentation, and distinctly human irregularity across digital and physical conference spaces. ## A Visual System for Human–Machine Collaboration - The identity reflected three aspects of modern design: - **Evolution:** remixing and reinventing ideas into something new. - **Fluidity:** moving between design and code while starting from different points. - **Harmony:** using generative tools while maintaining human judgment. - The system combined: - Sketchy, generative, and crisp glyphs. - AI-prompted textures. - Structured, dynamic compositions. - The contrast between “wonky” results and programmatic digital processes represented how ideas can morph and multiply. - Particle glyphs suggested ideas spawning and generating, while clean rectangles represented more resolved concepts. - Glyphs were translated into 14-foot foam sculptures and installed around San Francisco’s Moscone Center. ## AI-Assisted Texture Generation - Figma’s Brand Studio created tools in Figma Make to codify three lo-fi visual effects: - Scribbly linework. - Blurred gradients. - Oval-shaped particles. - Images were processed through these tools to create compositions that felt surprising, hand-drawn, and imperfect. - A custom dithering tool applied a consistent pointillist treatment to hundreds of speaker portraits. - The textures balanced digital precision with human qualities such as irregularity, grain, and imperfection. - Animated versions of the textures appeared at the conference’s block party and on keynote screens. ## Designing Static and Motion Assets Together - The team developed motion and still graphics in parallel rather than treating animation as a final production step. - Motion influenced visual design, while design informed motion decisions. - Bringing glyphs to life helped the team discover new directions for the identity. - This iterative process reinforced Config’s theme of ideas evolving through experimentation and collaboration. Figma’s approach demonstrates how AI can support a strong visual identity when it is guided by human taste and craft. The practical lesson is to use generative tools to create possibilities, while preserving controlled imperfections and human judgment in the final system.

figma

How Figma Stays Ahead of Vulnerabilities With Agents | Figma Blog (opens in new tab)

Figma uses AI agents to prevent, detect, and fix vulnerabilities during code generation, pull-request review, and historical code audits. Its central strategy is a shared security policy combined with continuous measurement of precision and recall. The company began with PR review because developer feedback and replaying known bugs created the fastest improvement loop. ## A Shared Policy Across the Development Lifecycle - The same policy guides agents during: - Code generation - Pull-request review - Full-repository auditing - The policy records: - Trust boundaries - Accepted risks - Security precedents - Improving PR review first helped Figma refine the policy before applying it to other stages. ## Measuring Precision and Recall - **Precision** measures how many reported findings are genuine vulnerabilities; low precision creates false positives. - **Recall** measures how many real vulnerabilities the system detects; low recall creates false negatives. - Figma measures: - Precision through author thumbs-up or thumbs-down feedback on findings. - Recall by replaying the reviewer against commits containing known bugs. - These separate signals allow the team to improve both dimensions rather than optimizing for only one. ## AI-Assisted Pull-Request Review - Every pull request receives an automated review. - Findings are posted directly to the PR, allowing developers to respond and fix issues in context. - Figma currently runs: - Claude Code with Opus 4.8 at extra-high effort - Codex with GPT-5.6 Sol at high effort - The models identify different classes of bugs, so Figma reports a finding if either model detects one. - Reviews cost approximately $0.50 per pull request at the median. The agents have identified both sophisticated and conventional vulnerabilities, including: - A multi-step desktop-client exploit in which an injected sandbox object exposed the host realm’s `Function` constructor and enabled possible code execution. - An insecure direct object reference where an authenticated user could retrieve another organization’s invoice by supplying its ID. ## Building Trust Before Exposing Findings - Figma launched Anthropic’s Claude Code Security Reviewer in August 2025 in shadow mode. - Initial results were strong at reproducing known vulnerability root causes, but only 4 of 27 findings—about 15%—were valid. - The team prioritized precision first because developers quickly lose trust in tools that generate excessive false positives. - Figma set a practical target of at least 70% precision. - Developer-facing comments were withheld until precision exceeded that level over a two-week period without severe false positives. - Security engineers replayed the reviewer across eight weeks of historical pull requests and manually labeled incorrect findings. - Those examples were used to create and refine the shared security policy. ## Continuous Improvement Through Precedents - A **precedent** documents why a finding is valid or invalid in a particular context. - Human feedback and historical vulnerability replays feed back into the policy. - This process lets Figma improve the agent automatically rather than relying only on model changes or one-time prompt tuning. Figma’s approach treats agentic security as an engineering and measurement problem, not simply a matter of asking an AI to scan code. Organizations adopting similar systems should establish feedback loops, measure precision and recall independently, and build developer trust before making automated findings part of everyday development.

figma

Sightlines Issue no.1: Insights from Config | Figma Blog (opens in new tab)

Figma’s first *Sightlines* issue distills lessons from Config’s Leadership Collective about leading design, product, and engineering teams in the AI era. Although organizations are still experimenting with AI, core leadership principles remain unchanged: build curious teams, preserve quality, collaborate openly, and rely on human judgment. As AI accelerates production, taste and thoughtful editing become increasingly important differentiators. ## Navigating Leadership in the AI Era - Leaders are still determining how to integrate AI into products, teams, and workflows. - The central challenge is gaining AI’s speed without sacrificing quality. - Many leaders are learning alongside their teams rather than presenting themselves as having all the answers. ## Fundamentals That Still Matter - Strong leadership continues to depend on: - Curious, critical-thinking teams - High standards for craft - Clear judgment about what makes work effective - Leaders are encouraging a beginner’s mindset by: - Starting from first principles - Experimenting with new tools and processes - Prototyping directly with their teams ## Collaboration and Human Judgment - AI tools can encourage isolated, individual workflows, so leaders are emphasizing collaboration more strongly. - Effective practices include: - Open critiques and feedback - Showing work early - Debating outcomes collectively - As AI automates more creation, human “taste”—the ability to judge, refine, and select high-quality work—becomes the key differentiator. ## Lessons from Industry Leaders - Teo Connor of Airbnb argues that an increase in mediocre AI-generated work will make strong editing and creative judgment more valuable. - Jen Dunnam emphasizes designing for people rather than chasing tools, noting that human needs remain constant. - Ian Silber of OpenAI recommends trusting capable teams and accepting that leaders cannot oversee every detail. - Jeetu Patel of Cisco describes meticulous design as a way to demonstrate care and create an emotional connection with customers. The practical recommendation is to adopt AI with experimentation and openness while preserving the human practices that sustain quality: collaboration, critical thinking, empathy, strong standards, and continual cultivation of taste.

figma

Workflow Lab: Deploying Designs Directly with Figma Make | Figma Blog (opens in new tab)

Figma’s workflow connects design, production code, and team review so designers can handle small, high-impact improvements without waiting for engineering backlog prioritization. Using Figma Make with a real codebase, a designer can identify accessibility issues, implement craft-level fixes, and move the work toward a merged pull request. The approach keeps engineers focused on larger architectural work while preserving design nuance and collaboration. ## The Problem with Backlog-Driven Fixes - Minor accessibility and usability improvements often enter a backlog where they compete with larger engineering priorities. - Small changes may be too granular to prioritize but too valuable to ignore. - Written handoffs can lose important nuance, creating clarification cycles between designers and engineers. - The example organization, the fictional Museum of Speculative Futures, is simultaneously improving accessibility and rewriting its website architecture. ## A Shared Ownership Model - The product manager proposes that engineers continue handling the major rewrite. - The designer takes end-to-end ownership of lower-risk, craft-level changes. - Figma Make with production code enables the designer to work directly against the real website implementation. - The workflow is intended to take changes from the Figma canvas through team review and into a pull request without filing a ticket. ## Testing the Existing Experience - Before making changes, the designer uses the Figma agent to generate synthetic personas, including: - A first-time visitor planning a trip - A returning member - Someone navigating with a screen reader - These personas explore the site and surface obvious friction early. - The audit identifies several issues: - A confusing exhibition or visit-page label - A call-to-action that is easy to miss - A date picker that is difficult to understand - A blank state when search returns no results - The article emphasizes that synthetic personas do not replace real user research, but they can identify issues before in-person sessions. ## Reviewing Design Improvements - The designer addresses the findings directly on the canvas. - The designer, engineer, and product manager review the proposed changes together. - They agree on improvements such as: - Clearer navigation language - A more prominent call-to-action - A more usable date picker - The changes support the shared goal of making the site easier to navigate for people with different ways of experiencing the web. The recommended workflow is to reserve engineers’ time for substantial technical work while enabling designers to directly resolve small, accessibility-focused issues in production code. Figma Make, the Figma agent, GitHub integration, and canvas-based review create a path from design insight to implementation without losing context or waiting indefinitely in the backlog.

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

GPT-5.6 is Now Available in Figma Make | Figma Blog (opens in new tab)

GPT-5.6 is now available in Figma Make, where Figma says it improves both the speed and quality of AI-generated prototypes. The model is designed to produce stronger first passes, preserve existing designs more faithfully, and recover from errors without stopping. Figma’s examples suggest it can move teams from prompts or static designs to functional, responsive prototypes with less iteration. ## Faster exploration and error recovery - GPT-5.6 can turn complex prompts into working prototypes quickly, helping teams explore multiple ideas in one session. - In Figma’s stock-tracking app evaluation, it created: - An interactive dashboard - Sample prices and performance data - Keyboard shortcuts and search - A dark, gothic visual style - The model is described as more token-efficient, helping users make better use of Figma Make credits. - When builds encounter errors, GPT-5.6 can investigate and self-heal instead of stopping. Figma reports that it independently diagnosed and fixed a blank build. ## Faithful design-to-code conversion - GPT-5.6 can build prototypes from existing design specifications or Figma Design files. - In a nature sound player test, it preserved: - Layout and visual hierarchy - Spacing, proportions, and styling - A multi-track timeline and sound library - It also implemented functional interactions, including: - Play, pause, and skip controls - Working audio playback - Multiple playable tracks - Audio-responsive visual effects ## Higher-quality first passes - Figma says GPT-5.6 produces polished initial prototypes with functional interactions and responsive layouts. - A bookshelf e-commerce example included: - Product descriptions, measurements, and care information - Populated information dropdowns - An interactive product photo library - A clickable navigation menu - The prototype adapted reliably across different screen sizes without additional prompting. - Stronger first passes allow teams to spend more time refining ideas collaboratively rather than repairing basic implementation problems. GPT-5.6 is available through Figma Make’s model selector. Users can select it directly in Make and consult Figma’s help center for guidance on choosing and using AI models.

figma

How to Lead Design Teams Through the AI Era | Figma Blog (opens in new tab)

Jen Dunnam argues that design leaders should respond to AI-driven change with calm, deliberate experimentation rather than panic. The fundamentals of design remain human-centered, so teams should prioritize clear thinking, strong principles, and the ability to turn insights into products. Her approach emphasizes investing in emerging talent while hiring and developing designers who can challenge assumptions. ## Lead with Calm - Leaders should steady their teams instead of adding to the urgency already felt by ambitious designers. - Break AI-related change into manageable steps: - Choose an approach. - Experiment with appropriate tools. - Refine design principles. - Learn from the results. - Designers should avoid chasing every new capability simply because it is novel or impressive. - AI may transform workflows, but designing for human needs remains the central responsibility. ## Hire for Critical Thinking - Dunnam would invest more heavily in designers fresh out of school, many of whom are disadvantaged by today’s pressure to ship quickly. - Pair early-career designers with experienced practitioners who can help turn ideas into shippable products. - Look for researchers who can move beyond gathering insights and contribute decisively to product direction. - Critical thinking has become especially valuable as AI tools make polished but potentially shallow solutions easier to produce. - Interviewers should ask candidates: - Where did they disagree with a stakeholder? - How did they push back? - What product decision still bothers them? - These questions reveal whether candidates can challenge attractive but poorly reasoned solutions. Dunnam’s practical recommendation is to keep teams grounded in human-centered design, combine emerging and experienced talent, and hire people with the judgment to question what appears easy, polished, or technologically exciting.