What codegen is (actually) good for
Should you just use codegen to… generate code? Not so fast. Codegen is best for augmenting your design to development process, not automating it.
Codegen is the process of generating code automatically, based on a defined set of rules or specifications. There’s a wide ecosystem of codegen tools, including:
- Simple code completion in an integrated development environment (IDE), like Microsoft’s IntelliSense feature
- Templates for repeating code patterns, like code snippets in Figma
- Visual programming and no-code tools, like Bubble
- Modern AI-based codegen systems, like GitHub Copilot and Replit Ghostwriter
Illustration by Cynthia Alfonso
As ChatGPT eats the world at breakneck speed, many of us are left wondering what AI will upend next. From the big questions about what this might mean for creativity or design, to more concrete concerns about how we might synthesize ideas more quickly—there’s a lot to consider across disciplines. Productivity is always top of mind, and AI-based code generation (codegen) systems have been growing in popularity. In fact, 82% of developers in Stack Overflow’s 2023 survey say they already write code with AI tools.
However, of those developers, only 3% say that they highly trust the accuracy of these tools. That skepticism is no surprise. When we first started working on Dev Mode, a space for developers in Figma, we imagined it as a way to automate design to code. While early versions were promising, as we iterated on our approach, we found that developers didn’t always find the code useful. In practice, it’s very hard to come up with code that works for a diversity of needs and frameworks. So, we pivoted and set out to help teams more easily translate designs to code in a less literal, more augmented, way.
Instead of thinking about codegen as a replacement for a developer, what if we thought about it as an extension?
Instead of thinking about codegen as a replacement for a developer, what if we thought about it as an extension? In many ways, it’s an intelligence amplification (IA) tool. It’s the mental equivalent to how people can travel a lot further—and easier—on bicycles than on foot; Steve Jobs famously compared a personal computer to a “bicycle of the mind.” So in the spirit of getting there faster, here are a few recommendations for a smoother ride with codegen.
Psychiatrist William Ross Ashby first proposed the idea of intelligence amplification (IA) in “Introduction to Cybernetics” (1956). Engineer and inventor Douglas C. Engelbart elaborates on IA in “Augmenting Human Intellect: A Conceptual Framework,” introducing it as improving a person’s capabilities “to approach a complex problem situation, to gain comprehension to suit his particular needs, and to derive solutions to problems.” People often compare the two possible futures of technology, because IA puts people in the driver’s seat and enhances it, while AI puts technology in the driver’s seat.
Going from 0 to 0.5
Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects.
While we’re still a far cry from completely automating design to code informed by your codebase’s unique patterns, codegen has other merits. If you’re working on a product with a design system and component library, codegen can speed up your handoff workflow by making suggestions to take out some of the guesswork surfacing component names and property values. Think of it this way: if your design system is a toolbox, codegen will suggest which tool to use and how to use it.
Still, codegen offers the most leverage when you apply it in a specific way, for your specific team, company, and workflow. For example, if your design system and component library are already in Figma, you don’t need an automated design-to-code app. In that case, you’re better off referencing tokens, viewing documentation, or building a codegen plugin to generate custom snippets. These hints will enable you to process and understand what you’re looking at more quickly, as you start to write the code yourself. Codegen will help you go from a blank screen to a starting point—maybe not 0 to 1, but 0 to 0.5—much faster.
Codegen can also help you interpret design requirements like raw style values—such as hex codes and pixels—to build a piece of UI or uncover a token name or component property value when you’re implementing a design system.
Variants allow you to group and organize similar components into a single container. This simplifies your component library and makes it easier for everyone to find what they need.
The code for implementing an instance of a component looks very different from the code defining a component’s style and properties. If you’re building out your team’s component library, you’ll write component code for the underlying visual style as well as the variant and property definitions. If you are implementing a component library, the code you are writing is often component instance code as well as surrounding layout style.
Where do you go from here?
Designers and developers using Figma often build internal plugins suited specifically for their needs. For example, Elliot Nolten, IKEA Retail Product Designer at Ingka Group, designed an internal plugin that retrieves product data and images from the internal database and places it into the team’s designs.
As more people join your team, and you’re faced with new technical challenges, your codebase will inevitably get more complicated. The most difficult part isn’t just generating new code to keep up with those demands, but staying on top of what’s changed. Codegen’s value is in highlighting these changes, and providing a chance to save time and energy in the design and development handoff process.
In an ideal world, you’d create a custom codegen plugin, but building one takes time and resources. Rather than jumping to a bespoke solution, establish a good foundation by making sure that your team’s designs map to patterns in code. For example, if components like spacing or color tokens are named the same way in your designs as they are in your codebase, Figma’s native code snippets will generate the right code. Then, when it comes time to build a custom plugin, your design system will be constructed in a way that aligns design and development.
Figma is great for making sure your team uses design patterns that will better translate to code patterns.
Variables store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows.
Components and variables are key parts of a design system.
If you’re looking for a place to get started, components and variables in Figma make design systems easy to implement, as they encapsulate patterns in tokens and properties. In addition to these being easier to implement in code (writing a variant name instead of all the styles that the variant uses), they are easier to maintain long term.
You may have noticed that we didn’t recommend codegen as an automated design-to-code solution; that’s because today’s tools bump up against the limitations of codegen, especially when you’re working on a team with a design system.
Codegen won’t replace your team’s patterns
Your team’s design and development needs are unique. Factors such as company size, security requirements, and technical constraints all contribute to your specific circumstances. In order to accommodate and adapt to these needs, your team has surely made decisions about style or component frameworks for your UI library, the schema of your design tokens, how you organize and name your files and components, or even the preferred conventions around syntax and formatting your code.
With all of this organization-specific context, you can’t just paste auto-generated code directly into your codebase without modifying it further. While you may find ways to use machine learning to help along the way, due to the limitations of existing tools, authoring your team’s codebase is a hands-on activity, and your team’s patterns are there to make the process easier.
Generated code can be a really helpful starting point. But even then, you still have to edit these code snippets to bring in other properties, add formatting, extra styles, and more. Once the code is in that state, subsequent Figma file changes can’t always be “pasted in” using codegen in the same way; doing so would be overriding the work you’ve already edited. At that point, the value of codegen is as a reference more than it is a snippet you can paste.
Every tool eventually bumps into its limitations. While codegen won’t replace your team’s patterns, it can still support your inherent programming abilities, enabling you to turn designs into code much more easily and quickly.
Codegen isn’t just an automated, hands-off replacement for translating design to code; it’s best as an augmentation for you to more quickly understand design changes, and to keep your team in sync. Here are a few resources to help you get started:
- Learn about showing diffs
- Use Figma’s plugins for other code editors, like Figma for VS Code
- Watch Figma Software Engineer Sawyer Hood's Config talk about building plugins for Dev Mode
