Dear Reader,
As mentioned in our 2022 review article, this year I want to do business teardown articles, analyzing a particular company. I can think of no company better than Figma.
In September 2022, Adobe announced that it was buying Figma for $20 billion.
How did a 10-year-old company become so valuable? Here is how they did.
Table of Content
Dylan Field and Figma
Why Figma Wins
Collaboration, Collaboration, Collaboration
Cross-side Network Effects and Growth loops
Plugins, Ecosystem, and Communities
Why Adobe bought Figma
Building Multiplayer is Hard
Missing the Transition of the Design Industry
Summary
Dylan Field and Figma
Figma is a collaborative design tool, that helps designers work together with other designers and team members in a web browser, to produce creative designs for digital product development. Similarly, to how multiple people can edit a document in Google Docs, Figma is that for design.
Figma was co-founded by Dylan Field (who is the CEO) and Evan Wallace. While at high school, Field fell in love with design, and web development. He began making websites for friends, and eventually had an internship at the tech learning company; O’Reilly Media. He also interned at LinkedIn.
Around this time, he met Evan Wallace, a fellow student at Brown, who had interned as a software engineer at Pixar and Microsoft. They began to exchanged ideas on building something and one day starting a company together.
Wallace had experimented with and was an expert on the new WebGL technology, that allowed designers to seamlessly render graphics in the browser. This impressed Field, and swayed the decision that they should leverage WebGL to build a new design tool. Either for photo editing or computational photography.
They applied for the Thiel Fellowship and received $100,000 over two years to support their new company. At the time the dominant design tool was Adobe Photoshop.
So, Field thought: Why can’t we build a collaborative Photoshop in the browser? That thought changed everything.
They began building what would become Figma in June 2013, and didn’t launch their closed beta until December 2015. These were two intense product development years for Fields and his team. The rest of the design industry were very skeptical their bet on WebGL would work.
Here is Dylan Field:
“The more we built with WebGL, the more confident we were that this could be a technology we could use to go build a professional-grade interface design tool.”
“But like you said, no one believed us. I kept trying to recruit people, and I found that if I didn’t show up and immediately open my laptop to show them the tool working, they just wouldn’t believe me.”
Before Figma, Designers at the time were constantly sending design files back-and-forth with their team, but ensuring each team member used the latest version of Photoshop and hence able to open the files was challenging.
Besides the technology, this was the key challenge: going beyond making a better clone of Photoshop, to transforming the design process of design (and product) teams of all sizes.
By the time they launched to closed beta in December 2015, users who tried Figma were thrilled, and the waitlist grew. It has been nothing but success from there.
But how did Figma do it? How do you take a new technology and disrupt an entire industry? How did Figma democratize design?
I was intrigued by this question till I read the excellently written 2020 article: How Figma Wins by Kevin Kwok. This was so valuable that I’ll be referencing it throughout this article.
Why Figma Wins
Let’s start with the user and the problem.
Remember how I said earlier that designers at the time had to send design files back -and-forth, and had to ensure they each were working with the latest version of Photoshop.
Let’s explore this.
In Why Figma Wins, Kevin Kwok writes:
“Because design teams saved all their files in a shared folder like Dropbox, every time a co-worker made a revision, they would get a notification. And often there were complex naming conventions to make sure that people were using the right versions.”
Imagine the administrative overhead. Figma solved this problem through their ‘browser-first’ approach. They realized that rather than designs in Figma being only stored in the cloud, they could also be edited in the cloud, in real-time.
This meant that Figma users in the same team always worked on the same design version.
This approach was integral to Figma’s value proposition – make design collaborative.
Collaboration, Collaboration, Collaboration
By ensuring designers could work on the same design in the browser was ground breaking, but Figma took it a step further.
Their core insight was that design is larger than just designers.
In Why Figma Wins, Kevin Kwok writes:
“Design is all of the conversations between designers and PMs about what to build. It is the mocks and prototypes and the feedback on them.”
“Building for everyone in the design process and not just designers is also the foundation of Figma’s core loop, which drives their growth and compounding scale.”
“While Figma has been building the ideal tool for designers, they’ve actually built something more important: a way for non-designers to be involved in the design process”
By making sharing designs as easy as sending a link that anyone can open directly in their browser, Figma made the design process more accessible, and collaborative.
The non-designer gets the latest design, can comment directly in designs, and review these in real-time with the designers in meetings.
In Why Figma Wins, Kevin Kwok writes:
“Bringing non-designers into the process is what gives designers a seat at the table of product and business decisions.”
“Design can be drafted simultaneously with the product, allowing feedback to flow in both directions throughout the process.”
Previously, if the non-designers (the Product Managers, Engineers, or the CEO) wanted to get involved in the design process: the designer would send them the current file, they would need to have the right version of Photoshop installed on their computer to access the file.
With Figma, all of that complexity is reduced to sharing a link.
Cross-side network effect and Growth Loops
Figma’s growth started by designers using Figma, and telling other designers at their companies about Figma – direct network effect.
But by driving collaboration with non-designers, Figma has benefited from what Kevin Kwok calls cross-side network effect.
This has further sped up Figma’s growth within companies. There is a better business case for companies for paying for Figma when different team members use it.
In Why Figma Wins, Kevin Kwok writes:
“Much of Figma’s current success is driven by its ability to spread within companies. Figma becomes more useful as more people within a company use it, driving advantaged speed and scale of penetration within companies”
“By bringing both designers and non-designers alike into Figma, they create a cross-side network effect. In a direct network effect, a homogenous group gets more value from a product as more of them join. In contrast, a cross-side network effect involves two (or more) distinct groups that grow in size and value as the other group does, too”
“Paying for a new design tool because it has new features for designers may not be a top priority. But if product managers, engineers, or even the CEO herself think it matters for the business as a whole—that has much higher priority and pricing leverage.”
Plugins, Ecosystem, and Communities
Figma sought to take collaboration to the next level, and build a Figma ecosystem through the release of Figma plugins in August 2019. Plugins are web programs created by the community to perform one or more user actions on Figma.
So, if one community member has done that action before, another user can simply use that plugin, rather than doing it again. These could be UI kits, design systems, or custom charts.
The idea being to optimise a designer’s productivity, by fostering greater collaboration and community between Figma users. This would increase the network effect of Figma – making it better for new users and new designs to be created.
It is also important to note that this would create defensibility for Figma with other competing tools, and extend the reach and usefulness of Figma. It would make it harder for an Adobe, to simply copy Figma, hence why they had to buy them.
Why Adobe bought Figma
Adobe bought Figma for two reasons: it is hard to add multiplayer collaboration to a legacy software, and they missed the transition of the design industry.
Buying Figma is their way of overcoming these two factors and getting back in the game.
I’ll explain.
Building Multiplayer is Hard
Adobe photoshop was a desktop software which involved saving and editing design files. These file systems aren’t compatible with multi-user applications. A file only needs to change when it is open on the system, but a multi-user application has to be editable always.
Rather than a file, these multiplayer applications like Google docs and Figma are web containers enabled by developer API. But building a developer API is very hard.
Another aspect of the technical challenge is backward compatibility – when you upgrade a software, being able to run older versions of the file.
Amal Dorai explains this clearly:
“If Photoshop CS5 created files that people using CS4 couldn't use, users would be very reluctant to upgrade to CS5. It would break the upgrade-based business model.”
“If you add something like high-depth color to Photoshop, it's easy to make that backwards compatible - just show the file in standard color on older clients. But multiplayer collaboration is too big of a change to be delivered in a backwards-compatible way.”
Adobe would likely never have caught up with Figma regarding multiplayer collaboration, and that’s how user teams were collaborating.
It was easier to acquire Figma and use their architecture to rebuild their existing apps for multiplayer collaboration.
Missing the Transition of the Design Industry
In the early 2000s, the design industry began to shift from editing pictures and graphics (pixel assets), to (rendered UI) building entire digital products like websites, and later mobile apps (with the release of the iPhone).
But Adobe missed it. In 2005, they even acquired Macromedia Fireworks who were leaders in this space but eventually shut them down due to overlapping functionality with other Adobe products. Adobe remained a desktop software, while other tools were cloud based.
Figma on the other hand had an industry native solution. They listened to their users, and built a tool that addressed the entire design process including the handoff of the designs for other prototyping tools like Invision.
Suddenly, designers only needed one tool, Figma. It worked in a browser and there was no need to download or install anything.
Karri Saarinen (formerly of Airbnb) writes:
“For example, they came to the Airbnb design team to ask about what we would need for the design system and then they basically built that”
“They addressed the whole process, not just designing the UI. They built simple prototyping tools which then killed Invision. The web sharing and basic handoff tools kind of made handoff tools like Zeplin and Abstract obsolete.”
By the time Adobe announced a competing product: Adobe XD, it was too late. To users it still felt like Adobe’s ‘software in a box’ which they had put in the cloud.
But just putting it in the cloud, and adding subscription didn’t make it a better product. It just changed distribution.
Karri Saarinen writes:
“So in the end what Figma built was a design tool and platform that product designers and the product teams needed to design products. It had the cloud, collaboration and the features that work in a way that reflect the how things are designed and built today.”
Compared to Adobe, Figma had a better product, strong network effect (mentioned earlier) due to their plugins, and community driven growth.
Their business model of offering basic features free, and then charging for an enterprise offering with more features, was more accessible compared to Adobe’s expensive subscription service.
This is why Adobe had to spend $20 billion.
Summary
There you have it. We’ve looked at Figma in this inaugural article of business breakdown. Figma was able to go from a 10-year-old startup to a $20bn acquisition by Adobe by doing a few things right.
Figma focused on building a collaborative design product for designers and non-designers alike. By focusing on the entire design process, speaking to users, and leveraging the new WebGL technology and the cloud, Figma was able to build a ground breaking product. This fostered network effect within companies.
The release of an ecosystem for plugins has fostered a thriving Figma community, further extending their reach and usefulness. Today, developers make up 30% of all Figma users.
Adobe was the market leader, but had to buy Figma because it is hard to add multiplayer collaboration to a legacy software product, and they missed the transition of the design industry. They would have continued to lose market share and revenue. By buying Figma they overcome their mistakes, and leverage the technology, team, and successes of Figma.
Bye for now.
Nero
Delivering Value,
Racing Towards Excellence.
If you have any more questions kindly leave a comment below or message me at notesbynero@gmail.com.
If you’re finding this newsletter valuable, consider sharing it with your friends, or subscribing if you haven’t already.