How Figma GrowsHow to go from 0 to $10-20B in 12 years: the story, PLG iceberg, position, and product process of one of PLG's hottest companies
Figma saved Notion’s life. You read that right. When Ivan Zhao and Simon Last moved from San Francisco to Kyoto after laying off their 2 employees, Ivan spent 18+ hours a day designing Notion in none other than Figma. That’s not the only thing you haven’t heard about Figma.
While many have told the story, and Figma had a big bout of news with the Adobe deal, relatively little has been done to analyze the product, the product strategy, and the product building process. I’ve first-hand seen the shift from Photoshop to Sketch to Figma in product design circles over the last 15 years, and how it’s impacted PMs. That’s where today’s piece comes in. Today’s PostWords: 10,572 | Est. Reading Time: 49 minutes
Part 1 - The Story of FigmaThe story of Figma has been loosely told across the web, but the story of the product is less well-known. Wikipedia also has several notable errors. Here’s the real scoop. Chapter 1 - OriginsDid you know that Figma has its origins with Peter Thiel? No, not as a founder. But as the creator of the Thiel Fellowship, which Dylan Field applied to (here is his whole application) and won while he was taking a semester off from being a computer science student at Brown. The Thiel Fellowship is a wonderful fellowship with zero dilution to your company. But it has a condition: you have to drop-out of school. How did Dylan build the confidence to take the leap? His co-founder, the CS Teaching Assistant Evan Wallace:
Dylan realized Evan was so brilliant when he had pulled him aside the year earlier to show him a graphics demo that landed him in WIRED. So drop out of school Dylan did. Solving the File ProblemIn Inspired, Marty Cagan concludes good product opportunities are at the intersection of 3 things:
Figma’s co-founders had the right ingredients to discover exactly such an opportunity. 1. What’s recently possibleEvan actually was at the forefront of what’s recently possible. That graphics demo? It made Evan one of the few people in the world who understood the innovative power of WebGL. Before WebGL, creating Photoshop in a Browser would have been insane. After WebGL, the possibility was real. 2. What users needDylan was at the forefront of what users need. That semester he took off to work at Flipboard as a design intern? It helped him acutely understand, “the file problem.” The design team would spend hours on version control and files—yet still struggle with collaboration. Designers would go off in their own corner for a few days and emerge with new designs, instead of bringing everyone along. It was like dealing with Microsoft Word files in the era of Google Docs. 3. What’s good for the businessNeither of them were particularly close to what would work for the business. But they both had a good sense that design software was a big category. So after tossing around ideas from drones to photo editing, they decided on Photoshop in the browser. They didn’t know if they were going to be a SaaS or a one-time, but they knew they could monetize. Photoshop was a huge business, and they would take a piece of it. This is a crucial lesson: in the early days, it’s most important to find something that’s at the forefront of what’s recently possible and what users need. The business part can come later. Chapter 2 - Building in StealthBuilding “Photoshop in the browser” was a strong pitch. In fact, here is the actual pitch from 2013¹:  It was enough for the duo to raise a $3.8M seed round from name-brand valley investors, including Index and Jeff Weiner (at the time, LinkedIn CEO). This bought them time to build. Armed with guidance from the Thiel Fellowship’s team that they should, “focus on what matters — the product — and stay quiet in order to avoid distractions,” they got to work. Actual DiscoveryProduct thought leaders like Teresa Torres of Continuous Discovery Habits preach constantly iterating on your product with your customers. The beauty of Dylan and Evan? They actually did it. As Dylan told TechCrunch:
But doing things the hard way doesn’t always yield the fastest results. Dylan and Evan ultimately needed the courage to build for 3 years before launching. Learning about Management3 years is a long time. Morale dropped in this period. In all those user discovery sessions, it wasn’t even clear their vision made sense. These were actual things designers testing Figma said:
Designers are the ultimate product critics. Plus, they have highly optimized workflows that they consider their paintbrushes. So they are loathe to take on inferior one’s. Every deficiency in Figma they saw, they—typically kindly—pointed out. On top of the negative user feedback, it didn’t help that Dylan was pushing the team hard and held a high quality bar. Eventually, the senior folks at Figma had to stage a management intervention, where Dylan took a few days away from the company. As he told Sequoia:
Of course, every entrepreneurial story has tales like this. Dylan just happens to be honest about it. Hiring a VP of ProductDylan brought in Sho Kuwamato² — who is still Figma’s VP of Product in charge of the editor. Sho acted as a “late co-founder.” At that point a technology industry vet with 20 years of experience at Macromedia, Adobe, and Medium, he helped bring a dose of adult leadership to the young team. Making the Choice to Focus on Interface Design“Photoshop in a browser” was enough to raise money. But it wasn’t specific enough to build a product. Photoshop has thousands of use cases: from photo editing to interface design, 3D design, animation, print editing, digital painting, and on and on. In a series of meetings, the Figma team decided that they were going to focus on interface design—and not do any of those other use cases. This really unlocked the team’s velocity. As Dylan says, they “were able to move much, much faster.” Because this piece was too long for e-mail, you may want to migrate to your browser: Chapter 3 - The Road to LaunchWhile the team was busy working on the product, Dylan had a range of responsibilities. Raising More Venture Capital (VC)Chief among those for Dylan was talking to marquee Silicon Valley VCs. He kept in touch with most everyone who respectfully said no to the seed round. One of those firms was Greylock. In 2014, the firm put product leader Kevin Kwok on the case to diligence the company. As he tells it:
For keen product observers like Kevin, it was obvious Figma solved the #1 problem in interface design, at that time. Observers like Kevin relayed the new back to the head VCs, and they all decided Figma was onto something. So, they bought one third of a company that had not even launched yet. It valued Figma at ~$47.5M post-money. Launch Readiness: One Full-Time CustomerMeanwhile, to get to launch readiness, the team focused on getting one customer to use Figma full-time. They eventually found that customer in Coda³.
Once they had Coda, they were maniacal about offering quality service to make sure that customer liked Figma. They put the service in Software as a Service (SaaS). As Claire Butler explains:
With Coda actually using the product full-time (with a designer of one), the team had finally proved they were ready. Next step: finalizing the feature list to launch. Cutting Multiplayer Out of LaunchMost people don’t realize this: but Figma didn’t launch with multiplayer. It’s all about knowing your user. The Figma team realized that designers don’t make a rational decision to purchase a product. They choose the instrument of creativity that feels best. So the team was maniacal about feel. They went so far as to print out pictures of the UI on the wall as they got all the details right:
But feel is not just visual UI. It’s performance. It’s familiarity. It’s consistency. And multiplayer still did not have the right feel by December 2015. As Sho explains:
Big Launch 🚀After 3 up and down years of development, Figma launched its Closed Beta in December 2015. The team went so far as to put multiplayer at the center of their messaging — even thought it wasn’t ready yet:
And, oh boy. The press release was a whopper. Dylan called out his larger rival and made his roadmap clear:
The stealth company managed to get TechCrunch and VentureBeat features on launch day. On top of that, they did an all-out social media blitz. Dylan built a script to make sure they covered all the different nodes within the design Twittersphere. And Clare got a hold of them. The result was that Figma made quite a mark on release. But Figma was still in closed beta. And a successful future for the young startup was anything but guaranteed. Chapter 4 - Building the best productAs the closed beta members gave Figma feedback, they took it more than seriously. Customer support as everyone’s jobOne of the key differentiators of Figma compared to most companies out there, especially in the early days, is no one shied away from customer support. Even after Figma hired a dedicated support team, designers and developers were still staying close with customers. Engineers were spending 20%+ of their time on customer support. This allowed them unique insight to quickly iterate the product to a great state. Sho expands on the impact:
This would prove to be an enduring advantage over more waterfall competitors like Adobe, who didn’t have engineers who understood the product as well. Nailing the early launchesThe early team nailed core product functionality that has delivered enduring advantages over the competition to this day. Enduring Advantage 1 - Slack from the startFigma’s very next release after closed beta was a Slack integration. Nothing fancy, right? Think again. This integration made it so that notifications about Figma come through Slack, not Figma itself. This created a foundational integration with the other software designers spend their whole day in: their chat app. It’s kind of amazing that other companies still haven’t warmed up this yet. Photoshop notifications are still a total mess, hardly coming through Slack. Same with most SaaS. And everyone is missing a huge opportunity. Enduring Advantage 2 - Vector editingFigma’s next release was vector editing. Traditional interface design tools like Adobe XD and Sketch rely on paths. Paths are a chain of lines and curves. Vector networks, what Figma uses, allow lines and curve between any two points instead of requiring they all join up to form a single chain. This is a crucial difference. Take the example of an arrow. Join seven lines together into an arrow in Sketch, and you aren’t able to manipulate the size without bungling the connections. This is because it has a static understanding of each line:
Being able to change the size of drawn objects is a huge benefit. But Figma’s vector networks don’t stop there. They also allow bending, dynamic fills, and a host of other UX improvements to the design experience that the competition just can’ do. It’s hard to notice this change when you use it because it’s so intuitive. But you do notice how much of an improvement it is when you switch back to something else. As Evan explained:
Enduring Advantage 3 - Sketch ImportAnother really important release from the early days of Figma was that it released the ability to import Sketch files. At the time, Sketch had become the darling in interface design circles and was the tool of choice for trend-setting designers. Figma made it easy to go from Sketch’s paths to Figma’s vector networks. It was another example of Figma being 8 years ahead of the competition. Sketch did not release Figma import until 2023 (!). Enduring Advantage 4 - Real-time simultaneous editingRemember when we talked about multiplayer not being included in Figma’s closed beta? That was the final feature to create. Not just a Slack integration, but actual real-time simultaneous editing (the thing Dylan knew was important in 2013, but didn’t think was possible yet):
It took nearly 9 months of an all-hands on deck effort for the team to finally complete multiplayer functionality that matched their feel standards:
It was looking pulling on all three variables that make performance of a web app hard at once: high refresh, low requirements, with amazing resolution. Real-time simultaneous editing would prove to be an engineering marvel that is unmatched to this day (I’ll cover that more in Part 3). We mentioned it earlier, but it’s worth double emphasizing: this was not obvious. As Evan explains:
Chapter 5 - Taking over the marketAll these features put together worked. They created major market demand for the product. It helped that Figma was free through 2017. It was the PLG model to a degree most companies can’t even dream of. But when Figma finally started charging, that didn’t hinder growth in the slightest. Sketch and Photoshop’s market share crumbledIn fact, Dylan tells the anecdote of a Microsoft executive who asked them to start charging so they could adopt the product more widely:
This played out across the industry. Once Figma was starting, companies could adopt it. And Figma went from 10% market share in 2017 to 90% in 5 years:
It’s hard to overstate how quickly the shift happened. Here’s what someone from the front lines had to say - former InVision founder and CEO Clark Valberg:
Building out the Growth MotionOver the years, there were a number of important core product releases, from components (2016) and team libraries (2017) to Figma 2.0 (2017) and Plugins (2019). Figma was a “core product” company for the first few years. But in the 2018-2020 period, it accelerated those market share gains by building out its growth motion. 2 key components were:
Capitalizing on The PandemicAll these efforts set Figma up to be ready for the 2020 Covid pandemic. As teams were all going remote, Figma had built the core product up to a level for massive enterprises and startups alike to make the shift to Figma. If collaboration had to be remote, companies had to choose the best remote collaboration tools. And for design, Figma was clearly that. + Market Momentum = GrowthIn this period, the team also benefitted from the rapid growth of the design field itself. As Dylan explains:
All this put together culminated in Figma owning the interface design market. Epilogue - Charting New PathsWhat’s next for a company that’s conquered a market? Of course, Dylan has a plan:
In April 2021, Figma released its second major product: FigJam. And in June 2023 it released its third: Dev Mode. Both are focused on expanding Figma to the parts of the design lifecycle before and after design: the brainstorm of the idea, and the translation of the design to code. They expand the core user beyond design and into Product Management and Engineering, two users who already extensively used Figma anyways. They offer Figma its new growth paths. We’ll deep dive these modes in Part 3. Part 2 - The Breakdown of Figma’s PLG MotionSo we understand how its PLG motion was pieced together. But how does the Figma of 2024 actually manage all the elements of its growth motion, in the product? ... Keep reading with a 7-day free trialSubscribe to Product Growth to keep reading this post and get 7 days of free access to the full post archives. A subscription gets you:
|
![vn1.mp4 [video-to-gif output image]](https://substackcdn.com/image/fetch/w_550,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3d136db3-4161-4b52-bd75-59ed536de48a_600x338.gif "vn1.mp4 [video-to-gif output image]")
![3c2679e50eb04d51648f437bf9a0af1a61db1f69.mp4 [video-to-gif output image]](https://substackcdn.com/image/fetch/w_550,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F69e66b62-9c82-463b-b326-33538922157c_600x345.gif "3c2679e50eb04d51648f437bf9a0af1a61db1f69.mp4 [video-to-gif output image]")
This week’s system design refresher: Top 9 Most Popular API Protocols (Youtube video) What is a deadlock? What’s the difference between Session-based authentication and JWTs? Top 6 ElasticSearch Use Cases Top 9 Cases Behind 100% CPU Usage SPONSOR US ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ...
Comments
Post a Comment