--- title: Behind the build: Generative plugins and shaders at Figma description: Figma's Product Designer Rogie King recounts the behind-the-scenes story of building generative plugins and shaders, a feature announced at Config 2026 that... canonical: https://daily.dev/posts/behind-the-build-generative-plugins-and-shaders-at-figma-jy1gzcfgy twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Behind the build: Generative plugins and shaders at Figma | daily.dev og:description: Figma's Product Designer Rogie King recounts the behind-the-scenes story of building generative plugins and shaders, a feature announced at Config 2026 that... og:url: https://daily.dev/posts/behind-the-build-generative-plugins-and-shaders-at-figma-jy1gzcfgy og:image: https://api.daily.dev/og/posts/JY1GzCfGy.png og:image:alt: Behind the build: Generative plugins and shaders at Figma og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Behind the build: Generative plugins and shaders at Figma **[Figma](https://daily.dev/sources/figma)** · 10 min read · 0 upvotes · 0 comments ## Summary Figma's Product Designer Rogie King recounts the behind-the-scenes story of building generative plugins and shaders, a feature announced at Config 2026 that lets users create custom tools and shader effects on the canvas using AI agents. The narrative covers how a vibe-coded WebGPU prototype evolved into a production feature built with rendering engineer Yassir Solomah and PM Georgia Rust, the shift from a WebGL 2 fragment shader system to a WebGPU pipeline, the creation of PropsKit (a web-components UI kit for agents), and the team's compressed two-month timeline to ship by Config. New updates launching include community and private publishing of plugins/shaders, animated and interactive shaders, code access/export to third-party agents, and MCP server integration for viewing and editing shaders via coding agents. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What new capabilities did Figma add to generative plugins and shaders after Config 2026? Figma added community and private publishing of AI-generated plugins and shaders, animated and interactive shaders with built-in motion and interactivity, code access to view and download the underlying shader or plugin code, and updates to the Figma MCP server so agents can view and modify generative plugins and shaders or export them to React code. _Designers tracking AI-driven design tool updates can follow feature rollouts like this on daily.dev._ ### What technology stack powers Figma's shader system under the hood? Figma's shader system runs on a WebGPU pipeline that replaced an earlier WebGL 2 fragment shader system. This lets shaders act as miniature sandboxed programs capable of rendering 3D objects, running compute shaders, particle systems, and reacting to mouse position and time, while keeping user-run scripts isolated for safety and performance. _Engineers evaluating WebGPU versus WebGL for canvas rendering can compare real-world tradeoffs on daily.dev._ ### What is PropsKit in the context of Figma's design agent? PropsKit is a web components-based Figma UI kit built by Rogie King so that AI agents could generate interface controls that look and feel like native Figma UI. It was created specifically to give shaders a consistent, agent-usable API since shaders needed an entirely new interface distinct from Figma's existing plugin API. _Developers building agent-compatible UI kits can find related design-tool engineering stories on daily.dev._ ## Similar posts on daily.dev - [Figma’s design agent, now with custom tools and greater context](https://daily.dev/posts/figma-s-design-agent-now-with-custom-tools-and-greater-context-hpie0dmez) · Figma · 0 upvotes · 0 comments - [Config 2026: New materials, new tools and a more expressive canvas](https://daily.dev/posts/config-2026-new-materials-new-tools-and-a-more-expressive-canvas-mtp8laipq) · Figma · 1 upvotes · 0 comments --- Tags: [#game-development](https://daily.dev/tags/game-development), [#genai](https://daily.dev/tags/genai), [#figma](https://daily.dev/tags/figma), [#vibe-coding](https://daily.dev/tags/vibe-coding), [#webgpu](https://daily.dev/tags/webgpu) [View this post on daily.dev](https://daily.dev/posts/behind-the-build-generative-plugins-and-shaders-at-figma-jy1gzcfgy) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Behind the build: Generative plugins and shaders at Figma","url":"https://daily.dev/posts/behind-the-build-generative-plugins-and-shaders-at-figma-jy1gzcfgy","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/behind-the-build-generative-plugins-and-shaders-at-figma-jy1gzcfgy"},"datePublished":"2026-09-01T17:10:22.269Z","dateModified":"2026-09-01T17:50:59.281Z","description":"Figma's Product Designer Rogie King recounts the behind-the-scenes story of building generative plugins and shaders, a feature announced at Config 2026 that...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2536257a21be67799802c574908055b5?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2536257a21be67799802c574908055b5?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Figma","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Figma","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d81fd85ddaea4d25a658694de448118f","url":"https://daily.dev/sources/figma"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/behind-the-build-generative-plugins-and-shaders-at-figma-jy1gzcfgy","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"game-development,genai,figma,vibe-coding,webgpu","timeRequired":"PT10M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Figma","item":"https://daily.dev/sources/figma"},{"@type":"ListItem","position":3,"name":"Behind the build: Generative plugins and shaders at Figma"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/behind-the-build-generative-plugins-and-shaders-at-figma-jy1gzcfgy#faq","mainEntity":[{"@type":"Question","name":"What new capabilities did Figma add to generative plugins and shaders after Config 2026?","acceptedAnswer":{"@type":"Answer","text":"Figma added community and private publishing of AI-generated plugins and shaders, animated and interactive shaders with built-in motion and interactivity, code access to view and download the underlying shader or plugin code, and updates to the Figma MCP server so agents can view and modify generative plugins and shaders or export them to React code. Designers tracking AI-driven design tool updates can follow feature rollouts like this on daily.dev."}},{"@type":"Question","name":"What technology stack powers Figma's shader system under the hood?","acceptedAnswer":{"@type":"Answer","text":"Figma's shader system runs on a WebGPU pipeline that replaced an earlier WebGL 2 fragment shader system. This lets shaders act as miniature sandboxed programs capable of rendering 3D objects, running compute shaders, particle systems, and reacting to mouse position and time, while keeping user-run scripts isolated for safety and performance. Engineers evaluating WebGPU versus WebGL for canvas rendering can compare real-world tradeoffs on daily.dev."}},{"@type":"Question","name":"What is PropsKit in the context of Figma's design agent?","acceptedAnswer":{"@type":"Answer","text":"PropsKit is a web components-based Figma UI kit built by Rogie King so that AI agents could generate interface controls that look and feel like native Figma UI. It was created specifically to give shaders a consistent, agent-usable API since shaders needed an entirely new interface distinct from Figma's existing plugin API. Developers building agent-compatible UI kits can find related design-tool engineering stories on daily.dev."}}]} ```