Figma’s Dev Mode feature has recently come out of beta, and it’s further evidence that Figma is now targeting developers as much as designers. I caught up with CTO Kris Rasmussen to find out more about how developers are using Figma, and how the company is re-adjusting to life as an independent company after its $20 billion acquisition by Adobe was called off.
It’s been exactly a year since I last spoke with Rasmussen, which was just after news broke that Figma had accepted an acquisition offer from Adobe. At that point, Rasmussen revealed to me that one-third of Figma users were developers — and that for its paid product, developers actually outnumbered designers.
The ratios don’t appear to have changed, but this time Rasmussen was keen to downplay the distinction between developers and designers.
“So I think it’s worth noting that we don’t necessarily want to draw a firm boundary between design and development,” he said. “There’s a lot of people who do both jobs. And so we have everyone from solo freelancers who are both designing their applications and building them, as well as larger teams where there’s an established design system — and developers are receiving those designs and working to actually implement them in an existing production codebase. So we’re kind of trying to cover that entire spectrum.”
Dev Mode, described as “a new space in Figma for developers with features that help you translate designs into code, faster,” launched as a free beta last June and went into general availability at the end of January. The company says it is included in all full design seats, but can also be purchased separately on the org and enterprise tiers. It’s also worth noting that there is a Visual Studio Code extension.
Figma VS Code extension.
The emergence of developer-specific tooling in Figma’s product offering suggests that the company is trying to increase its user base by attracting more developers. Ever since the launch of Figma in September 2018, it has been positioned as “a cloud-based design tool,” but with Dev Mode, it has essentially become a design and development tool.
“So the way we look at it is from day one, we’ve always built Figma for the entire development team,” Rasmussen said when I mentioned the current focus on developers. “I think that’s really kind of what differentiates Figma from a lot of other tools. We brought it to the web, we made it a lot more accessible. We engage the entire product development team in the design process. And so developers have always been, like I said, a core cohort of our weekly active users.”
He added that Dev Mode is “a dedicated space for developers, so we can really cater to their needs even more so than we have in the past.”
React and AI Integrations
Of course, a lot of web development these days is done using JavaScript frameworks — and in particular, React. I asked if Dev Mode helps developers translate designs to that kind of JavaScript tooling.
“So one of the other things that we really wanted to do with Dev Mode is we wanted to give developers access to plugins without necessarily […] having to buy a full design seat,” he replied. “This is something our customers have been asking for for a long time. And so with Dev Mode, you can now run developer plugins. And a lot of the plugins in the ecosystem are doing everything from, you know, integrations with other tools — like task managers like Jira, for example — to actually building entire code generation pipelines, with React and various other frontend frameworks.”
The other big trend in web development over the past year has, of course, been generative AI. In the web design space, there has been a lot of innovation around AI — such as Locofy, a new Figma plugin I recently profiled that lets frontend developers auto-magically convert designs into code. The CMS Drupal is also developing such features. So I asked Rasmussen if Figma is planning on integrating AI into its toolset.
“I mean, first off, we’re actually really supportive of Locofy and also Anima — another example of one of these plugins on the Figma ecosystem. So we’re definitely thinking about their needs as well, as we continue to evolve.”
He added that Figma itself is looking at similar problems, but “at different ends of the spectrum.”
“So we’re very much focused on helping to make the actual design process, the act of essentially visualizing what’s in people’s heads and aligning around it, more accessible and easier for the organization to participate in.”
But he said that Figma, similar to Locofy and Anima, is also “thinking about ways in which we can help people bridge the gap between those initial visualizations and the actual production code they already have in their code base.”
He noted that some of that functionality is already built into Dev Mode — as an example he mentioned code generation for styles. But they’re also thinking about issues such as reconciling your design library in Figma with all of your different code libraries and components.
“We’re trying to think through how can we help people not recreate that from scratch, but rather find the associated components in code and how to use them more efficiently — so that there’s less accidental recreation of code and less divergence of design patterns in the real application.”
Originally published at The New Stack: https://thenewstack.io/figma-caters-to-developers-with-dev-mode-and-ai-integrations/