# design system Published articles for design system. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## How to upgrade hundreds of React components without breaking production DevFeed: [How to upgrade hundreds of React components without breaking production]() Original publisher: [Read original article]() Author: Khan Academy Published: 2019-09-23T22:00:00Z Content type: tutorial Language: en Sources: [Khan Academy]() Topics: [React](), [Design system](), [upgrade](), [Accessibility](), [consistency](), [test](), [Deployment](), [Code]() Tags: [accessibility](), [components](), [consistency](), [deployment](), [design-system](), [engineering](), [how-to](), [news](), [production](), [react](), [test](), [upgrade](), [web-frontend]() ### AI overview This article explains how Khan Academy upgraded hundreds of React buttons and links to components from its Wonder Blocks design system. It describes using a prop-conversion guide, organizing small team-owned changes, deploying often, and validating the migration with detailed test plans and responsive screenshots. ### Source excerpt By Jangmi Jo Background In 2018, we started renewing our color system using our new shared design system, ... Read more ## The Thumb That Ran Ahead of the Finger: Anatomy of a Compose Slider Bug DevFeed: [The Thumb That Ran Ahead of the Finger: Anatomy of a Compose Slider Bug]() Original publisher: [Read original article]() Author: Vitaliy Gribko Published: 2026-09-14T04:19:34Z Content type: article Language: en Sources: [ProAndroidDev - Medium]() Topics: [bug](), [Compose](), [Android](), [Design system](), [Code]() Tags: [android](), [bug](), [code](), [compose](), [debugging](), [design-system](), [jetpack-compose](), [kotlin](), [qa](), [race-condition](), [ui]() ### AI overview This article examines a deterministic bug in a custom Compose slider where the thumb moves ahead of the user's finger during a drag. It traces the issue to a design-system slider forked from the AOSP Material implementation and discusses debugging and code simplification. ### Source excerpt A bug report sat in the backlog for seven months. The fix took a day, deleted a third of the slider's logic, and was almost shipped with a second bug inside -- until a machine read my diff better than I did. This is the whole story: the ported behavior that never made sense, the race nobody reported, and why the best fixes remove code. The report The bug report was seven months old when it reached me. A QA engineer had filed it in December, with a screen recording and three steps: Open the people search filters. Grab the right-hand thumb of the age range slider. Drag it slowly to the left. The recording showed the problem in two seconds. The thumb does not follow the finger. It sprints ahead -- you are still crossing the gap between two ticks, and the thumb is already standing on the next one, waiting for you, like a dog that runs to the park while you are still tying your shoes. Expected: the thumb moves with the finger. Actual: it escapes. On a budget phone, on two Android versions, every time. Not a race condition, not a flake -- a perfectly deterministic lie, filmed in December, assigned to a fix-day in July. Seven months is not negligence. It is the natural half-life of a visual glitch filed as minor against a screen nobody dies on. The age filter works. You tap a tick, the value applies. Only the drag -- the one gesture the slider exists for -- feels wrong in a way that is hard to screenshot and easy to deprioritize. When the ticket finally landed on my desk, a colleague glanced at it and asked whether it had already been fixed once. It had not. But I understood his confusion later, when I opened the slider's source and found a comment that explained everything -- including why this bug felt so old. The comment that confessed The slider is not the framework's slider. Our design system ships its own Compose slider, forked from the AOSP Material one, because design needed three knobs the framework does not expose: a custom thumb radius, a custom track height, a differ ## How Srini Raghavan helped $3.4B SaaS Giant Freshworks Embrace the AI PDLC DevFeed: [How Srini Raghavan helped $3.4B SaaS Giant Freshworks Embrace the AI PDLC]() Original publisher: [Read original article]() Author: Aakash Gupta Published: 2026-08-24T23:16:09Z Content type: article Language: en Sources: [Product Growth]() Topics: [Software as a service](), [AI Agent](), [cursor](), [Design system](), [context](), [repo]() Tags: [ai](), [ai-agent](), [context](), [cursor](), [design-system](), [repo](), [saas]() ### AI overview The article summarizes how Freshworks moved from a six-month release process to a two-week cycle under Chief Product Officer Srini Raghavan. It describes an AI product development lifecycle built on structured data, a parsable design system, documented coding standards, a single source repository, contextual knowledge hubs, reusable AI builder artifacts, governed AI agents, and an evaluation phase. ### Source excerpt + Why he uses Grok models, and the future of the "Product Builder" role ## Design tokens: The building blocks of a design system DevFeed: [Design tokens: The building blocks of a design system]() Original publisher: [Read original article]() Published: 2026-08-18T00:00:00Z Content type: article Language: en Sources: [Aha! Engineering Blog]() Topics: [Design system](), [ui](), [CSS](), [consistency]() Tags: [atomic](), [component](), [css](), [design](), [design-system](), [source-of-truth](), [structure](), [tokens](), [ui](), [variables]() ### AI overview This article explains how design tokens provide a shared language for visual design attributes in a scalable design system. It contrasts tokens with hard-coded values, describes primitive and semantic tokens, and discusses using the Design Tokens Community Group standard to connect design and engineering. ### Source excerpt Implementing a design system at scale is often less about the pixels and more about the language we use to describe them. As a Senior Software Engineer at Aha! I've spent a lot of time thinking about how we can build a UI that is not only beautiful, ## 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. ## jetc.dev Newsletter Issue #326 DevFeed: [jetc.dev Newsletter Issue #326]() Original publisher: [Read original article]() Author: CommonsWare Published: 2026-08-11T14:00:00Z Content type: article Language: en Sources: [jetc.dev | Issues]() Topics: [Compose](), [compose-multiplatform](), [Android](), [compose-for-web](), [debug](), [Design system](), [Testing](), [AI-assisted coding]() Tags: [coding-agents](), [compose](), [compose-for-desktop](), [compose-for-web](), [debugger](), [design-system](), [jetpack-compose](), [testing]() ### AI overview Newsletter Issue #326 covers recent Compose developments, including Places UI Kit discussions, stability considerations, design-system testing, Compose Desktop and Web test bridges, and an Android debugger aimed at coding agents. It also highlights community projects and releases around Compose Multiplatform. ### Source excerpt Why we sometimes still need to think about stability! Compose Desktop/Web test bridge! Android debugger for coding agents! And... Places, everyone?!? ## AI-assisted design-system rewrites are fast to generate but slow to refine DevFeed: [AI-assisted design-system rewrites are fast to generate but slow to refine]() Original publisher: [Read original article]() Author: hi@swizec.com (Swizec Teller) Published: 2026-08-08T00:00:00Z Content type: opinion Language: en Sources: [Swizec Teller]() Topics: [Artificial Intelligence](), [Large Language Model](), [Claude](), [Design system](), [stacked pull requests](), [Bootstrap](), [Tailwind CSS]() Tags: [ai](), [claude](), [design-system](), [github](), [llms](), [stacked-pull-requests](), [tailwind]() ### AI overview The author describes using AI and Claude to migrate a design system from Bootstrap to Tailwind, clean up HTML and JavaScript, and rewrite functional code. The article argues that LLMs handle mechanical translation well but struggle with conceptual design decisions and fine UI details, making cleanup substantially more time-consuming than code generation. ### Source excerpt Spaceship first, cleanup second. Start with the ending then work your way back to something useful. ## 5 best practices for preventing chaos in Tailwind CSS DevFeed: [5 best practices for preventing chaos in Tailwind CSS]() Original publisher: [Read original article]() Author: Travis Turner (richardturner@evilmartians.com) Published: 2026-08-05T00:00:00Z Content type: tutorial Language: en Sources: [Evil Martians]() Topics: [Tailwind CSS](), [CSS Framework](), [Design system](), [Web Development]() Tags: [best-practices](), [code](), [css](), [design-system](), [development](), [javascript](), [tailwind](), [tailwind-css]() ### AI overview This tutorial presents best practices for using Tailwind CSS as applications grow, emphasizing the importance of a consistent design system and reusable design tokens to keep class lists and interfaces maintainable. ### Source excerpt Tailwind CSS has become a very popular CSS framework, and it can speed up development. But using it without proper caution can add mayhem to your code. Learn best practices to avoid getting swept away! ## Agents change the math on big bang migrations DevFeed: [Agents change the math on big bang migrations]() Original publisher: [Read original article]() Author: hi@swizec.com (Swizec Teller) Published: 2026-08-01T00:00:00Z Content type: opinion Language: en Sources: [Swizec Teller]() Topics: [migration](), [Tailwind CSS](), [Bootstrap](), [Design system](), [Tech Debt](), [ui](), [React]() Tags: [agents](), [bootstrap](), [design-system](), [migrations](), [react](), [tailwind](), [tech-debt]() ### AI overview An opinion article argues that AI agents may change how teams approach large software migrations. It describes a one-step migration of hundreds of pages from Bootstrap to Tailwind in a 22,000-line pull request, which the author says fixed 13 small bugs without materially disrupting the company. ### Source excerpt I just did a team's worth of work in 5 days. Honestly I am shook to the core of my 20 YoE ## 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. ## Using Storybook Workbench to audit AI-generated UIs for dead components and accessibility bugs DevFeed: [Using Storybook Workbench to audit AI-generated UIs for dead components and accessibility bugs]() Original publisher: [Read original article]() Author: Travis Turner (richardturner@evilmartians.com) Published: 2026-07-08T00:00:00Z Content type: tutorial Language: en Sources: [Evil Martians]() Topics: [Storybook](), [Agent Skills](), [agentic-coding](), [AI-assisted coding](), [Accessibility](), [Design system]() Tags: [accessibility](), [agent-experience](), [agent-skills](), [agentic-coding](), [agentic-development](), [ai](), [bugs](), [design](), [design-engineering](), [design-for-devtools](), [design-system](), [dx](), [storybook]() ### AI overview The article presents Storybook Workbench, a bundle of Agent Skills that audits AI-generated web applications by rendering components as Storybook stories. It describes finding dead components, coexisting design systems, conditional component states, and accessibility bugs, based on an internal audit of an agent-coded app. ### Source excerpt Storybook Workbench is a bundle of Agent Skills that turn Storybook into an audit layer for AI-generated UIs: find dead components, design-system drift, and hidden accessibility bugs. ## Introducing Composables UI DevFeed: [Introducing Composables UI]() Original publisher: [Read original article]() Author: Alex Styl Published: 2026-06-22T00:00:00Z Content type: release Language: en Sources: [Composables - Concise, no-fluff video tutorials for Android developers]() Topics: [compose-multiplatform](), [Library](), [ui](), [Design system](), [Jetpack Compose](), [Gradle](), [Documentation]() Tags: [components](), [compose](), [compose-multiplatform](), [design-system](), [documentation](), [gradle](), [library](), [multiplatform](), [ui]() ### AI overview Composables UI is a fully accessible component library for Compose Multiplatform. It provides adaptive components for different device capabilities, consistent states and theming with dark mode, and options to use it as a Gradle dependency or copy individual component source. The article also describes upgrades to Compose Unstyled developed through testing Composables UI. ### Source excerpt A modern, fully-accessible component library for Compose Multiplatform. ## 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. ## Building a design system specced for engineers and agents DevFeed: [Building a design system specced for engineers and agents]() Original publisher: [Read original article]() Author: Travis Turner (richardturner@evilmartians.com) Published: 2026-06-17T00:00:00Z Content type: article Language: en Sources: [Evil Martians]() Topics: [Design system](), [User interface design](), [AI-assisted coding](), [cursor](), [Claude]() Tags: [ai](), [ai-assisted-coding](), [claude](), [components](), [cursor](), [design](), [design-system](), [devtools](), [dx](), [figma](), [llms](), [ui-design]() ### AI overview Evil Martians describes how it built a design system for Currents in seven weeks. The system standardized UI decisions and was structured to be readable by engineers and AI-assisted coding tools, including Cursor and Claude, helping the lean team reuse components and maintain a consistent product interface. ### Source excerpt Coding without design guidelines can leave teams with an inconsistent UI design and a complex feature development process. Here's how we built a design system for Currents that's readable by engineers and AI agents. ## 4 ways we're using our MCP server at Figma DevFeed: [4 ways we're using our MCP server at Figma]() Original publisher: [Read original article]() Author: Mari Kong Published: 2026-06-16T12:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [MCP Server](), [Figma agent](), [Development]() Tags: [agents](), [design-system](), [development](), [figma](), [figma-agent](), [mcp](), [mcp-server](), [workflows]() ### AI overview Figma describes four ways its MCP server and related agent capabilities are being used across product development workflows, including updating living decks, creating designs on the Figma canvas, and connecting design decisions with code. ### Source excerpt The Figma MCP server reaches further across the platform than it ever has. From updating a living deck to shipping a design to production--here's what that looks like in practice. ## Web Day Out, March 2026 DevFeed: [Web Day Out, March 2026]() Original publisher: [Read original article]() Author: Laurence Hughes Published: 2026-05-28T14:37:56Z Content type: article Language: en Sources: [FreeAgent]() Topics: [Web Development](), [Web platform](), [Front end](), [CSS](), [HTML](), [JavaScript](), [Accessibility](), [API](), [User Experience](), [Design system]() Tags: [accessibility](), [api](), [css](), [design-system](), [development](), [front-end](), [front-end-development](), [guide](), [html](), [javascript](), [performance](), [web](), [web-development]() ### AI overview A first-person recap of Web Day Out in March 2026, covering modern browser capabilities, front-end performance and reliability, and planning web feature adoption with Baseline. The author highlights browser-native features such as the Popover API, dialog, and CSS Anchor Positioning, along with progressive enhancement and fallbacks for browser support. ### Source excerpt In March I attended Web Day Out - a one-day event all about what you can do in web browsers today. It was hosted by Clearleft at the Brighton Dome Studio. It was a brilliant day featuring a diverse line-up, friendly hosting and opportunities to mingle with likeminded souls. At this time when software engineers [...] ## The Figma design agent is here DevFeed: [The Figma design agent is here]() Original publisher: [Read original article]() Author: Rodrigo Davies; Tammy Taabassum Published: 2026-05-20T12:00:00Z Content type: release Language: en Sources: [Figma Blog]() Topics: [Figma](), [Figma agent](), [Artificial Intelligence](), [Design system](), [MCP](), [Code]() Tags: [agentic](), [agentic-workflows](), [ai](), [design-system](), [figma](), [figma-agent](), [mcp](), [tokens](), [tools](), [workflow](), [workflows]() ### AI overview Figma announces a purpose-built Figma agent that works directly on the canvas and in the left rail. The agent uses context about components, tokens, standards, and best practices to help teams explore ideas, edit files, and iterate within shared design workflows. ### Source excerpt Starting today, work with an agent that is built for Figma--directly on the canvas. ## A new chapter: Friends of Figma's brand refresh tells the story of a global community DevFeed: [A new chapter: Friends of Figma's brand refresh tells the story of a global community]() Original publisher: [Read original article]() Author: Jordan Scott Published: 2026-05-19T18:02:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Design system]() Tags: [community](), [design](), [design-system](), [figma](), [global]() ### AI overview Figma introduces a refreshed brand for its Friends of Figma user group program, aiming to represent its global chapters while giving local communities flexibility to express their own identities. ### Source excerpt From São Paulo to Seoul, Friends of Figma chapters around the world are distinct, vibrant, and locally rooted. Our new brand gives them a more authentic way to express themselves. ## Compose Unstyled 2.0 introduces a foundation for building Compose component libraries DevFeed: [Compose Unstyled 2.0 introduces a foundation for building Compose component libraries]() Original publisher: [Read original article]() Author: Alex Styl Published: 2026-05-14T00:00:00Z Content type: release Language: en Sources: [Composables - Concise, no-fluff video tutorials for Android developers]() Topics: [Compose](), [Design system](), [modules](), [Accessibility]() Tags: [accessibility](), [component](), [compose](), [design-system](), [modules](), [release]() ### AI overview Compose Unstyled 2.0 is presented as a foundation for building custom Compose component libraries. The release introduces composable component APIs, redesigned Dropdown and Tooltip APIs, separate modules, and a fully unstyled core with deprecated APIs removed. ### Source excerpt Compose Unstyled 2.0 is a new foundation for building your own Compose component library. ## Design team burnout is linked to operational friction, and DesignOps can help address it DevFeed: [Design team burnout is linked to operational friction, and DesignOps can help address it]() Original publisher: [Read original article]() Author: Pavel Bukengolts Published: 2026-04-30T02:49:30Z Content type: opinion Language: en Sources: [UX Magazine]() Topics: [User experience (UX)](), [Design system]() Tags: [design](), [design-system](), [ux](), [work]() ### AI overview The article argues that design team burnout often stems from operational friction, including broken design systems, missing sources of truth, changing goals, rework, and unclear communication. It recommends DesignOps practices such as observation, audits, mentorship, and improving workflow clarity. ### Source excerpt Your design team isn't burning out from work. It's burning out from friction. The fix isn't more effort; it's better DesignOps: clarity, mentorship, and flow. Everything sounds like work... until you listen closer. It's 9 AM. The coffee's on. Some of us are at the kitchen table. Others are in a shared space. Hybrid is The post The Real Reason Your Design Team Burns Out (And How to Fix It) appeared first on UX Magazine. ## How Yelp Keeps Server-Driven UI Consistent Across Four Platforms DevFeed: [How Yelp Keeps Server-Driven UI Consistent Across Four Platforms]() Original publisher: [Read original article]() Author: Radu Comaneci, Software Engineer Published: 2026-04-22T00:00:00Z Content type: article Language: en Sources: [Yelp]() Topics: [Design system](), [cross-platform](), [ui](), [Web](), [Android](), [iOS](), [Framework]() Tags: [android](), [cross-platform](), [design-system](), [ios](), [platforms](), [server-driven-ui](), [ui](), [web]() ### AI overview This article explains how Yelp integrates its CHAOS server-driven UI framework with the Cookbook design system and the auto-generated Konbini bridge library. The approach is intended to keep UI components and their behavior consistent across Yelp's Web, iOS, and Android applications, including Python/CHAOS backend representations. ### Source excerpt If you've read our earlier post, you already know about CHAOS--the server-driven UI (SDUI) framework we built at Yelp that powers our dynamic views. Until now, we've explored its architecture, backend implementation, and component model. In this post, we'll dive into how we integrated CHAOS with Yelp's cross-platform design system, Cookbook, and the auto-generated bridge library, Konbini. Introduction to Cookbook At Yelp, we support two major applications across our Web, iOS, and Android platforms: Yelp and Yelp for Business. This results in six different variations, which makes it challenging to maintain a unified experience. To address this challenge, we created... ## How The New York Times Games Team Delivered Accessible, Cross-Platform Dark Mode DevFeed: [How The New York Times Games Team Delivered Accessible, Cross-Platform Dark Mode]() Original publisher: [Read original article]() Author: The NYT Open Team Published: 2026-04-16T15:35:45Z Content type: article Language: en Sources: [New York Times]() Topics: [Dark Mode](), [Mobile](), [Android](), [iOS](), [Jetpack Compose](), [ui](), [Design system](), [XML](), [pull-requests](), [SwiftUI](), [Objective-C]() Tags: [accessible](), [android](), [collaboration](), [cross-platform](), [dark-mode](), [design](), [design-system](), [engineering](), [ios](), [jetpack-compose](), [pull-requests](), [swiftui]() ### AI overview The New York Times Games team describes implementing accessible, brand-consistent dark mode across its mobile app. The work coordinated design and engineering across Android and iOS, including XML and Jetpack Compose screens, legacy and modern interfaces, shared assets, external libraries, and testing. ### Source excerpt Bringing accessible, brand-consistent dark mode to life in The New York Times Games app through cross-platform design and engineering collaboration.Illustration by Allie Sullberg By Vanessa Johnson, Daniel Falokun, Michael Ingber and Oleksandr Zabiiako The Games Mobile App introduced dark mode back in October. This seamless implementation was a collaborative effort, requiring careful planning and management of design, cross-platform coordination, and engineering work across both legacy and modern user interface systems. The process to implement dark mode across the app included consideration on the visuals, colors, and icons that are mode specific to maintain legibility and brand consistency. The New York Times Games team is excited to have delivered this feature before the end of 2025, and thrilled to be able to roll out a feature that continues to make our app accessible for all. Development Work on Mobile On the development side, the mobile and web engineers synchronized assets which were colors, fonts, and images to ensure that hybrid screens showed the correct styles and colors. This was possible since our design system across mobile was constructed in a way that encouraged consistency and scalability across platforms. With clear and easy to follow designs supported by our internal design system, Android and iOS could ensure consistency on both platforms. Screens in dark mode From an Android perspective, it required separate approaches for XML (Extensive Markup Language) based screens which use an imperative, hierarchical approach and Jetpack Compose screens that use a more modern declarative approach. XML and Jetpack Compose are different ways the UI can be constructed. To ensure dark mode compatibility, all features were revisited to make sure they were adapted, especially the additions that were being worked on during the dark mode project. Another aspect of this development was updating external libraries that required making pull requests, creating a versi ## The TL;DR on MCP: Why context matters and how to put it to work DevFeed: [The TL;DR on MCP: Why context matters and how to put it to work]() Original publisher: [Read original article]() Author: Emma Webster Published: 2026-04-15T21:57:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Model Context Protocol (MCP)](), [Figma](), [AI-assisted coding](), [Primer](), [Large Language Model]() Tags: [ai-agents](), [code-generation](), [design-system](), [figma](), [mcp](), [mcp-server]() ### AI overview Figma announces the beta release of its MCP server, which brings design context into developer workflows so LLMs can generate code that better reflects Figma designs and design systems. The article also describes moving running interfaces between Codex and Figma for collaborative exploration and refinement. ### Source excerpt Figma's MCP server brings your design decisions into the tools where code gets written--so what gets built actually matches what was designed. Here's what that unlocks for everyone who builds products. ## Figma introduces Make kits and Make attachments for more context in prototypes DevFeed: [Figma introduces Make kits and Make attachments for more context in prototypes]() Original publisher: [Read original article]() Author: Ben Smit; Darragh Burke Published: 2026-04-02T12:00:00Z Content type: release Language: en Sources: [Figma Blog]() Topics: [Figma](), [Design system](), [Code](), [Artificial Intelligence]() Tags: [ai](), [code](), [design-system](), [figma](), [generate]() ### AI overview Figma introduces Make kits and Make attachments for Figma Make. Kits provide design-system context from code, while attachments provide project context from working files, helping prototypes use real components, data, and constraints. ### Source excerpt Starting today, Make kits and Make attachments bring context into Figma Make, so prototypes start from real components, data, and constraints. [Next page]()