Optimizing the Path From Design to Production in Engineering Workflows

I'm Akbar. I'm a developer advocate at Figma, and advocates are practitioners that work to create value for the people that use our products. And I spend a lot of my time talking to teams about how they bring their ideas to production across the product development lifecycle. Now, today it's easier than ever to make something. And with agentic coding tools, it's really tempting to think, why not just start coding it? You can spin something up in minutes. You can start working towards your idea, and you might even have something that looks pretty good pretty quickly. But if you've ever gone through this process, you know just how messy it can get, using code and patterns that might not match your own and just how shallow the results can be. So the best outcomes only come when you're thinking about them the right way. Whether you're using AI to create something brand new or to translate between design and production, the why really matters. And AI tools shouldn't just be about getting results faster, but allowing us to explore further. So what do we do with that extra time? We save it so that we can allocate it elsewhere. Design is where we should be spending that time. And at Figma we think a lot about the product development process and how our tools can help us make something meaningful.

Now, we think about this in three parts. The first part is exploration. Exploration, representation, and production. And exploration is our playground. This is where we ideate on different ways that we could solve a problem. And it's the realm of possibilities of things that we could make. Now, let's use LEGO as an example. Exploration is all the different things that we might want to build with LEGO. We don't know exactly what it is that we want to build yet, but we need to figure out what that is. And we might have some instincts about what direction to explore, and that's informed by our gut instincts, our expertise. But we don't have a fully fleshed out idea. Now, this can be a code exploration, a vibe-coded prototype in Figma Make, or even Figma designs and sketches. And it allows us to be flexible and think outside of the constraints.

Then there's representation, our blueprint. This is what we want to build. And this is when we've decided how we want to move forward and start aligning to that reality. It's where we've defined a vision of the approach that we want, and we start communicating that.

And in our case, it's the specific object that we're going to make, a LEGO rose, and the instructions. Now, this becomes our spec, or our PRD, of what we need to make, things that don't exist yet, and how it should look and feel. Now, some stuff might already exist, and it'd be wasteful to start over from scratch. So we decide what's worth reusing, and what needs to be made new. And we use design systems to help bridge that gap between Figma and code. They're not just about reusability and code, but also communicating our design intent.

Now, finally, we have production. And this is what gets delivered to our customers. Now, these are the physical LEGO pieces and the act of putting them together. And we make net new pieces for the things that we don't have yet, and assemble them with the pieces that already exist. And when we take the time to go through this process, we're using our expertise as engineers to decide what the right thing is to build. And the clearer this representation is, the easier it is to go from representation to production.

Now, if our instructions are really good, we can even leverage our AI tools to make this faster. And our expertise can be dedicated to the places where we want to spend time intentionally while we automate the tedium. In Figma, we use design systems to shorten that path from representation to production. And we can ensure that the effort that we're spending on the systems that are needed are being used that allow us we can ensure that we're spending our effort where it's needed, and we're using the systems that we've built to automate away anything that's less important or less impactful. Now, one of the ways that we do this in Figma is with variables and design tokens. These have specific representations in code that we can share directly with our LLMs. And with Code Connect, we're able to link specific code component patterns to components that exist in Figma. Now, this has been huge for improving developer handoff in dev mode, but it's also crucial when we share this with AI tools. And that brings us to how Figma brings this to life. Authoring code is one of the most compelling applications of AI today. And LLMs are trained to do this really well and write in many different ways. But the big challenge is teams need those tools to write code the way that they would write it. And this is where agentic coding tools like VSCode and Copilot provide that code-based context that enable LLMs to write code that matches what you're writing. And all this code has already been written. But what happens about those new ideas? Now, this is where Figma comes in. Because teams are already spending their time exploring, refining, and defining these new ideas on Figma's platform. And we can take that context and pass it to our AI tools to build them the right way. And we do this with the model context protocol, a standard that allows us to bring that context directly to our AI tools.

And design systems are that critical piece in making that magic happen. So let's take a look at what this looks like. So this is our app. And you can see that most of it is there. And it's hooked up to our data models. But the panel that we're looking at adding isn't there yet.

And in my file, you'll notice that my component is actually linked with Code Connect, which means that we're able to highlight where this component is in our code base, which component it's referencing, and how it should be used. And I'm using our local MTV server. So I'm going to select the design that I want to use. And I'll switch over to my editor, where we're going to tell Copilot to implement our Figma selection using our design system.

Now, there's a bunch of tool calls happening here to get metadata about the design, really rich Figma context, a screenshot, and even more details about what's happening here. Now, this tool, the Get Design Context tool that we're going to dig into in just a second, provides a structured format using Reactintel and syntax to describe all of the context that we have that exists in Figma. They say a picture is worth a thousand words. And in this case, Figma is worth even more.