TechPrufer
Get started
Figma
Figma logoFigma · Feature trail

Figma Make Visual Editor

15 posts · May 2026 – Oct 2026

What this trail covers

The Figma Make Visual Editor continues to evolve, enhancing AI-powered design-to-code workflows. This iteration focuses on expanding the agent's capabilities with custom tools, greater context, and reusable skills. The agent can now generate custom plugins and shader effects/fills, leveraging WebGPU for rendering. It integrates more deeply with external tools and Figma files to understand project context, brand, and ways of working. Custom skills allow for saving and sharing repeatable workflows. The Figma agent is now directly integrated into the canvas and left rail, offering deep context on design systems, components, tokens, and best practices. It allows for starting prompts from any layer, parallel prompting, and simultaneous editing with the agent. The agent automates busywork like bulk edits, renaming variables, swapping components, and populating designs with realistic content. It also assists in documenting design systems by updating descriptions, tags, and use cases, and standardizing naming conventions. Furthermore, the agent helps process feedback by summarizing themes, identifying next steps, and pressure-testing designs from different perspectives.

All Figma trails
  1. 3 ways product designers use the Figma agent for craft, speed, and creative expressionThis post details the evolution of the Figma agent, focusing on its integration with custom tools, enhanced context awareness, and the introduction of reusable skills. Key improvements include better output quality, instruction following, and handling of longer tasks, with a reported ~60%+ win rate in human-graded evaluations. New capabilities allow users to add markdown guidelines for design system context, leverage the agent to find and insert context from various Figma products (FigJam, Slides, Design), and follow collaborators' agent work in real-time. The post highlights specific use cases and skills, such as documenting design systems with `/create-anatomy` and `/create-color`, automating busywork with `/do-try-consider` and `/ui-state-expander`, and making designs expressive with `/shader-starter`, `/ease-like-miggi`, and `/find-animation-opportunities`.
  2. How to lighten design system upkeep with the Figma agentThis post details how the Figma agent can be leveraged to automate design system maintenance. It outlines specific agent capabilities for documenting components (e.g., generating do's and don'ts, visual examples, API recommendations), auditing designs for adherence to system components and tokens, and performing cleanup tasks like standardizing naming conventions and checking token usage. It also mentions the use of skills to package these workflows.
  3. Workflow lab: Staying in the flow with Figma’s agentThis post details how the Figma agent is used to maintain design system consistency by repairing library usage (replacing deprecated components and variable bindings) and generating component enhancement specifications. It also describes the agent's use in compliance reviews by referencing external documentation and identifying potential risks. The agent's ability to automate 'busywork' like file maintenance and spec generation is highlighted, allowing designers to focus on core design decisions.
  4. How Coinbase used Code Connect to guide agents and shrink token costsCoinbase adapted their agentic workflows by modernizing Code Connect mappings for their design system components. This involved using an agentic workflow with Claude Code and the `figma-code-connect` skill to migrate hundreds of components. They conducted an evaluation comparing agent output with and without Code Connect, measuring token usage, task duration, and code quality. The results showed significant cost and time savings, attributed to Code Connect providing better context to agents, reducing the need for them to search and guess component implementations.
  5. Behind the build: Generative plugins and shaders at FigmaThis post details the technical implementation and evolution of generative plugins and shaders within Figma. It covers the shift to WebGPU for shaders, enabling composability, editor ergonomics with dynamic controls, and agentic creation. It also discusses the development of PropsKit, a web components-based UI kit for agents, and the integration with the Figma MCP server for code access and export to React.
  7. Workflow lab: Moving between design and code with agentsThis post details how Figma's MCP server and Code Connect are used to provide richer context to coding agents. It introduces the use of `generate_diagram` for planning in FigJam, `search_design_system` to find existing components, and `get_variable_defs` to detect and resolve design drift. The workflow demonstrates how agents can leverage design system components and tokens to generate more accurate and production-ready code, reducing rework and improving the design-to-code handoff.
  8. Try these 10 skills—and show off your ownThis post introduces 'skills' as a new mechanism for users to define and share custom agent behaviors within Figma. It details how these skills, written as markdown files, enable users to guide the Figma agent for specific tasks such as image auditing, shader prompting, type scale generation, motion design application, component documentation, color token mapping, component analysis, UI state expansion, design critique, and usability testing guide creation. It highlights the collaborative aspect of skills, allowing teams to share their best practices and prompts, and mentions their integration with Figma's MCP server for use in third-party agents.
  9. Measuring time savings from Figma MakeThis post details the methodology and results of a randomized controlled trial (RCT) designed to measure the time savings and ease of use provided by Figma Make. It explains the challenges of measuring AI impact due to confounders and why traditional methods like A/B testing and causal inference on log data were insufficient. The post outlines the RCT design, including participant selection (50 designers, 50 PMs), task design (social media post editing, dark mode conversion, adding menu options, comment fly-up interaction), and moderation script. Key findings include an overall 20% reduction in time to task completion, 16% improvement in task ease, and 15% improvement in perceived usability. Product Managers saw greater gains (23% time savings) and benefited more from simpler tasks, while Product Designers saw improvements on more complex tasks. The post also discusses the use of hypothesis testing and OLS regression for analysis.
  10. Better code, fewer tokens: The benefits of Code Connect in MCPThis post details the quantitative benefits of integrating Code Connect with Figma's MCP server for coding agents. It quantifies improvements in median task duration (-19.6%), code quality (+1 on a 1-4 Likert scale), and token usage (-29.5%) when agents leverage Code Connect for production-relevant code snippets instead of generating UI from primitives. It also outlines the evaluation methodology, including the use of two design systems (SDS and FPL) and LLM judges, and discusses the impact of Code Connect coverage on these metrics.
  11. A properties panel and annotations, now in Figma MakeIntroduced a properties panel for direct visual editing of design elements (spacing, typography, layout, z-index, border style) within Figma Make, allowing for more precise control than text prompts. Also added annotations for contextual prompting of AI agents for interactions and animations, enabling users to mark focus areas and describe desired changes. Edits are staged and credit-free before application, with credit consumption upon applying changes. The properties panel integrates with existing design tokens and will link to Figma Design components via Code Connect in the future. The DOM tree is now visible, and elements can be selected for bulk updates.
  12. Workflow lab: Deploying designs directly with Figma MakeThis post details a workflow where designers use Figma Make, connected to a production GitHub repository, to directly implement and deploy small design and accessibility fixes. It highlights the use of Figma's agent for generating synthetic personas to gather feedback, and the ability to annotate accessibility requirements (like aria-labels and focus order) directly within the Make environment, which are then included in the pull request. This workflow bypasses traditional ticketing systems for minor changes, allowing for faster iteration and embedding design decisions directly into the codebase's history.
  13. GPT-5.6 is now available in Figma MakeThis post introduces GPT-5.6 to Figma Make, detailing its improvements in generating prototypes from prompts and existing designs. Key technical aspects highlighted include: enhanced quality and speed of initial builds, improved self-healing for errors, faithful replication of existing design elements (layout, hierarchy, styling, interactions), and the ability to produce polished, responsive first passes for complex e-commerce sites. The post also provides example prompts demonstrating these capabilities.
  14. Got skills? Make the Figma agent a better collaboratorThis post introduces and details the concept of 'skills' for the Figma agent, which are reusable sets of instructions written in plain English that teach the agent specific team workflows and expertise. It explains how skills complement design systems by layering on team-specific knowledge such as brand voice, compliance guidelines, and critique processes. Examples of skills include simulating stakeholder feedback, upholding UX writing standards, and providing a new user's perspective. The post also highlights how skills can streamline recurring team rituals like onboarding, project preparation, and critique recaps. Furthermore, it emphasizes the integration of skills with MCP connectors to interact with external tools (Slack, Notion, Asana) for context retrieval and task management, and mentions future MCP server support for skills to extend workflows beyond Figma. The post also notes the default sharing of agent chats in collaborative files to foster learning.
  15. Code on the Figma canvasThis post introduces 'code layers' on the Figma canvas, allowing interactive code to be directly integrated and iterated upon within design files. It details how users can add code layers from the toolbar, generate them from existing frames using an agent, or import entire codebases. The functionality allows for comparing design alternatives by moving elements and receiving immediate code responses, and for extracting designs back into editable Figma layers. It also highlights collaborative features where teammates can comment and prompt against the same code layer.
  16. Figma’s design agent, now with custom tools and greater contextThis post details the expansion of the Figma design agent with custom tools and enhanced context. Key technical contributions include: the ability for the agent to generate custom plugins and shader effects/fills (leveraging WebGPU), improved context integration through direct file attachments, Figma file references, web search, and MCP connectors to external tools (GitHub, Atlassian, Slack, Linear, Hex). It also introduces custom skills for creating reusable workflows and sharing them within teams, and makes iteration history visible to collaborators by default. This represents a significant step in agentic workflows for design, moving beyond simple generation to collaborative tool creation and context-aware assistance.
  17. The Figma design agent is hereThis post introduces the Figma agent, a new capability integrated directly into the Figma canvas and left rail. This agent provides deep context on design systems, components, tokens, and best practices, enabling users to start prompts from any design layer, perform parallel prompting, and iterate simultaneously with the agent. It automates busywork such as bulk edits, applying design systems, and populating designs with realistic content. The agent also aids in design system documentation by updating component descriptions, tags, and use cases, and standardizing naming conventions. Additionally, it assists in processing feedback by summarizing themes, identifying actionable next steps, and modeling different stakeholder perspectives. The agent works alongside the MCP server and use_figma capabilities for seamless code-to-canvas and canvas-to-code workflows.
  18. What the design-to-code loop unlocksThis post details how AI is collapsing the distance between design and engineering by enabling a more semantic translation between canvas and code. It introduces a bidirectional workflow where designers can take code to canvas and developers can take canvas to code, making teams more self-serve. It also highlights the ability to import real data into Figma for higher fidelity and closer synchronization between design and code, and discusses how AI agents can accelerate large-scale code refactoring and development tasks.