Web Design » Figma » What Tech Does Figma Use?

What Tech Does Figma Use?

Last updated on November 26, 2022 @ 2:05 pm

Figma is a vector graphics editor and prototyping tool – the first interface design tool with real-time collaboration.

Figma is built on top of the Web, which means that it uses HTML, CSS and JavaScript technologies under the hood. However, because Figma is a vector graphics editor, the majority of its interface is made up of vector shapes, rather than traditional HTML elements. This means that Figma has a unique look and feel compared to other web-based applications.

Figma’s vector graphics engine is based on the SVG (Scalable Vector Graphics) format. SVG is an open standard that allows for the creation of vector images that can be scaled to any size without losing quality. Figma’s use of SVG allows for sharp and crisp images at any zoom level.

PRO TIP: This article contains outdated information about Figma’s technology stack.

In addition to SVG, Figma also uses the WebGL (Web Graphics Library) to render graphics. WebGL is a low-level API that allows for the creation of 3D graphics in the browser. By using WebGL, Figma is able to render complex graphics, such as gradients and drop shadows, quickly and efficiently.

Figma also makes use of HTML5 technologies such as the < canvas > element and the WebSocket protocol. The < canvas > element provides a resolution-independent bitmap surface for drawing images and animations. The WebSocket protocol allows for bi-directional communication between the Figma client and server, which enables real-time collaboration.

Conclusion:

Overall, Figma uses a variety of different technologies to power its vector graphics editor and enable real-time collaboration. By leveraging HTML, CSS, JavaScript, SVG and WebGL, Figma is able to provide users with a unique and powerful experience.

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.