Figma's Rise: Redefining Design Collaboration
How Figma Transformed Design with Real-Time Collaboration
Welcome friends ☕️
Today, we’re talking about Figma, the collaborative interface design tool that has taken the design world by storm. Let’s dive into how it all began and what we can learn from its success.
How a Visionary Idea Became a Design Revolution
What is Figma and Who Started It?
Figma, is an innovative design tool used to create and test designs for websites, apps, and other digital products. It is a popular tool for designers, product managers, software developers and helps anyone involved in the design process. Figma now supports design mode, FigJam (which lets you collaborate on a digital whiteboard), and Figma Slides for designing presentations).
FigJam
It was co-founded by Dylan Field and Evan Wallace in 2012. Dylan and Evan met while studying computer science at Brown University. Evan was a TA for several of Dylan’s classes at the university.
Their mission was to make design accessible to everyone by creating a web-based platform that allows real-time collaboration. Inspired by the collaborative nature of Google Docs, they envisioned a design tool that would bring the same level of accessibility and collaboration to the world of interface design. This vision laid the foundation for what would become Figma.
In 2023, Adobe planned to acquire Figma for a $20 billion but the deal fell apart due to regulators citing Adobe’s near-monopoly in the design software market. In May 2024, Figma is closed a deal to allow its employees and early investors to sell their stake to new and existing investors at a valuation of $12.5 billion.
How Did They Come Up with the Idea?
During his second summer at Brown, Dylan interned as a software engineering intern at Flipboard. After his internship, he began to question his major in computer science and math. He took a semester off junior year to work as a technical product manager intern.
In 2012, Dylan applied for and accepted the Thiel Fellowship, a 2-year grant of $100,000 to pause college and work on entrepreneurial projects. In his application, he was set on building a business around drone technology. A few weeks after submitting his application Evan convinced him to steer away from drone projects due to many potential challenges.
Evan was pushing them to work on something related to WebGL, which is a JavaScript API for rendering graphics in the web browser. Evan showed Dylan a demo he created using the technology that initially sparked the start of Figma. “You know, we could use this thing to build creative tools in the browser,” said Evan. Dylan recalled being frustrated using Adobe Fireworks every day during his internships. He wanted to create a design tool that would make it easier for teams to work together, regardless of their location. With Evan Wallace's technical expertise, they set out to create a product to solve these problems and be “Photoshop in the browser.”
Evan’s demo using WebGL
From Idea to MVP: The Development Timeline
Transitioning from an idea to a fully functional product took several years and involved overcoming numerous technical challenges. One of the primary hurdles was creating a robust vector graphics editor that could run efficiently in a web browser. Additionally, Dylan Field faced difficulties in his role as CEO, having only interned before starting Figma. The small team initially experimented with a variety of features, including photo editing, image cutting, and even a meme generator, without a clear direction.
The turning point came when the team decided to focus on interface design. Companies were becoming more design focused and standards were increasing now that mobile phones and tablets were increasing in usage. Designers now had to focus on consistent design across multiple platforms.
Dylan Field had initially approached John Lilly from Greylock Partners during their seed round. John Lilly, former CEO of Mozilla, had deep roots in design and extensive experience that intrigued Dylan. Despite initially turning them down, John saw potential and continued to follow up with Dylan, providing mentorship and strategic advice.
John Lilly: “You know, I don’t think you guys know what you’re doing, but I’m very intrigued, so let’s keep in touch.”
His guidance helped shape Figma’s direction, particularly emphasizing the need to start with a robust business tool before building a community. This mentorship led to Greylock leading Figma's $14 million Series A in 2015, adding to their $4 million seed investment from Index Ventures.
After several iterations and extensive testing, Figma launched its beta version in December 2015. Initially, people doubted the feasibility of a browser-based design tool, but the team persevered. Their MVP concentrated on core features such as vector editing, prototyping, and real-time collaboration. The web-based nature of the tool allowed users to access their designs from any device, facilitating seamless collaboration. This initial version received positive feedback, validating their approach and encouraging the team to continue refining the product.
Some technology used by Figma:
React
C++
NodeJS
Go
Web Assembly
WebGL
AWS
Postgres
Acquiring Customers
In the earliest stages of company-building, most companies focus on speed to market — launch an MVP quickly, gather hoards of customer feedback, and start pivoting your way into product/market fit. The sooner you can get your product out there, the better.
But the path to building Figma was an exercise in patience. Founded in 2012, Figma didn’t actually start shipping software to beta users until 2015. After launch, it took another two years to add paid pricing tiers — and a couple more to bring on a sales team.
Claire Butler, Figma’s Senior Director of Marketing, knew the design community was core to the company’s go-to-market strategy early on — even while they were still in stealth mode. Butler joined Figma as one of the first ten employees and the company’s first business hire. She began shaping the company’s growth strategy way before the product was publicly available.
Butler's approach to community-building involved planting seeds with power users and engaging in early discovery chats, focusing on gathering feedback and building credibility with the design community. She held involved informal chats and demos, where the goal was to spark inspiration and gather valuable insights. These early interactions were crucial in shaping Figma's development and building a strong foundation for future growth.
As Figma emerged from stealth, generating buzz and engaging with the design community became key. Tailored content, strategic outreach, and events like Pixel Pong showcased the product and built excitement. Introducing pricing tiers and a sales team followed, focusing on enabling multiplayer collaboration—a key differentiator for Figma.
One of their goals was to get designers to try out the tool with friendly competition and livestream it. They held a pixel pong event to showcase Figma.
Competition
In the competitive landscape of design and prototyping tools, several notable players stand out:
Miro
Miro is a versatile online collaborative whiteboard platform ideal for team brainstorming, mind mapping, and project planning. Its strength lies in facilitating early-stage ideation, complementing more design-specific tools like Figma.
Sketch
Sketch is a favorite among macOS UI and UX designers, known for its vector editing capabilities and extensive plugins. While Sketch excels in detailed design, it relies on third-party tools for collaboration, unlike Figma's built-in features.
InVision
InVision offers powerful prototyping, design collaboration, and workflow management. It excels in interactive prototyping and stakeholder feedback but often complements other tools rather than replacing them entirely.
Marvel
Marvel is intuitive and user-friendly, making it great for beginners and quick prototyping. It supports user testing and feedback but lacks the comprehensive features found in Figma.
Adobe XD
Adobe XD provides a robust suite for UI/UX design, prototyping, and collaboration, integrated with Adobe Creative Cloud. Its advanced features make it a strong competitor, though Figma's real-time collaboration often gives it an edge. Note: Adobe XD is currently in maintenance mode and will not receive anymore features.
Comparative Insights
Each tool has unique strengths: Miro for brainstorming, Sketch for design precision, InVision for workflow management, Marvel for ease of use, and Adobe XD for a comprehensive toolset. However, Figma’s all-in-one web-based platform and real-time collaboration continue to set it apart in the design and prototyping space.
Key Takeaways for Success
Figma's journey offers several key takeaways for success:
Solving a Real Problem: Figma addressed the pain points of design collaboration and accessibility, creating a tool that designers genuinely needed.
Technical Innovation: Overcoming the technical challenges of building a web-based design tool was crucial to Figma's success.
Community Engagement: Building a strong community around the product helped Figma gather valuable feedback and create a loyal user base.
Strategic Customer Acquisition: Focusing on design teams at tech companies and startups allowed Figma to gain early adopters who became advocates for the product.
Figma's success story is a result of innovation, perseverance, and community-driven growth. By staying true to their vision and continuously iterating based on user feedback, Dylan Field and Evan Wallace created a tool that has transformed the design industry.