In 2012, a 20-year-old Brown University dropout walked away from a prestigious Thiel Fellowship not with a social network or a cryptocurrency, but with a radical idea: what if professional design tools lived entirely in the browser, powered by WebGL rendering and real-time multiplayer collaboration? That young man was Dylan Field, and the product he built — Figma — would go on to displace Adobe’s decades-long monopoly on design software, attract a $20 billion acquisition offer, and fundamentally reshape how teams build digital products. This is the story of how a browser-based tool became the most important design platform of a generation.
Early Life and the Path to a Big Idea
Dylan Field grew up in San Rafael, California, immersed in the tech culture of the Bay Area. Even as a teenager, he was drawn to the intersection of technology and creativity. He enrolled at Brown University to study computer science, but his trajectory shifted dramatically when he was awarded a Thiel Fellowship in 2012 — a $100,000 grant from Peter Thiel that encourages young people to drop out of college and pursue bold entrepreneurial ventures.
Field’s initial project was a drone-based aerial photography startup, but he quickly pivoted. He had been frustrated by the state of design tools: expensive, desktop-bound, single-player experiences. Adobe’s Creative Suite dominated the market, but it required powerful local hardware, had no collaboration features, and cost hundreds of dollars per year. Field saw the same trajectory that Google Docs had followed — moving productivity software to the browser and enabling real-time collaboration — and believed design tools were next.
Together with co-founder Evan Wallace, a fellow Brown student and exceptional graphics programmer, Field began working on what would become Figma. Wallace’s deep expertise in WebGL and GPU-accelerated rendering was essential: the technical challenge was not building another design tool, but building one that could run at professional-grade performance inside a web browser.
The Technical Breakthrough: WebGL Rendering in the Browser
The core engineering challenge Figma faced was one that most experts considered impossible in 2012. Professional design tools like Adobe Illustrator and Sketch relied on native code and direct GPU access to render complex vector graphics smoothly. Browsers were seen as too slow, too limited, and too sandboxed to handle the rendering demands of a real design application. Field and Wallace proved them wrong.
Figma’s rendering engine was built from scratch using WebGL, the browser API that provides low-level access to the GPU. Rather than relying on the browser’s built-in SVG or Canvas 2D rendering — both too slow for complex designs with thousands of layers — Figma compiled its own rendering pipeline that communicated directly with the GPU through WebGL shaders. This approach, similar to how John Carmack pioneered real-time 3D rendering for video games, meant Figma could achieve 60fps rendering performance even on complex files.
The technical architecture involved several key innovations. First, Figma used a custom 2D rendering engine written in C++, compiled to WebAssembly (initially asm.js) so it could run in the browser at near-native speed. Second, the team implemented a tile-based rendering system that only drew the visible portions of the canvas, allowing designers to work with files containing tens of thousands of elements without performance degradation. Third, Figma used GPU instancing and batched draw calls to minimize the overhead of communicating with the GPU.
Here is a simplified example illustrating the core concept of how WebGL can be used to render 2D vector shapes in a browser — the foundational technique behind Figma’s rendering engine:
// Simplified WebGL 2D shape renderer — core concept behind
// Figma's browser-based design canvas
const canvas = document.getElementById('designCanvas');
const gl = canvas.getContext('webgl2');
// Vertex shader: transforms 2D coordinates and passes
// per-instance color to the fragment shader
const vertexShaderSrc = `#version 300 es
in vec2 a_position;
in vec4 a_color;
in mat3 a_transform;
uniform vec2 u_resolution;
out vec4 v_color;
void main() {
// Apply per-instance affine transform (scale, rotate, translate)
vec2 transformed = (a_transform * vec3(a_position, 1.0)).xy;
// Convert pixel coordinates to WebGL clip space [-1, 1]
vec2 clipSpace = (transformed / u_resolution) * 2.0 - 1.0;
gl_Position = vec4(clipSpace * vec2(1, -1), 0.0, 1.0);
v_color = a_color;
}
`;
// Fragment shader: outputs the interpolated color
const fragmentShaderSrc = `#version 300 es
precision highp float;
in vec4 v_color;
out vec4 fragColor;
void main() {
fragColor = v_color;
}
`;
// Compile shaders and link into a GPU program
function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}
const program = gl.createProgram();
gl.attachShader(program, createShader(gl, gl.VERTEX_SHADER, vertexShaderSrc));
gl.attachShader(program, createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSrc));
gl.linkProgram(program);
gl.useProgram(program);
// Instanced rendering: draw thousands of shapes in a single
// draw call — the key to Figma's canvas performance
function renderDesignFrame(shapes) {
const transforms = new Float32Array(shapes.length * 9);
const colors = new Float32Array(shapes.length * 4);
shapes.forEach((shape, i) => {
// Pack each shape's 3×3 affine matrix
transforms.set(shape.matrix, i * 9);
colors.set([shape.r, shape.g, shape.b, shape.a], i * 4);
});
// Upload instance data to GPU buffers
gl.bindBuffer(gl.ARRAY_BUFFER, transformBuffer);
gl.bufferData(gl.ARRAY_BUFFER, transforms, gl.DYNAMIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.DYNAMIC_DRAW);
// Single instanced draw call renders all shapes at once
gl.drawArraysInstanced(gl.TRIANGLES, 0, vertexCount, shapes.length);
}
// 60 fps render loop — Figma maintains this even with
// thousands of layers on the canvas
function animate() {
gl.clear(gl.COLOR_BUFFER_BIT);
renderDesignFrame(activeDocument.visibleShapes);
requestAnimationFrame(animate);
}This GPU-instanced approach meant that Figma could render thousands of design elements in a single draw call, achieving performance that rivaled — and in some cases exceeded — native desktop applications. It was a watershed moment for browser-based software, proving that the web platform could support professional creative tools.
Real-Time Collaboration: CRDTs and Multiplayer Design
If WebGL rendering was the technical foundation, real-time collaboration was the killer feature that made Figma indispensable. Field understood early that design is not a solo activity. Designers collaborate with product managers, engineers, copywriters, and stakeholders — yet traditional design tools forced a painful workflow of exporting files, emailing attachments, and hoping everyone was looking at the same version.
Figma’s real-time collaboration system was inspired by the operational transformation (OT) algorithms used in Google Docs, but the team ultimately adopted a CRDT-based approach (Conflict-free Replicated Data Types) to handle the unique challenges of collaborative design editing. Unlike text documents, design files contain complex nested structures — groups within groups, boolean operations, constraint systems — that require sophisticated conflict resolution. This mirrors the kind of real-time data synchronization challenges that have driven innovation across the web platform.
The multiplayer architecture worked as follows: each client maintained a local copy of the document state, and edits were applied optimistically to the local copy for instant responsiveness. These edits were then sent to Figma’s servers, which acted as a central authority to sequence operations and broadcast them to other connected clients. The CRDT data structure ensured that all clients converged to the same state regardless of the order in which operations arrived.
Here is a conceptual implementation of a CRDT-based collaborative editing system, illustrating how Figma ensures consistency across multiple simultaneous editors:
// Conceptual CRDT for collaborative design editing
// Inspired by Figma's approach to real-time multiplayer design
class DesignCRDT {
constructor(clientId) {
this.clientId = clientId;
this.clock = 0;
// Each element stored with a unique Lamport timestamp
this.elements = new Map();
this.pendingOps = [];
}
// Generate a globally unique, causally ordered identifier
generateId() {
this.clock += 1;
return `${this.clock}:${this.clientId}`;
}
// Local edit — applied immediately for instant feedback,
// then queued for sync to other collaborators
applyLocal(operation) {
const op = {
...operation,
id: this.generateId(),
timestamp: Date.now(),
origin: this.clientId,
};
this.applyOperation(op);
this.pendingOps.push(op);
this.broadcastToServer(op);
return op;
}
// Apply an operation — works for both local and remote edits
applyOperation(op) {
switch (op.type) {
case 'INSERT_ELEMENT':
this.elements.set(op.elementId, {
...op.properties,
_created: op.id,
_lastModified: op.id,
});
break;
case 'UPDATE_PROPERTY':
const element = this.elements.get(op.elementId);
if (!element) return;
// Last-writer-wins conflict resolution:
// compare Lamport timestamps to determine precedence
const existingVersion = element._lastModified;
if (this.compareTimestamps(op.id, existingVersion) > 0) {
element[op.property] = op.value;
element._lastModified = op.id;
}
break;
case 'DELETE_ELEMENT':
// Tombstone strategy: mark deleted, don't remove,
// so late-arriving ops referencing it resolve correctly
const target = this.elements.get(op.elementId);
if (target) {
target._deleted = true;
target._lastModified = op.id;
}
break;
}
}
// Handle operations received from the server (other users' edits)
receiveRemote(op) {
// Idempotency: skip if we've already applied this operation
if (this.hasApplied(op.id)) return;
this.applyOperation(op);
this.updateClock(op.id);
this.renderChange(op);
}
// Lamport timestamp comparison ensures total ordering of edits
// even when multiple users edit the same property simultaneously
compareTimestamps(a, b) {
const [clockA, clientA] = a.split(':');
const [clockB, clientB] = b.split(':');
if (parseInt(clockA) !== parseInt(clockB)) {
return parseInt(clockA) - parseInt(clockB);
}
return clientA.localeCompare(clientB);
}
// Example: two designers simultaneously move the same rectangle
// Client A moves it to x:100, Client B moves it to x:200
// The higher Lamport timestamp wins deterministically on all clients
}
// Multiplayer cursor tracking — the iconic colored cursors in Figma
class CursorSync {
constructor(clientId, displayName, color) {
this.clientId = clientId;
this.displayName = displayName;
this.color = color; // Each collaborator gets a unique cursor color
this.remoteCursors = new Map();
}
broadcastPosition(x, y, viewport) {
// Throttled to ~30fps to minimize network overhead
this.socket.send(JSON.stringify({
type: 'CURSOR_MOVE',
clientId: this.clientId,
x, y,
viewport,
displayName: this.displayName,
color: this.color,
}));
}
}This CRDT-based architecture gave Figma several decisive advantages. Designers could see each other’s cursors in real time, watch edits happen live, and never worry about merge conflicts or version control. The experience felt as natural as working on a physical whiteboard together — a far cry from the emailing-PSDs workflow that had plagued the design industry for decades.
The Rise of Figma: From Skepticism to Industry Standard
Figma launched its beta in 2015 and became publicly available in 2016. The initial reception was mixed. Many professional designers were skeptical that a browser-based tool could match the power of Sketch (the dominant UI design tool at the time) or Adobe Illustrator. The conventional wisdom in the design community was that serious creative work required native applications.
But Field had a crucial insight about product adoption that many competitors missed: design tools are network-effect products. The more people on your team who use Figma, the more valuable it becomes for everyone. A designer working alone might prefer Sketch’s mature plugin ecosystem, but a team of ten designers, five engineers, and three product managers would find Figma’s collaboration features transformative. This understanding of network-driven adoption is similar to how Stewart Butterfield built Slack around team communication dynamics rather than individual productivity.
Figma’s growth strategy was deliberate and effective. The company offered a generous free tier that allowed individual designers and small teams to use the full product without paying. This created organic adoption within organizations: one designer would start using Figma, invite colleagues to collaborate, and soon the entire design team would migrate. By the time procurement departments got involved, Figma was already the de facto standard.
By 2020, Figma had overtaken Sketch as the most widely used UI design tool. The COVID-19 pandemic accelerated this shift dramatically, as remote teams needed collaborative tools more than ever. Figma’s browser-based architecture, which critics had once dismissed as a limitation, became its greatest strength: no installation required, instant sharing via URL, and seamless cross-platform compatibility. Product teams could conduct professional UI/UX design reviews with stakeholders who had never installed a design application in their lives.
Product Philosophy and Design Systems
Field’s product philosophy extended beyond simply recreating desktop tools in the browser. He envisioned Figma as a platform that would change how teams design, not just where they design. Several key product decisions reflected this vision.
Components and Design Systems. Figma introduced a powerful component system that allowed teams to build shared design libraries. A button component could be defined once and reused across hundreds of files, with changes propagating automatically. This feature made it practical for organizations to maintain consistent user experience design standards across large product portfolios — something that had been theoretically possible but practically nightmarish with file-based tools.
Auto Layout. Figma’s Auto Layout feature brought responsive design concepts directly into the design tool. Elements could be configured to resize, wrap, and reflow based on their content, mimicking the behavior of CSS Flexbox. This bridged the gap between static design mockups and the dynamic reality of web interfaces, reducing the friction between designers and the developers who implement designs using modern CSS layout techniques.
Developer Handoff. Figma’s Inspect panel allowed developers to select any element in a design and see its CSS properties, spacing values, and asset export options. This eliminated an entire category of miscommunication between design and engineering teams. Developers no longer needed to guess at pixel values or ask designers to manually spec every element.
FigJam. In 2021, Figma launched FigJam, a collaborative whiteboarding tool built on the same real-time infrastructure. FigJam expanded Figma’s addressable market beyond design teams to include product managers, engineers, and executives who needed collaborative brainstorming spaces. For teams already managing their workflows with tools like Taskee, FigJam became a natural companion for visual planning sessions and design sprints.
The Adobe Acquisition Saga
In September 2022, Adobe announced its intention to acquire Figma for approximately $20 billion — the largest acquisition in the history of the software industry at the time. The deal was remarkable for several reasons. First, it valued Figma at roughly 50 times its annual recurring revenue, a staggering multiple. Second, it represented an acknowledgment by Adobe — the undisputed giant of creative software — that a startup founded by a college dropout had built a better product.
The acquisition faced intense regulatory scrutiny. The European Commission, the UK’s Competition and Markets Authority, and the US Department of Justice all investigated the deal on antitrust grounds. The concern was straightforward: Adobe already dominated professional design tools, and acquiring its most significant competitor would further consolidate the market. Critics argued that the acquisition was specifically intended to eliminate competition rather than to integrate complementary technologies.
In December 2023, after more than a year of regulatory review, Adobe and Figma jointly announced the termination of the acquisition. The regulatory barriers proved insurmountable, and both companies agreed to walk away. Adobe paid Figma a $1 billion reverse termination fee. Field emerged from the episode with Figma’s independence intact, a billion dollars in the bank, and the validation of having built a product that the world’s largest design software company was willing to pay $20 billion to own.
Impact on the Design Industry
Figma’s influence on the design industry extends far beyond market share. The product fundamentally changed several aspects of how digital products are designed and built.
Democratization of design. By making professional design tools free and browser-based, Figma lowered the barrier to entry for aspiring designers worldwide. Students, hobbyists, and professionals in developing countries could access the same tools used at Google, Meta, and Microsoft — without expensive software licenses or powerful hardware. This democratizing effect parallels how Marc Andreessen’s Mosaic browser made the web accessible to non-technical users.
Design-developer convergence. Figma accelerated the blurring of boundaries between design and development. Features like Auto Layout and Variants encouraged designers to think in terms of systems and states rather than static screens. Meanwhile, developers increasingly participated in the design process directly within Figma, leaving comments, inspecting properties, and even creating prototypes.
The community ecosystem. Figma’s Community feature, launched in 2020, allowed designers to publish and share files publicly. This created an ecosystem of free design resources — UI kits, icon libraries, wireframe templates — that further accelerated adoption and established Figma as the central hub of the design community.
Plugin platform. Figma’s plugin API enabled third-party developers to extend the tool’s functionality. Plugins for accessibility checking, content generation, design token management, and dozens of other use cases created a vibrant ecosystem that deepened Figma’s competitive moat. The openness of this platform reflects the same platform-thinking approach that has driven innovation across the tech industry.
Dylan Field as a Leader
Field’s leadership style has been widely noted for its combination of technical depth and product intuition. Unlike many startup founders who focus primarily on fundraising and business development, Field remained deeply involved in product decisions throughout Figma’s growth. He conducted regular design reviews, personally tested new features, and maintained close relationships with Figma’s user community.
His approach to company culture emphasized transparency and cross-functional collaboration — values that mirrored Figma’s product philosophy. Field famously insisted that Figma’s internal teams use their own product for as much work as possible, a practice known as dogfooding that ensured the team experienced the same pain points as their users.
Field has also been vocal about the importance of craft in software development. In interviews and conference talks, he has consistently argued that the details of user experience — animation timing, cursor behavior, keyboard shortcuts — matter as much as headline features. This attention to craft is evident in Figma’s polished user experience, which many designers cite as a key reason for their loyalty to the product.
The AI Era and Figma’s Future
As of the mid-2020s, Figma faces its next major challenge: integrating artificial intelligence into the design workflow. The company has begun experimenting with AI-powered features for generating design variations, suggesting layout improvements, and automating repetitive tasks. Field has spoken publicly about the potential for AI to augment — rather than replace — human designers, enabling them to work faster and explore more creative possibilities.
Figma has also expanded its product suite with Figma Slides (for presentations) and continued development of FigJam, signaling an ambition to become a broader collaboration platform rather than just a design tool. The company’s strategic direction suggests that Field sees Figma competing not only with Adobe and Sketch, but also with tools like Miro, Notion, and even PowerPoint.
Dylan Field’s legacy is already substantial. At 32, he has built one of the most influential software products of the 2020s, survived a $20 billion acquisition attempt, and changed the expectations of an entire industry. Figma proved that browser-based software could rival native applications in performance and usability, that real-time collaboration transforms creative workflows, and that a well-designed free tier can disrupt even the most entrenched incumbents. In the history of design tools, there is a clear demarcation: before Figma, and after.
Frequently Asked Questions
What made Figma different from other design tools like Sketch or Adobe XD?
Figma was the first professional-grade design tool built entirely for the browser using WebGL rendering. Unlike Sketch (macOS-only native app) or Adobe XD, Figma enabled real-time multiplayer collaboration — multiple designers could edit the same file simultaneously, seeing each other’s cursors and changes in real time. It also required no installation, worked on any operating system, and offered a generous free tier that drove organic team adoption.
How does Figma achieve native-level performance in a web browser?
Figma uses a custom rendering engine written in C++ and compiled to WebAssembly, which communicates with the GPU through WebGL. This bypasses the browser’s standard rendering pipeline entirely. The engine uses tile-based rendering (only drawing visible portions of the canvas), GPU instancing (batching thousands of shapes into single draw calls), and a level-of-detail system that simplifies distant elements. These techniques combined deliver consistent 60fps performance even on complex design files.
What is a CRDT and why did Figma use it for collaboration?
A CRDT (Conflict-free Replicated Data Type) is a data structure designed for distributed systems where multiple users can make concurrent edits that automatically converge to a consistent state without coordination. Figma adopted CRDTs because design files have complex nested structures — groups, boolean operations, constraints — that are difficult to handle with simpler approaches like operational transformation. CRDTs ensure that no matter what order edits arrive at different clients, everyone sees the same final result.
Why did the Adobe acquisition of Figma fall through?
Adobe’s $20 billion acquisition bid, announced in September 2022, was terminated in December 2023 after facing intense regulatory scrutiny from the European Commission, the UK’s Competition and Markets Authority, and the US Department of Justice. Regulators were concerned that the merger would eliminate Adobe’s most significant competitor in the product design tool market, reducing innovation and harming consumers. Adobe paid Figma a $1 billion reverse termination fee.
Can Figma be used for purposes beyond UI design?
Yes. While Figma was originally built for interface design, it has evolved into a broader visual collaboration platform. FigJam extends it into collaborative whiteboarding and brainstorming. Figma Slides brings its design engine to presentations. Many teams use Figma for graphic design, illustration, prototyping, design system documentation, and even project planning. Its plugin ecosystem further extends functionality into areas like accessibility auditing, content generation, and developer handoff.
