# figma Published articles for figma. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Try these 5 Weave tools--and share your own DevFeed: [Try these 5 Weave tools--and share your own]() Original publisher: [Read original article]() Author: Moran Michelle Dankner Published: 2026-09-16T12:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Figma Community](), [Generative AI](), [Large Language Model]() Tags: [figma](), [figma-community](), [generative-ai](), [llm]() ### AI overview Figma announces community publishing for Weave tools and highlights five examples, including tools for room rendering, headshot creation, embroidery-style illustrations, and branded seals. The article also describes how creators build tools for their workflows. ### Source excerpt Community publishing is now live for Weave tools. Here are a few tools that stand out, from turning a moodboard into a realistic room mockup to previewing your next nail set. ## Figma Is Turning Designers Into Plugin Makers DevFeed: [Figma Is Turning Designers Into Plugin Makers]() Original publisher: [Read original article]() Author: Alex Harper Published: 2026-09-14T15:30:00Z Content type: article Language: en Sources: [Web Designer Depot]() Topics: [Figma](), [Figma plugin](), [Artificial Intelligence](), [shaders](), [shader programming](), [Programming]() Tags: [ai](), [ai-design-tools](), [ai-for-designers](), [ai-plugins](), [artificial-intelligence](), [creative-software](), [design-automation](), [design-tools](), [figma](), [figma-agent](), [figma-ai](), [figma-community](), [figma-plugin](), [figma-plugins](), [figma-shaders](), [future-of-design](), [generate](), [generative-ai](), [generative-plugins](), [no-code-tools](), [procedural](), [shader-programming](), [shaders](), [ui-design](), [ux-design](), [web-design](), [web-development]() ### AI overview Figma is enabling designers to describe and generate coded plugins with AI instead of searching for existing tools. The article explains that these plugins can solve highly specific workflow problems, be published to the Figma Community or shared privately, and include features such as bulk restyling, type-ramp generation, layer renaming, and prototype-flow checking. Figma also offers AI-generated shaders for procedural and interactive visual effects, with code inspection available for shaders and self-created generative plugins. ### Source excerpt Figma is turning a wild idea into reality: instead of searching for the perfect plugin, you can just ask AI to build it. If this catches on, designers may stop choosing the tools in their software--and start inventing them on demand. ## 🎙 How I AI: How two SpaceXAI designers use Grok Bot to do their jobs DevFeed: [🎙 How I AI: How two SpaceXAI designers use Grok Bot to do their jobs]() Original publisher: [Read original article]() Author: Lenny Rachitsky Published: 2026-09-14T15:03:48Z Content type: article Language: en Sources: [Lenny's Newsletter]() Topics: [Artificial Intelligence](), [Bot](), [Figma](), [Model Context Protocol (MCP)](), [Google]() Tags: [agents](), [ai](), [ai-agents](), [designers](), [figma](), [google](), [mcp](), [podcast]() ### AI overview This podcast episode features SpaceXAI designers John Bai and Peng Zheng describing how they use Grok Bot and AI agents in their design work. Peng demonstrates a self-updating personal site whose workflow handles location lookup, custom 3D artwork, and publishing. John describes using voice memos, Figma, and an MCP connection to create design assets and prototypes. ### Source excerpt Your weekly listens from How I AI, part of the Lenny's Podcast Network ## How Grok Bot designers use AI agents to build personal sites and product prototypes | John Bai & Peng Zheng DevFeed: [How Grok Bot designers use AI agents to build personal sites and product prototypes | John Bai & Peng Zheng]() Original publisher: [Read original article]() Author: Claire Vo Published: 2026-09-14T12:04:39Z Content type: article Language: en Sources: [Lenny's Newsletter]() Topics: [Artificial Intelligence](), [Figma](), [coding](), [Website]() Tags: [agents](), [ai](), [ai-agents](), [design](), [figma](), [mcp](), [prototype]() ### AI overview A 42-minute podcast episode featuring Grok Bot designers John Bai and Peng Zheng, who discuss using AI agents to update personal websites, automate design work in Figma, and turn ideas into working prototypes. ### Source excerpt Watch now (42 mins) | 🎙 Two designers at SpaceXAI show me how they use Grok Bot to run Figma from the gym, update a portfolio with one photo, and turn shower thoughts into working prototypes ## Building Depth: Designing and Developing a 3D Renderer Inside Figma DevFeed: [Building Depth: Designing and Developing a 3D Renderer Inside Figma]() Original publisher: [Read original article]() Author: Aleksei Kipin Published: 2026-09-13T11:34:39Z Content type: article Language: en Sources: [Codrops]() Topics: [Figma 3D renderer](), [Figma]() Tags: [3d](), [3d-design](), [3d-modeling](), [3d-renderer-for-figma](), [3d-rendering](), [3d-visualization](), [3d-workflow](), [articles](), [case-study](), [creative-development](), [depth-3d-renderer](), [depth-figma](), [depth-figma-plugin](), [design-engineering](), [design-tools](), [figma](), [figma-3d](), [figma-3d-renderer](), [figma-plugin](), [figma-plugin-design](), [interactive-3d](), [plugin-development](), [product-design](), [product-design-case-study](), [real-time-rendering](), [three-js](), [ui-design](), [ux-design](), [visualization](), [webgl](), [workflow]() ### AI overview An article about building Depth, a Figma plugin for quickly rendering 3D models during design work. It describes the workflow, plugin architecture, rendering behavior, and export approach. ### Source excerpt A look at how Depth came together, from building a 3D renderer inside Figma to designing a website that explores what it can do. ## Figma launches data residency in Japan DevFeed: [Figma launches data residency in Japan]() Original publisher: [Read original article]() Author: Figma Published: 2026-09-11T15:25:00Z Content type: release Language: en Sources: [Figma Blog]() Topics: [Figma](), [data]() Tags: [availability](), [collaboration](), [data](), [data-management](), [enterprise](), [figma](), [financial-services](), [healthcare](), [hosting](), [japan](), [launch](), [product-development](), [public-sector](), [security]() ### AI overview Figma launches data residency in Japan, allowing enterprise customers to host Figma file data domestically. The announcement highlights data protection, security, and data management needs across sectors including the public sector, healthcare, and financial services. ### Source excerpt Figma strengthens data protection and security for enterprise customers with local data hosting. ## Adobe Is Testing Project Oasis, a Web-Based Design App, and Accepting Applications for Early Access DevFeed: [Adobe Is Testing Project Oasis, a Web-Based Design App, and Accepting Applications for Early Access]() Original publisher: [Read original article]() Author: Alex Harper Published: 2026-09-08T20:24:25Z Content type: news Language: en Sources: [Web Designer Depot]() Topics: [Web](), [App](), [Artificial Intelligence]() Tags: [adobe](), [adobe-ai](), [adobe-beta](), [adobe-early-access](), [adobe-illustrator](), [adobe-project-oasis](), [ai](), [ai-design-tools](), [app](), [apply](), [artificial-intelligence](), [brand-design](), [branding](), [creative-ai](), [creative-tools](), [design-software](), [design-tools](), [designer-resources](), [figma](), [graphic-design](), [news](), [project-oasis](), [web](), [web-based-design](), [web-design]() ### AI overview Adobe is testing Project Oasis, a browser-based graphic design app with a brand-aware AI focus. Designers working on branding and marketing can apply for early access, but the beta is under NDA and Adobe has not disclosed detailed features, pricing, screenshots, or a launch date. ### Source excerpt Adobe is quietly testing a mysterious new web-based design tool called Project Oasis--and designers can apply to get inside. Details are scarce, the beta is under NDA, and Adobe isn't showing much yet... which only makes us want in more. ## Hands-on GPT-6 Astra review covering computer use, coding, hardware, Blender, and desktop app projects DevFeed: [Hands-on GPT-6 Astra review covering computer use, coding, hardware, Blender, and desktop app projects]() Original publisher: [Read original article]() Author: Claire Vo Published: 2026-09-03T19:34:20Z Content type: opinion Language: en Sources: [Lenny's Newsletter]() Topics: [gpt-6-astra](), [Artificial Intelligence](), [computer-use](), [coding](), [blender](), [Figma](), [codex]() Tags: [ai](), [blender](), [codex](), [coding](), [computer-use](), [figma](), [gpt-6-astra]() ### AI overview A hands-on review of GPT-6 Astra covering computer use, browser-based QA, coding projects, a hardware hack, Blender 3D asset creation, and a Mac app. The episode also discusses speed, cost, and whether Astra is suitable as a daily driver. ### Source excerpt Watch now | 🎙 My hands-on GPT-6 Astra review covers real production work in Figma, Flora, and Adio, one-shot coding wins 5.6 and Fable couldn't match, and a hardware hack I've chased for months ## How Coinbase used Code Connect to guide agents and shrink token costs DevFeed: [How Coinbase used Code Connect to guide agents and shrink token costs]() Original publisher: [Read original article]() Author: Jenny Xie Published: 2026-09-02T20:28:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Model Context Protocol](), [AI-assisted coding](), [Code quality](), [Accessibility](), [Cryptocurrency]() Tags: [accessibility](), [agents](), [code](), [coding](), [coinbase](), [cost](), [cryptocurrency](), [figma](), [mcp](), [mcp-server](), [tokens](), [web]() ### AI overview The Coinbase Design System team evaluated Code Connect in Figma's MCP server with coding agents. The article reports improved adherence to the design system, better code quality, and an average 22.5% reduction in token costs when converting Figma designs into code. ### Source excerpt The Coinbase Design System team put Code Connect to the test against coding agents--and found that it boosted design system adherence while cutting token costs by an average of 22.5%. ## Behind the build: Generative plugins and shaders at Figma DevFeed: [Behind the build: Generative plugins and shaders at Figma]() Original publisher: [Read original article]() Author: Rogie King Published: 2026-09-01T14:39:43.296000Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Artificial Intelligence](), [Model Context Protocol](), [GPU](), [webgpu](), [Large Language Model](), [Code](), [React Native]() Tags: [agent](), [ai](), [code](), [collaboration](), [community](), [design](), [figma](), [generative](), [gpu](), [llms](), [mcp](), [mcp-server](), [product](), [react](), [shaders](), [tools](), [webgpu]() ### AI overview Figma describes how generative plugins and shaders expand creative control through prompting, custom tools, richer context, animated effects, code access, community publishing, and MCP integration. The article connects GPU-based real-time pixel manipulation with AI-assisted movement between design and code. ### Source excerpt Starting today, you'll have more creative control over generative plugins and shaders, and a way to share what you've made with the community. Product Designer Rogie King tells the story of how we got here. ## Workflow lab: Moving between design and code with agents DevFeed: [Workflow lab: Moving between design and code with agents]() Original publisher: [Read original article]() Author: Riccardo Erra Published: 2026-08-26T22:00:00Z Content type: tutorial Language: en Sources: [Figma Blog]() Topics: [Figma](), [AI-assisted coding](), [dev-tools](), [Code](), [Pull Request]() Tags: [agents](), [ai](), [code](), [coding](), [design-systems](), [dev-tools](), [developers](), [figma](), [ui](), [workflow]() ### AI overview This workflow lab shows how designers and developers can use Figma, Figma dev tools, and coding agents to keep design and code aligned. It follows a feature from wireframes through implementation and review, emphasizing approved components, design tokens, and richer context to improve generated code and reduce rework. ### Source excerpt Coding agents are reshaping how developers build, but they're only as good as the input they're given. This workflow explores how context keeps code and canvas in sync. ## What it's like to join WorkOS as a product designer DevFeed: [What it's like to join WorkOS as a product designer]() Original publisher: [Read original article]() Author: WorkOS Published: 2026-08-17T19:47:49Z Content type: opinion Language: en Sources: [WorkOS Blog]() Topics: [Artificial Intelligence](), [Model Context Protocol](), [Tooling](), [Figma](), [Slack](), [Notion]() Tags: [ai](), [connectors](), [context](), [data](), [design](), [designer](), [figma](), [mcp](), [slack](), [tooling]() ### AI overview A product designer describes joining WorkOS and using shared company context, MCP-connected data, Slack, Notion, and AI-assisted design tooling to answer product questions and onboard more quickly. ### Source excerpt What it's actually like to join WorkOS as a product designer: transparent context by default, and AI as everyday design tooling. ## Figma is the New Dreamweaver: How Modern Prototyping Tools are Trapping Us in 2018 DevFeed: [Figma is the New Dreamweaver: How Modern Prototyping Tools are Trapping Us in 2018]() Original publisher: [Read original article]() Author: Noah Davis Published: 2026-08-17T12:04:00Z Content type: opinion Language: en Sources: [Web Designer Depot]() Topics: [Figma](), [Code](), [CSS](), [HTML](), [Web](), [Web Development](), [systems]() Tags: [accessibility](), [css](), [design](), [design-systems](), [design-tools](), [dreamweaver](), [figma](), [figma-alternatives](), [frontend-development](), [html](), [interface-design](), [modern-web-design](), [product-design](), [prototyping](), [responsive-design](), [systems](), [ui-design](), [user-experience](), [ux-design](), [web](), [web-design](), [web-designers](), [web-development](), [writing-code]() ### AI overview Figma's polished, pixel-based canvas and prototyping features can obscure the fluidity, document flow, layout behavior, and unpredictable content of the web. The article argues that designers who rely on fixed artboards and simulated code risk repeating Dreamweaver's history of separating visual design from HTML, CSS, responsive behavior, performance, and systems thinking. ### Source excerpt Just like Dreamweaver convinced a generation they could ignore HTML and CSS, Figma's perfect canvas may be hiding the messy realities of how the web actually works. The future belongs to designers who understand systems, behavior, performance, and code--not just pixels. ## 10 Figma agent skills featured by Figma DevFeed: [10 Figma agent skills featured by Figma]() Original publisher: [Read original article]() Author: Miggi Cardona Published: 2026-08-13T16:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Figma agent](), [Figma Community](), [Design system](), [recommendations]() Tags: [design-system](), [figma](), [figma-agent](), [figma-community](), [recommendations]() ### AI overview Figma explains how users can author skills for its agent directly in Figma, preview and edit them, and iterate on them through testing. The article highlights 10 skills from the Figma Community, including examples for generating radiographs and reviewing animation opportunities. ### Source excerpt Now you can author skills for our agent, directly in Figma, to put your point of view to work. Here are 10 of our favorites to get you started. ## Measuring time savings from Figma Make DevFeed: [Measuring time savings from Figma Make]() Original publisher: [Read original article]() Author: Remy Stewart Published: 2026-08-11T19:59:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Data Science](), [Artificial Intelligence](), [A/B Testing]() Tags: [a-b-testing](), [ai](), [ai-tools](), [data-science](), [figma](), [productivity](), [research](), [testing]() ### AI overview Figma's Data Science team describes a randomized controlled trial measuring how Figma Make affects users' design work. Across 100 participants, design work was 20% faster and 16% easier overall, while PMs saw tasks become 23% faster and 37% easier. The article explains why confounders make AI time savings difficult to measure and discusses the limitations of online A/B testing and causal inference using log data. ### Source excerpt The Figma Data Science team assumed that AI saves users time--but quantifying it required a new approach to research design. ## Martech stack audit: How to optimize your marketing toolset DevFeed: [Martech stack audit: How to optimize your marketing toolset]() Original publisher: [Read original article]() Author: Webflow Team Published: 2026-08-07T00:00:00Z Content type: tutorial Language: en Sources: [Webflow Blog]() Topics: [Optimization](), [Automation](), [Content Management System](), [Data Management](), [Search engine optimization (SEO)](), [Figma](), [webflow]() Tags: [analytics](), [audits](), [automation](), [content](), [cost](), [data](), [design](), [figma](), [how-to](), [inspiration](), [integration](), [learn](), [marketing](), [optimization](), [seo](), [software](), [tool](), [webflow](), [workflow](), [workflow-tools]() ### AI overview A practical guide to auditing a marketing technology stack, identifying inefficient or unnecessary tools, and finding opportunities to streamline workflows, improve collaboration, and increase return on investment. ### Source excerpt Learn when and how to conduct a martech stack audit that will identify opportunities to streamline operations, improve collaboration, and save resources. ## Import a Figma design into Webflow with one prompt DevFeed: [Import a Figma design into Webflow with one prompt]() Original publisher: [Read original article]() Author: Stefan Judis Published: 2026-08-06T00:00:00Z Content type: article Language: en Sources: [Webflow Blog]() Topics: [Figma](), [webflow](), [MCP](), [Claude](), [Artificial Intelligence](), [Tooling](), [Template]() Tags: [ai](), [anthropic](), [claude](), [design](), [development](), [figma](), [figma-plugin](), [mcp](), [tokens](), [tooling](), [webflow]() ### AI overview The article describes importing a Figma design into an empty Webflow site using Claude Desktop, two MCP connectors, and a single loose prompt. The process creates design tokens, classes, components, and uploaded assets without a dedicated Figma import tool or manual rebuilding. ### Source excerpt Use Claude connectors to import a Figma design into Webflow. Webflow MCP handles tokens, classes, components, and assets. ## Better code, fewer tokens: The benefits of Code Connect in MCP DevFeed: [Better code, fewer tokens: The benefits of Code Connect in MCP]() Original publisher: [Read original article]() Author: Tom Weightman Published: 2026-08-05T18:16:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [MCP Server](), [Model Context Protocol](), [AI-assisted coding](), [agentic-coding](), [Front end](), [Code quality]() Tags: [agentic-coding](), [agents](), [case-study](), [code](), [code-quality](), [coding](), [design](), [figma](), [mcp]() ### AI overview Figma's Code Connect gives coding agents production-component context through the Figma MCP server. Evaluations found shorter task durations, higher code quality, and lower token usage when Code Connect templates were available. ### Source excerpt When going from design to code, agents lack the context of your production components. With Code Connect in Figma's MCP, they get that context. We measured its impact on token usage, task duration, and code quality. ## +14% activated users for AppSignal: designing a new homepage in code DevFeed: [+14% activated users for AppSignal: designing a new homepage in code]() Original publisher: [Read original article]() Author: Travis Turner (richardturner@evilmartians.com) Published: 2026-08-04T00:00:00Z Content type: article Language: en Sources: [Evil Martians]() Topics: [Application Performance Management (APM)](), [error tracking](), [Tooling](), [Code](), [Figma](), [Artificial Intelligence]() Tags: [agentic-development](), [ai](), [apm](), [case-study](), [code](), [design](), [design-for-devtools](), [developer-marketing](), [developer-products](), [engineering](), [error-tracking](), [figma](), [product-development](), [tooling]() ### AI overview Evil Martians designed and shipped a new AppSignal homepage primarily in code, combining code, Figma, and AI during exploration and prototyping. The selected direction was validated through an A/B test that showed a 14% increase in activated users over the previous site. ### Source excerpt We designed and shipped a fresh AppSignal homepage in code, then validated it in an A/B test with a 14% lift in activated users. ## Code, craft, and the making of nested folders DevFeed: [Code, craft, and the making of nested folders]() Original publisher: [Read original article]() Author: Ethan Adams; Cai Charniga; Sachi Shah Published: 2026-08-03T12:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Code](), [pull-requests](), [Artificial Intelligence]() Tags: [code](), [collaboration](), [design](), [development](), [feature](), [figma](), [product-development](), [pull-requests]() ### AI overview Figma describes how its teams changed their product development process while building nested folders. The approach emphasized using code and pull requests to test ideas earlier, flexible responsibilities, and closer collaboration across product, design, and engineering as the project's requirements and context evolved. ### Source excerpt From treating code as a proposal to turning handoffs into conversations, here's how we shaped a new way of working to ship nested folders. ## A properties panel and annotations, now in Figma Make DevFeed: [A properties panel and annotations, now in Figma Make]() Original publisher: [Read original article]() Author: Phillip Wang Published: 2026-07-30T19:25:32.996000Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Code](), [Document Object Model (DOM)](), [Prompt Engineering]() Tags: [agent](), [animation](), [code](), [design](), [figma](), [padding](), [tokens](), [typography]() ### AI overview Figma introduces a properties panel and annotations in Figma Make, enabling visual edits to code through familiar design controls and in-context prompts. The update supports detailed styling changes, DOM-tree selection, staged review before applying edits, and synchronization with underlying code. ### Source excerpt With visual editing and annotations, Figma Make is bridging the gap between design and code. Select any element you want to change, adjust it directly in the properties panel, or write in-context prompts with annotations. ## Building a Multi-Theme Design System in Figma DevFeed: [Building a Multi-Theme Design System in Figma]() Original publisher: [Read original article]() Author: Jacqueline Rhoda Published: 2026-07-27T18:53:49Z Content type: tutorial Language: en Sources: [Apartment 304]() Topics: [Design system](), [Figma](), [configuration](), [color]() Tags: [apartment-304](), [color](), [configuration](), [custom-software-solutions](), [design](), [design-system](), [design-systems](), [devops](), [devops-engineer](), [figma](), [software-architecture](), [software-development](), [software-engineer](), [tokens]() ### AI overview This tutorial explains how to build a multi-theme design system in Figma. It describes keeping components, layouts, and patterns consistent while adapting brand identity and visual styles through variables, styles, and semantic color tokens. ### Source excerpt Build flexible Figma design systems that scale across brands and customers. ## Digital tools, human expression: The visual identity behind Config 2026 DevFeed: [Digital tools, human expression: The visual identity behind Config 2026]() Original publisher: [Read original article]() Author: Matt Alagiah Published: 2026-07-27T16:30:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Artificial Intelligence](), [shaders](), [Code]() Tags: [ai](), [ai-tools](), [conference](), [design](), [figma](), [images](), [shaders](), [tools]() ### AI overview Figma's Brand Studio explains the visual identity for Config 2026, combining expressive glyphs, prompted textures, generative tools, shaders, and Figma Make to balance digital experimentation with human craft and imperfection. ### Source excerpt Here's how Figma's Brand Studio designed a conference that captured the very human ways we remix and reinvent when working with AI tools. ## How Figma stays ahead of vulnerabilities with agents DevFeed: [How Figma stays ahead of vulnerabilities with agents]() Original publisher: [Read original article]() Author: Rohan Sharma; Liam Buchan; Dave Martin Published: 2026-07-23T21:23:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Vulnerabilities](), [Pull Request](), [AI-assisted coding](), [Claude Code](), [codex](), [Security](), [Code]() Tags: [agentic](), [claude](), [claude-code](), [code-generation](), [codex](), [coding](), [cost](), [engineering](), [figma](), [pull-request](), [review](), [security](), [vulnerabilities]() ### AI overview Figma describes how it uses coding agents to prevent, detect, and fix vulnerabilities during code generation, pull request review, and historical code auditing. The article focuses on improving precision, recall, and trust, including a review system that combines Claude Code with Opus 4.8 and Codex with GPT-5.6 Sol. ### Source excerpt For the past year, agents at Figma have guarded code as it's written, reviewed every pull request, and audited a decade-old monorepo, all on one policy. [Next page]()