Figma’s Design Agent, Now With Custom Tools and Greater Context | Figma Blog (opens in new tab)

Figma’s design agent is expanding beyond prompt-based assistance into a more context-aware collaborator that understands a team’s workflows and design conventions. In open beta, it can create reusable generative plugins, shader effects, and shader fills directly on the canvas, giving designers more control without requiring traditional development setup. The result is a more personalized and expressive design process that combines AI assistance with native Figma workflows.

Context as the Foundation for Collaboration

• Figma argues that context separates a merely productive agent from one that understands how a team works.
• With knowledge of a team’s methods, the agent can collaborate rather than simply generate outputs.
• Greater context also enables tools and visual effects tailored to specific design practices.

Build Custom Generative Plugins

• Designers can prompt the agent to create reusable plugins without setting up a traditional development environment.
• Plugins can support tasks such as:
  • Importing HTML onto the canvas
  • Generating dashboard layouts
  • Organizing image assets
  • Visualizing data
• Generative plugins use PropsKit, helping them look and behave like native Figma tools.
• Because they operate directly on the canvas, designers can iterate interactively.
• Classic plugins remain necessary for workflows involving external services, AI systems, or third-party APIs.
• Plugins created by the user, teammates, or the Figma Community are free and available on all plans; asking the agent to create them will consume AI credits once the feature is generally available.

Create Shader Effects and Fills

• The agent can generate WebGPU-powered shaders: small programs that control how pixels are rendered.
• Shader effects function similarly to native Figma effects and can be:
  • Customized through parameters
  • Stacked together
  • Combined with native effects
• Possible effects include particle stretching, lens distortion, color outlines, dither, liquid metal, and fractal noise.
• Shader fills generate dynamic visuals beyond solid colors and gradients, including:
  • Watercolor
  • Moiré patterns
  • Pattern grids
  • Halftone effects
  • Particle webs
  • Magnetic fields
• Designers can use shaders to create reusable visual workflows for applications such as collage, marbling, light leaks, embossing, and prism effects.

Designer-Controlled, Agent-Assisted Workflows

• Product designer Edward Chechique used the agent to create generative tools that previously required developer assistance or switching between separate AI tools.
• Creative technologist Anna Zhang used the agent to build custom image-remixing shaders while focusing on functionality and refining the interface collaboratively.
• Figma presents the process as an iterative dialogue: the agent proposes solutions, while the designer guides the parameters and creative direction.
• The tools are intended to help designers turn personal techniques into reusable workflows that can be shared with teams.

Figma’s update positions the design agent as both a creative assistant and a tool-building partner. Designers should use it to prototype custom plugins and visual systems directly in Figma, while relying on classic plugins when external integrations are required.