# Design Systems Published articles for Design Systems. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## 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. ## Gotham Variable and the Art of Evolution DevFeed: [Gotham Variable and the Art of Evolution]() Original publisher: [Read original article]() Author: Amelia Nash Published: 2026-08-18T02:49:00Z Content type: article Language: en Sources: [PRINT Magazine]() Topics: [Monotype](), [Artificial Intelligence]() Tags: [ai](), [artificial-intelligence](), [brand-identity](), [branding](), [branding-identity-design](), [design](), [design-culture](), [design-journalism](), [design-systems](), [design-topics](), [gotham](), [graphic-design](), [legacy-brands](), [monotype](), [post](), [strategy-plus-process](), [type-design](), [type-tuesday](), [typography](), [variable-fonts]() ### AI overview Gotham Variable marks the typeface's 25th anniversary by expanding its fixed family into a continuous range of weight and width, adding 54 intermediate styles. The article presents this evolution as a way to support flexible contemporary brand systems, including AI-generated applications, while preserving Gotham's underlying identity. ### Source excerpt As Gotham turns 25, Monotype is giving the iconic typeface room to evolve. With Gotham Variable, Sara Soskolne explores how legacy identities can embrace flexibility and new technologies -- including AI -- without losing the underlying logic that makes them recognizable. The post Gotham Variable and the Art of Evolution appeared first on PRINT Magazine. ## 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. ## Website as a service: Benefits and platforms for providers DevFeed: [Website as a service: Benefits and platforms for providers]() Original publisher: [Read original article]() Author: Webflow Team Published: 2026-08-07T00:00:00Z Content type: article Language: en Sources: [Webflow Blog]() Topics: [Software as a service](), [web design](), [hosting](), [Web]() Tags: [design-systems](), [guide](), [hosting](), [inspiration](), [management](), [operations](), [optimization](), [saas](), [subscriptions](), [support](), [web-design](), [workflows]() ### AI overview This guide explains the website as a service (WaaS) model, in which providers deliver professionally managed websites through recurring subscriptions instead of one-time projects. It covers ongoing hosting, maintenance, updates, support, reusable design systems, centralized management, and continuous optimization, and compares WaaS with traditional web design. ### Source excerpt Explore how website as a service differs from traditional site design, and learn to build client relationships using the right service model and platform. ## 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. ## Facebook's Design Didn't Evolve--It Regressed DevFeed: [Facebook's Design Didn't Evolve--It Regressed]() Original publisher: [Read original article]() Author: Louise North Published: 2026-07-14T12:19:00Z Content type: opinion Language: en Sources: [Web Designer Depot]() Topics: [User experience (UX)](), [Usability](), [Web]() Tags: [algorithmic-feed](), [cognitive-load](), [design](), [design-consistency](), [design-systems](), [digital-products](), [engagement-vs-usability](), [facebook-ux](), [feature](), [feature-bloat](), [interaction-design](), [interface-design](), [mental-models](), [personalization](), [product-design](), [social-media-ux](), [usability](), [user-control](), [user-experience-design](), [ux](), [ux-case-study](), [ux-regression](), [ux-strategy](), [ux-usability](), [ux-ux-usability]() ### AI overview The article argues that Facebook's design regressed as it replaced a predictable chronological feed with opaque algorithmic ranking and accumulated features that fragmented the experience. It presents predictability, transparency, usability, and user control as essential UX principles. ### Source excerpt Facebook didn't get worse overnight--it optimized itself into confusion. What started as the clearest social experience on the web slowly became a noisy, unpredictable system users no longer fully understand. This is what happens when engagement wins over usability--and it's a warning for every designer building products today. ## Got skills? Make the Figma agent a better collaborator DevFeed: [Got skills? Make the Figma agent a better collaborator]() Original publisher: [Read original article]() Author: Sachi Shah; Sean Lee Published: 2026-07-01T13:45:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Prompt Engineering](), [User experience (UX)](), [Accessibility](), [User interface design]() Tags: [accessibility](), [agent](), [design](), [design-systems](), [figma](), [skills](), [standards](), [ux](), [ux-writing](), [workflow]() ### AI overview The article explains how reusable skills make the Figma agent a better collaborator. Teams can teach the agent their workflows, design feedback practices, UX writing standards, accessibility checks, brand voice, compliance guidance, and review processes through plain-English instructions and examples. ### Source excerpt From sharing your best thinking to learning from your team's go-to prompts, here's what skills unlock in the Figma agent. ## How Design Systems Help Designers Work More Effectively on Agile Teams DevFeed: [How Design Systems Help Designers Work More Effectively on Agile Teams]() Original publisher: [Read original article]() Author: Paivi Salminen Published: 2026-06-18T04:35:20Z Content type: article Language: en Sources: [UX Magazine]() Topics: [Agile](), [Design system](), [User experience (UX)](), [User Interfaces]() Tags: [agile](), [components](), [consistency](), [design](), [design-system](), [design-systems](), [interface](), [teams](), [ux]() ### AI overview The article examines how agile teams' continuous feature work can leave designers with too little time. It explains that design systems reduce repetitive visual-design decisions and help designers focus more on how interfaces support users' goals. ### Source excerpt One of the most common complaints designers have about working on agile teams is the feeling that there's never enough time. There's always another feature to design. Another sprint is starting. Another ticket is waiting for input. Even when a feature ships, the work doesn't necessarily stop. Agile teams are supposed to observe how the The post The Agile Trap Designers Fall into: Feeding the Beast appeared first on UX Magazine. ## How To Make Your Design System AI-Ready DevFeed: [How To Make Your Design System AI-Ready]() Original publisher: [Read original article]() Author: hello@smashingmagazine.com (Vitaly Friedman) Published: 2026-06-03T13:00:00Z Content type: tutorial Language: en Sources: [Articles on Smashing Magazine -- For Web Designers And Developers]() Topics: [User interface design](), [AI-assisted coding](), [Figma]() Tags: [accessibility](), [ai](), [code](), [design](), [design-patterns](), [design-systems](), [documentation](), [guide](), [how-to](), [prototypes](), [ux]() ### AI overview A practical guide to making design systems more reliable inputs for AI-generated prototypes. It recommends documenting decisions in reusable spec files, maintaining a token layer, and auditing design-system quality with FigmaLint. ### Source excerpt Practical guide on how to reduce drifts, minimize mistakes, maintain context, and improve the quality of AI-generated prototypes. Brought to you by Design Patterns For AI Interfaces, **friendly video course on UX** and design patterns by Vitaly. ## How we rebuilt the foundations of component instances DevFeed: [How we rebuilt the foundations of component instances]() Original publisher: [Read original article]() Author: Naomi Jung Published: 2026-03-17T20:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Design system](), [reactive](), [systems]() Tags: [architecture](), [component](), [design-systems](), [figma](), [reactive]() ### AI overview Figma describes replacing the decade-old Instance Updater architecture for component instances with a reactive foundation. The change made common operations in large design systems up to 50% faster and supports more dynamic features as components become more complex. ### Source excerpt By replacing a decade-old architecture with a reactive foundation, we made common operations in large design systems up to 50% faster and unlocked a new way to build dynamic features. ## Jetpack Compose Material 3 unifies theme data in LocalMaterialTheme DevFeed: [Jetpack Compose Material 3 unifies theme data in LocalMaterialTheme]() Original publisher: [Read original article]() Author: Nav Singh Published: 2026-03-12T19:38:30Z Content type: tutorial Language: en Sources: [Stories by Nav Singh 🇨🇦 on Medium]() Topics: [Jetpack Compose](), [Design system]() Tags: [android-app-development](), [androiddev](), [design-systems](), [jetpack-compose](), [material-design](), [material3]() ### AI overview Jetpack Compose Material 3 1.5.0-alpha15 changes MaterialTheme to use one LocalMaterialTheme CompositionLocal for color, typography, shapes, and motion. The article explains how this can simplify theme management and allow custom modifier nodes to read theme data outside composable scopes. ### Source excerpt Image generated using Perplexity Jetpack Compose Material 3 1.5.0-alpha15 introduces a subtle but powerful refactor MaterialTheme now uses a single LocalMaterialTheme CompositionLocal instead of separate locals for color, typography, shapes, and motion. While this simplifies internal theme management, its real value emerges when building custom design systems and theme-aware Modifier libraries. The Refactor: Cleaner Under the Hood Previously, MaterialTheme relied on multiple CompositionLocals: Source:https://android-review.googlesource.com/c/platform/frameworks/support/+/3949000/16/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/MaterialTheme.kt Now: Everything flows through one unified source: Source:https://android-review.googlesource.com/c/platform/frameworks/support/+/3949000/16/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/MaterialTheme.ktThis reduces allocations and simplifies the theme provider.⭐ Where It Shines: Design Systems & Custom Modifiers ⭐ The game-changer is CompositionLocalConsumerModifierNode support. Custom Modifiers that handle drawing/layout outside @Composable scopes can now read theme data directly:object BrandGradientOverlayElement : ModifierNodeElement() { override fun create(): BrandGradientOverlayNode = BrandGradientOverlayNode() override fun update(node: BrandGradientOverlayNode) { // No-Op } override fun InspectorInfo.inspectableProperties() { name = "brandGradientOverlay" } override fun equals(other: Any?): Boolean = (this === other) override fun hashCode(): Int = javaClass.hashCode() } class BrandGradientOverlayNode : Modifier.Node(), DrawModifierNode, CompositionLocalConsumerModifierNode { override fun ContentDrawScope.draw() { // Read color scheme to access colors val colorScheme = currentValueOf(MaterialTheme.LocalMaterialTheme).colorScheme val gradient = Brush.linearGradient( listOf( colorScheme.primary, colorScheme.secondary) ) drawContent() d ## The new business case for design systems DevFeed: [The new business case for design systems]() Original publisher: [Read original article]() Author: Figma Published: 2026-01-13T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Design system](), [data]() Tags: [business](), [customers](), [design-systems](), [metrics](), [research](), [retention](), [revenue](), [strategy]() ### AI overview The article explains how design systems have become strategic business investments rather than merely static component libraries or cost centers. Drawing on Design Executive Council research, it describes ways organizations connect design-system value to revenue growth, customer loyalty, retention, satisfaction, productivity, and operational efficiency, including customer-health metrics and user feedback. ### Source excerpt Design systems have evolved from static libraries to key drivers of business revenue, customer loyalty, and product strategy. Here's what you need to know about how to track and communicate the value of your design system, based on new research from the Design Executive Council (DXC). ## 5 shifts redefining design systems in the AI era DevFeed: [5 shifts redefining design systems in the AI era]() Original publisher: [Read original article]() Author: Emma Webster Published: 2025-11-19T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Artificial Intelligence](), [Frameworks](), [Figma]() Tags: [ai](), [design](), [design-systems](), [figma](), [generate](), [product-development](), [standards]() ### AI overview The article describes five shifts in design systems as AI changes product development. It argues that design systems are becoming living frameworks that encode a team's taste, standards, craft, and creative identity, helping AI accelerate execution without sacrificing consistency, quality, or distinctive product experiences. ### Source excerpt As AI reshapes how we make products, design systems are evolving from libraries of reusable parts into living frameworks that scale taste and craft. We spoke with product leaders and practitioners about the shifts they're seeing in how design systems are built, used, and maintained. ## Issue no.13: All systems go DevFeed: [Issue no.13: All systems go]() Original publisher: [Read original article]() Author: Figma Published: 2025-11-06T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [AI-assisted coding](), [MCP Server](), [agentic-coding]() Tags: [2025](), [agentic-coding](), [ai](), [ai-assisted-coding](), [best-practices](), [design-systems](), [figma](), [mcp](), [mcp-server](), [workflows]() ### AI overview Figma's Issue no.13, "All systems go," explains how design systems support faster, more reliable work in an era of AI-assisted design and coding. It highlights Figma Make, agentic coding workflows using Figma's MCP server, and practices for giving designers, developers, and AI better context through files, systems, and annotations. ### Source excerpt When things move fast, foundations matter more than ever. ## Schema 2025: Design systems for a new era DevFeed: [Schema 2025: Design systems for a new era]() Original publisher: [Read original article]() Author: Paige Costello Published: 2025-10-28T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Artificial Intelligence](), [Code]() Tags: [ai](), [code](), [components](), [design-systems](), [figma](), [product-development](), [sync]() ### AI overview Figma's Schema 2025 recap presents design system updates for an AI-era workflow. The article discusses balancing power and flexibility, connecting design with code, expanding participation, and scaling design systems across products, brands, and platforms. Announced features include Dev Mode, variables, advanced prototyping, quality-of-life updates, and extended collections for multi-brand systems. ### Source excerpt Design systems help teams push what's possible while maintaining a high level of craft, polish, and performance. Here's everything we announced at Schema by Figma to help teams design for the AI era. ## Three new features to help build brand momentum with Figma Buzz DevFeed: [Three new features to help build brand momentum with Figma Buzz]() Original publisher: [Read original article]() Author: Jasmine Stoy Published: 2025-10-23T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Template](), [Code]() Tags: [ads](), [animation](), [asset-management](), [customization](), [design](), [design-systems](), [event](), [features](), [figma](), [linkedin](), [marketing](), [plugins](), [product-development](), [promotion](), [social-media](), [tools](), [video]() ### AI overview Figma Buzz introduces three features for creating branded marketing assets: configurable templates connected to design systems, plugins for tasks such as digital asset management and translation, and direct video trimming. ### Source excerpt With marketing templates that are now connected to your design system, plugins that pull in your favorite apps, and video trimming in Figma Buzz, we're giving designers and marketers new tools to create branded assets that speak volumes. ## Design systems: From the basics to big things ahead DevFeed: [Design systems: From the basics to big things ahead]() Original publisher: [Read original article]() Author: Madeline Stafford Published: 2025-10-21T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [User experience (UX)](), [Figma](), [systems](), [Artificial Intelligence]() Tags: [2025](), [ai](), [conference](), [design](), [design-systems](), [developers](), [documentation](), [figma](), [ux]() ### AI overview This Figma article presents design systems as a foundation for consistency, collaboration, and production at scale. It reviews their historical roots, explains the importance of clear and role-specific documentation, discusses adoption and business-impact metrics, and highlights Schema 2025 resources and examples such as Alaska Airlines' Auro system. ### Source excerpt To prepare for Schema 2025, we combed through Shortcut archives to pull together our design systems greatest hits. ## Design Dialects: Breaking the Rules, Not the System DevFeed: [Design Dialects: Breaking the Rules, Not the System]() Original publisher: [Read original article]() Author: by Michel Ferreira Published: 2025-09-26T16:48:12Z Content type: article Language: en Sources: [A List Apart: The Full Feed]() Topics: [Web](), [systems]() Tags: [component](), [design](), [design-design-systems-web-strategy-workflow-tools](), [design-systems](), [systems](), [web](), [web-strategy](), [workflow-tools]() ### AI overview The article argues that design systems should function as living languages rather than rigid component libraries. It introduces design dialects: systematic adaptations that preserve core principles while allowing context-specific patterns, helping teams solve user problems without sacrificing the system's essential grammar. ### Source excerpt "Language is not merely a set of unrelated sounds, clauses, rules, and meanings; it is a totally coherent system bound to context and behavior." -- Kenneth L. Pike The web has accents. So should our design systems. Design Systems as Living Languages Design systems aren't component libraries--they're living languages. Tokens are phonemes, components are words, patterns are phrases, layouts are sentences. The conversations we build with users become the stories our products tell. But here's what we've forgotten: the more fluently a language is spoken, the more accents it can support without losing meaning. English in Scotland differs from English in Sydney, yet both are unmistakably English. The language adapts to context while preserving core meaning. This couldn't be more obvious to me, a Brazilian Portuguese speaker, who learned English with an American accent, and lives in Sydney. Our design systems must work the same way. Rigid adherence to visual rules creates brittle systems that break under contextual pressure. Fluent systems bend without breaking. Consistency becomes a prison The promise of design systems was simple: consistent components would accelerate development and unify experiences. But as systems matured and products grew more complex, that promise has become a prison. Teams file "exception" requests by the hundreds. Products launch with workarounds instead of system components. Designers spend more time defending consistency than solving user problems. Our design systems must learn to speak dialects. A design dialect is a systematic adaptation of a design system that maintains core principles while developing new patterns for specific contexts. Unlike one-off customizations or brand themes, dialects preserve the system's essential grammar while expanding its vocabulary to serve different users, environments, or constraints. When Perfect Consistency Fails At Booking.com, I learned this lesson the hard way. We A/B-tested everything--color, copy, button sh ## The New York Times Games' Path to Dark Mode DevFeed: [The New York Times Games' Path to Dark Mode]() Original publisher: [Read original article]() Author: The NYT Open Team Published: 2025-09-25T15:25:52Z Content type: tutorial Language: en Sources: [New York Times]() Topics: [Dark Mode](), [Design system](), [Accessibility](), [User Experience](), [Web Development]() Tags: [accessibility](), [dark-mode](), [design](), [design-systems](), [development](), [front-end-development](), [games](), [user-experience]() ### AI overview The New York Times Games explains why implementing Dark Mode required more than inverting colors. The project involved accessibility decisions, preserving each game's brand, and creating a consistent design system across eight games and three surfaces. ### Source excerpt How we designed a deceptively complex featureIllustration by Alessandro Gottardo By Joel Urena, Jenna Kim, Kenneth Ofosu, Shaka Clark, Raven Adaramola, Dylan Campbell At least once a day, our players requested a Dark Mode feature for The New York Times Games, particularly those who enjoy playing at night. The bright screens were negatively impacting their satisfaction and hindering accessibility. Our players often wondered why this seemingly simple feature -- just a switch from white to black -- took so long to deliver. People may think designing for Dark Mode is about inverting colors from white to black, one of the points players often cited when asking for Dark Mode. But there are numerous factors that make up little decisions when designing and implementing Dark Mode. Not only do we have to consider the color accessibility, we have to make intentional color decisions to preserve the brand of each game and The New York Times Games. A compilation of negative Games app reviews that reference dark modePrimer: Design Systems & Feature Discovery In the Spring of 2023, The New York Times Games was evolving quickly and we found ourselves with a user experience that was vastly different depending on which game you played and where you played it. We began to rectify this problem with the development of a Design Systems strategy. Like most other tech orgs, we hypothesized that if we began approaching product design and front-end development systematically, surely that would orient us toward a more consistent product experience, right? The answer: yes, eventually. From a business and user impact perspective, the clearest Design Systems opportunity to prioritize first was Dark Mode. However, given the maturity of The New York Times Games digital product, the operational complexity we were tackling was massive. At the time, we had eight live games spread across three surfaces: The New York Times Games apps, the The New York Times news app and on the web. We also had ancillary e ## Why you should care about design context DevFeed: [Why you should care about design context]() Original publisher: [Read original article]() Author: Thomas Lowry Published: 2025-09-24T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Model Context Protocol](), [AI-assisted coding](), [Code]() Tags: [agentic](), [agentic-coding](), [ai](), [code-generation](), [coding](), [design](), [design-systems](), [figma](), [mcp](), [tools](), [web]() ### AI overview The article explains why well-structured design files and clear design context help developers use agentic coding tools more efficiently and accurately. It discusses Figma's Dev Mode MCP server, design systems, Code Connect, code syntax, and file organization as ways to provide AI workflows and developers with more useful implementation context. ### Source excerpt As developers increasingly use agentic coding tools, the structure and clarity of design files matters more than ever. By thoughtfully organizing your work, you can help your developer counterparts build more efficiently and accurately. ## The branding for Intercom's AI summit looks like an alien superbloom DevFeed: [The branding for Intercom's AI summit looks like an alien superbloom]() Original publisher: [Read original article]() Author: Jenny Xie Published: 2025-09-19T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Artificial Intelligence](), [ide]() Tags: [ai](), [branding](), [customer-service](), [design](), [design-systems](), [events](), [figma](), [summit]() ### AI overview Intercom's Creative Studio used Figma to develop the visual identity for Pioneer, its customer service and AI summit. The team explored broad creative concepts through mood boards, collaborated across disciplines, and embedded motion, imagery, and vector assets into a brand system spanning digital campaigns and the live event. ### Source excerpt For the customer service and AI event Pioneer, Intercom's designers used Figma to create a visual language of surreal flowers and shape-shifting pollen. ## Issue no.12: New roles, new rules DevFeed: [Issue no.12: New roles, new rules]() Original publisher: [Read original article]() Author: Figma Published: 2025-09-10T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Model Context Protocol (MCP)](), [Artificial Intelligence](), [Code](), [math]() Tags: [agents](), [ai](), [ai-agents](), [ai-tools](), [brand-design](), [can](), [code](), [collaboration](), [design](), [design-systems](), [developers](), [engineering](), [mcp](), [product](), [productivity](), [tools](), [workflows]() ### AI overview Figma's Issue no.12 explores how AI tools and faster iteration are expanding product roles and changing team workflows. It covers cross-functional work, prototyping with Figma Make, Figma Draw's scatter brushes, math-game development, agency collaboration, and the use of design systems with MCP servers to improve AI-generated code. ### Source excerpt With faster iteration cycles and AI tools helping people stretch further up the stack, more product builders are reinventing their roles. ## Design systems and AI: Why MCP servers are the unlock DevFeed: [Design systems and AI: Why MCP servers are the unlock]() Original publisher: [Read original article]() Author: Ana Boyer Published: 2025-08-06T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [MCP Server](), [AI-assisted coding](), [Artificial Intelligence](), [Large Language Model](), [User interface design](), [Accessibility]() Tags: [accessibility](), [ai-agents](), [code-generation](), [design-systems](), [figma](), [mcp](), [product-development]() ### AI overview The article explains how design systems paired with MCP servers give AI agents design context, helping them generate more relevant, on-brand, and design-informed code. It introduces the beta Figma MCP server, which brings Figma into developer workflows and connects design context with LLM-based code generation. ### Source excerpt Paired with MCP servers, design systems become a productivity coefficient for AI-powered workflows, ensuring that AI agents produce output that's relevant and on brand. ## In good company: How retailers use Figma to elevate e-commerce DevFeed: [In good company: How retailers use Figma to elevate e-commerce]() Original publisher: [Read original article]() Author: Diana Budds Published: 2025-07-11T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [User Experience]() Tags: [design](), [design-systems](), [e-commerce](), [figma](), [user-experience]() ### AI overview This Figma case study explains how Nuuly, Ruggable, and GitHub developed cohesive e-commerce experiences to build customer trust, support employees, and express their brand values. It highlights Nuuly's customer and rental-logistics design systems, including reusable color and type tokens and simplified rental-status guidance. ### Source excerpt Brands like Nuuly, Ruggable, and GitHub are designing multidimensional experiences that build customer trust, serve employee needs, and uphold core values. [Next page]()