{"slug": "figma-now-has-ai-motion-graphics-and-shader-tools", "title": "Figma now has AI motion graphics and shader tools", "summary": "Figma announced new AI-powered motion graphics and shader tools at its Config conference, enabling users to create animations and visual effects via text prompts. The updates also include code layers for direct coding on the design canvas and AI agents for automating repetitive tasks.", "body_md": "Figma has unveiled some new design and coding product updates at its [annual Config conference](https://config.figma.com/) that aim to help creatives “push their ideas further” and automate tedious tasks with AI. Part of this is a reimagined canvas that’s now optimized for full-stack development, according to Figma, bringing teams, [AI agents](/news/783828/figma-make-ai-app-coding-mcp-server-update), tools, and materials “together in one place.”\n\n# Figma now has AI motion graphics and shader tools\n\nYou can also work directly with code on the Figma Design canvas, thanks to code layers.\n\nYou can also work directly with code on the Figma Design canvas, thanks to code layers.\n\nNotable callouts include coding layers that let you tweak the code of your projects without leaving the Figma Design canvas, and AI-generated motion graphics effects, which allow you to make animations and transition effects by simply describing them to Figma’s chatbot interface. You can read more about all the new product updates over on [Figma’s website](https://www.figma.com/newsroom/).\n\nOtherwise, here’s Figma’s overview of everything that was announced:\n\nNew creative materials to express ideas●\n\nCode layers: Work directly with code on the Figma Design canvas. Clone repositories, generate new directions with[Figma’s agent,]extract flows into editable design layers, and sync changes back to code.●\n\nMotion: Design animations, transitions, and 3D transforms collaboratively, directly from Figma. Prompt to create animations with AI, apply preset styles, or adjust manually on a timeline. Motion is connected to design systems, code-backed, and ready to ship.●\n\nShaders: Prompt to build shader effects and fills, custom visual treatments powered by WebGPU. Effects that weren’t available in Figma before, like dither, pixelate, and various blur types can now be created directly on the canvas.●\n\n[: Generate consistent and high-quality visuals in Figma with 20 plus integrated Weave tools, turning complex AI workflows into simple tools on the canvas. This is the first step towards a full integration between Figma and Figma Weave, expected later this year.]Figma Weave workflows\n\nNew intelligent tools for teams and agents to collaborate●\n\nAgent skills and deeper context: Turn repetitive work into skills that entire teams can use to work more precisely and consistently with Figma’s agent. Bring in more context with third party connectors, web search, and file attachments.●\n\nGenerative plugins: Extend Figma’s capabilities by building custom, reusable plugins with the agent. Turn prompts into tools that can be tweaked and shared — no developer setup or technical skills required.\n\n**Follow topics and authors** from this story to see more like this in your personalized homepage feed and to receive email updates.", "url": "https://wpnews.pro/news/figma-now-has-ai-motion-graphics-and-shader-tools", "canonical_source": "https://www.theverge.com/tech/955831/figma-code-design-tools-config-2026-announcements", "published_at": "2026-06-24 16:15:00+00:00", "updated_at": "2026-06-24 16:23:21.698086+00:00", "lang": "en", "topics": ["generative-ai", "ai-tools", "ai-agents", "computer-vision"], "entities": ["Figma", "Config", "WebGPU", "Figma Weave"], "alternates": {"html": "https://wpnews.pro/news/figma-now-has-ai-motion-graphics-and-shader-tools", "markdown": "https://wpnews.pro/news/figma-now-has-ai-motion-graphics-and-shader-tools.md", "text": "https://wpnews.pro/news/figma-now-has-ai-motion-graphics-and-shader-tools.txt", "jsonld": "https://wpnews.pro/news/figma-now-has-ai-motion-graphics-and-shader-tools.jsonld"}}