Figma Targets Developers While it Waits for Adobe Deal News
At the end of last week, news hit that Adobe’s $20 billion acquisition of Figma might not go through, as the U.S. Justice Department is reportedly preparing an antitrust suit to block the deal. This news came in just a couple of days after I spoke with Figma’s CTO, Kris Rasmussen. He wasn’t willing to talk about the deal in any case, since it hasn’t closed. But our interview put into sharper focus some of the technical and product updates he was able to share with me about Figma.
One of the things I learned from talking to Rasmussen is that Figma is trying to expand its audience beyond web designers. It’s now squarely targeting web developers as well. According to the company, roughly two-thirds of Figma users already identify as something other than “designer” and one-third of Figma users are developers.
“We actually have more weekly active users who are developers today than designers, inside of our paid user base,” Rasmussen said. “We’re really excited about opportunities to not just go from brainstorming to design, but also go from design to production — and really cater to the needs of the development teams who are working closely with the designers who live and breathe Figma today.”
These days, Adobe also sees itself as a platform that encompasses more than just web design. Even though its core tools include Photoshop and Illustrator — to this day, staple tools for web designers — its more recent cloud-based services like Adobe Creative Cloud are targeted at people who create “digital experiences.” That could be anyone from marketers to developers.
The potential acquisition is possibly the reason Figma has decided to broaden its target audience, although CEO Dylan Field has blogged before about embracing code. In any case, Figma’s core product is still being promoted as an “all-in-one design platform.” It also offers a relatively new product called FigJam, an “online whiteboard.”
How Are Devs Using Figma?
Since both Figma and FigJam are very designer-centric, I was surprised to hear that more developers than designers use the paid version. I asked Rasmussen how exactly devs use Figma.
“The obvious thing is collaborating with designers,” he replied. “By having a single source of truth of where your products are going visually, on the web, it just makes it really easy for everyone to stay on the same page, and share ideas and figure out what to do next with regards to product design.”
Many developers will iterate on designs themselves. “Maybe they’re a hybrid designer/engineer type, or maybe they just actually find it easier to communicate visually,” Rasmussen said. Developers are also using Figma and FigJam “to build engineering architecture diagrams, in order to run brainstorms and meetings,” he added.
According to Rasmussen, Figma thinks it “can go a lot deeper in terms of catering to the needs of developers” as they try to take a design and implement it in code. It’s the implementation of a design that Figma is focusing on, when it comes to developers.
“If you think about design and development,” he said, “there’s this debate in the industry around whether or not they should converge. And I think there’s definitely an opportunity to smooth over the transitions. But at the end of the day, there’s a design phase and an implementation and productionization phase.”
With current tooling for developers, Rasmussen says there is a “mismatch in terms of what you inspect directly in a design tool, and what you actually need in terms of the values when you’re implementing in code.” So Figma’s goal is to “streamline that relatively tedious process” for developers.
How Figma Uses Modern Web Standards
As for how the Figma products themselves were developed, Rasmussen was able to provide some fascinating detail around that. One reason Figma has become so popular with designers — and, apparently, developers — is that it’s a sophisticated web tool that makes it easy to collaborate. Much of the architecture of Figma came from its original CTO, Evan Wallace, the co-founder of Figma, alongside CEO Dylan Field. Wallace once described the Figma editor as a “hybrid C++/JavaScript architecture.” I asked Rasmussen if that is still true.
“It’s still very true today,” he replied. “So the kind of core of the engine, if you will, is written in C++. It’s architected more like a game engine, rather than a traditional web application. And then the surrounding UI now is written in a more standard kind of web way. So it uses React and TypeScript. So you can kind of think of it like a game engine that’s scriptable with TypeScript and uses React as the UI layer.”
Figma also still uses WebGL for rendering, although Rasmussen indicated that WebGPU will be considered once it becomes standardized across browsers.
Perhaps the biggest impact on the performance of Figma in recent years, however, has been due to WebAssembly. Originally, Figma used asm.js to compile from C++ to JavaScript, but when Wasm became available, it provided a better way.
“The benefits were pretty strong, in that WebAssembly basically gave us a whole other notch up in performance,” he said. “And it ultimately worked out really well for us in terms of reducing load times and making the application feel just as good as a native application.”
Both WebGL and Wasm are examples of what Rasmussen calls “low-level abstractions on the web,” which happened to become more available at the same time Figma was created (Field and Wallace began working on the product in 2012).
“One of the things that enabled Figma to exist when it did was these lower-level APIs, like WebGL and WebAssembly,” he explained. “It enables us to basically take what traditionally wouldn’t be possible to port to the web, and port it directly to the web and make it a bit more efficient — to really compete with what otherwise would have been locked up in desktop applications.”
I asked what other web technologies Figma is using in 2023, that perhaps aren’t as well documented as its use of WebGL or Wasm.
“Accessibility is a big thing for us too,” he replied. “So an example of this is our prototyping player. Even though we have our own custom rendering technologies, we actually do things like create shadow DOMs in order to leverage the extensibility APIs of the web, to make these prototyping experiences more accessible to screen readers. This is actually very similar to what Google Docs does.”
Generative AI
It’s easy to see how generative AI might affect a tool like Figma — for instance, perhaps AI could provide at least some of the UI elements in a design project. Rasmussen wouldn’t be drawn on how precisely Figma will use AI, but he did admit to personally finding generative AI “incredibly fascinating.”
He noted, however, that generative AI isn’t currently good enough to do product design.
“We’re actually trying to create structure and semantics behind design systems, and really trying to create things in a medium where you can then refine them and manipulate them and customize them, so a professional designer actually has control over the result. A lot of these diffusion-based models [of machine learning] don’t give you that sort of precision and control yet that would enable you to really build [or use] a professional-grade design system on the web.”
He concluded that generative AI is “something I’m really passionate about, but it’s still very early for us.”
Figma for X
There have been a spate of “Figma for x” startups in recent years — the cloud IDE StackBlitz, which Figma invested in, makes the comparison explicit — so I asked Rasmussen what these companies need to do to succeed in their verticals.
“Reimagine what the workflows are going to look like and what the use cases are going to be in this more collaborative, single-source-of-truth medium,” he said, meaning the web platform.
In other words, it’s more difficult than just taking a desktop application and porting it to the web. Although perhaps Adobe is now finding that buying the original “Figma for x” is also difficult, but we’ll have to wait and see how that turns out.
