In this discussion, the speakers explain how large design systems can be split across multiple Figma files without losing coherence when moving to cloud‑based code. They describe a workflow where Storybook definitions drive the mapping between Figma components and coded libraries, and where Figma’s MCP (or a custom MCP) uses frame links to match design frames to their implementation in Cloud Code. A central file holds design tokens and variables, which are imported into product‑specific files to maintain scalability and maintainability. Designers are empowered to create both the visual component definition in Figma and its coded counterpart, streamlining governance and allowing any team to publish live components without a single team bottleneck.
Chapters
How do you implement large design systems that are divided into separate Figma files as a whole system to cloud code, for instance? A lot of the ones that we've worked on, they do get broken out into separate files, especially when we start adding product-specific patterns or product team-specific patterns into those. And a lot of that's driven through all the Storybook definitions and making sure that all the components are, are coded out in that direction. So the Figma files become a little bit. Less important of where that stuff exists necessarily. Just as long as those definitions in, in Figma is correct and matches up with those coded libraries. And so then when you're running Cloud Code, and like Tim was saying with Figma's MCP or the, and the custom MCP, it's able to discern what's pulled out in that final composition frame that's being delivered and match it up with the with what's actually being implemented in, in code. So hopefully that kind of answers your, your question there. Cause yeah, a lot of ours are broken up into separate files and it doesn't seem to be much of an issue when we get into building in Cloud Code. Tim, I don't know if you've got any extra insights on that as well.
Yeah, it's in the sense that Figma's MCP will use whatever link you, whatever frame link you send it. So as long as you, your account has access to the file, well, The agent's gonna be able to get at that, but it, but I think it's, yeah, it's probably more of a design question. Like how do I organize my Figma files in a way that can be— well, and I, I think Billy, what we've come up with in having those design tokens, those variables central in a file and then bringing them into product files has proven to be scalable and maintainable.
Yeah. And it's. And it's been nice even on our internal team, we've been having even some of the designers build out the components themselves. So as they might build a new component definition inside of a Figma file for a specific product, but then they're also building out the coded definition as well and running through that workflow as well. So it's a little bit easier on the governance side too. So it doesn't have to be a single team managing all of that. So as folks need things, they can build those out. And make sure they define all that correctly, and then they can publish the live component as well.
