Figma is a interface design tool. It's most often used by teams of software professionals to communicate about and iterate on their user interfaces. For example, if you are creating a mobile app you might use Figma to illustrate how the app should look and to prototype how the app should behave.
I cofounded Figma in 2012 with Dylan Field and worked on Figma as CTO for the better part of a decade, leaving in 2021. When we started the interface design industry was largely using Sketch, having just transitioned away from Adobe's suite of creative tools. But by the time I left, Figma had become the dominant interface design tool in the industry and had permanently changed how the industry thought about interface design tooling.
My work on Figma was primarily focused on the areas listed below. Keep in mind that everything I did at Figma was a collaboration between many people and was later built upon, extended, and/or overhauled. Figma has an amazing engineering team and they deserve the credit for what Figma has become today, which is due to their sustained effort over many years.
In some respects, Figma's primary innovation was being a browser-based application instead of a native application. This was a very unusual decision at the time because interface design tools are very difficult to build due to their graphics-intensive and memory-hungry nature, and building one that runs the browser is even more difficult than building a normal native application. We were at the cutting edge of web app technology at a time when browser-based graphics apps like Figma were just barely possible.
However, being in the browser was likely critical to Figma's success. Interface design is a fundamentally collaborative profession involving many roles (e.g. design, product management, marketing, engineering, executives) and browser-based tools like Figma make collaboration between users much more natural and effortless. Figma documents are just links so they can be shared anywhere, they run on any platform, and they always show the latest changes live, which brought many advantages over the previous generation of non-browser design tools. Being in the browser also made it easy for us to iterate very quickly and push out improvements to all of our users almost every day.
Even though the contents of Figma documents are similar to what HTML can display, Figma actually does all of its own document rendering for cross-browser consistency and performance. Figma uses WebGL for rendering which bypasses most of the browser's HTML rendering pipeline and lets the app work closely with the graphics card. The rendering engine handles curve rendering, images, blurs, masking, blending, and opacity groups, and optimizes for high visual fidelity.
I co-developed Figma's initial rendering engine with Alec Miller, another Figma engineer, and then developed a next-generation rendering engine that was even faster. Despite running in the browser, Figma's rendering engine was often faster than the rendering engines in our competitor's native applications. You can read more about the transition to the next-generation rendering engine in this blog post: Figma, faster. Other Figma engineers later rewrote the rendering engine for mobile to be better tuned for animation instead of for zooming, which involved some really cool optimization work.
This refers to two or more people editing the same Figma document at the same time, and happens whenever multiple people open the same Figma document in their browsers simultaneously. It's similar to how Google Docs works for text editing if you're familiar with that. This an amazing way to collaborate because it dramatically reduces friction. You no longer have to worry about editing the wrong version, coordinating with others to avoid overwriting their work, or setting up screen sharing during a design presentation.
I developed Figma's multiplayer syncing protocol, worked on the initial version of the multiplayer live collaboration service (a kind of specialized real-time database), and added multiplayer syncing support to Figma's existing editing application. The initial version was written in TypeScript but I later ported it to Rust for improved performance and stability. You can read more about how multiplayer syncing works here: How Figma’s multiplayer technology works, and about the port to Rust here: Rust in Production at Figma. The team layered many improvements on top including additional scale and robustness work and some very interesting graph database features.
Vector graphics are scalable images that are represented using mathematical curves and that remain sharp at any resolution. Logos and icons are usually vector graphics and are an important aspect of interface design. Vector editing involves manipulating these mathematical curves, either directly with the mouse or indirectly through the merging of multiple primitive shapes.
I helped develop a new approach to vector representation called "vector networks" which you can read about here: Introducing Vector Networks. This system serves as a core part of Figma's document model and is more intuitive to manipulate than paths, which most other vector editing tools use as a foundation. I also developed a lot of the vector manipulation tools in Figma's editor.
Text layout is notoriously complex because it involves Unicode, which pulls in pretty much the full set of all human writing systems, which are complex and varied for cultural reasons. If you're interested, Text Rendering Hates You is an excellent post that talks about some of the complexity involved with text layout. Text selection and editing is even more complex with platform-specific mouse, keyboard, and touch interactions that must work well with all layout features. There are a few publicly-available libraries that help with text layout, but there aren't really any that help with text selection and editing because it's typically very customized. The existing systems that do this are inseparable from the bigger projects that they are a part of (e.g. macOS, Chrome, Qt).
I developed the initial text layout and editing system used in Figma's editor, which set us down the path of creating our own full text editing implementation. The initial system used platform-native interactions on all operating systems but only supported English-like text and per-character style attributes. Later on the team greatly extended it to support many features including font fallback, variable fonts, OpenType features, and bidirectional text.
Below are all of the blog posts that I wrote for Figma's company blog regarding the technology I worked on while at Figma. They are preserved here in case the company blog is ever overhauled in the future: