How WebAssembly Made Figma 3x Faster 🚀: No Rust

Hey everyone! I read this fascinating story today about how Figma improved its app's performance using WebAssembly, and I just had to share it with you. 🌟

What is WebAssembly? 🖥️

WebAssembly (Wasm) is a new technology that makes web apps run super fast. Think of it as a turbo boost for your favourite online tools.

Figma, a popular design tool, decided to use WebAssembly to speed up their app, and the results were amazing!

The Problem ⚠️

Before WebAssembly, Figma was using JavaScript to run their app.

While JavaScript is great, it has its limits.

Figma’s users were experiencing slow load times, especially with big design files. This was frustrating for designers who needed to work quickly and efficiently.

The Solution 💡

Figma decided to switch to WebAssembly. This was a big change, but it paid off. WebAssembly allowed Figma to run its code much faster than before.

Here’s how they did it:

1. Rewriting Code: Figma rewrote parts of their app in C++, a language that can be easily converted to WebAssembly.
2. Optimizing Performance: They focused on making the app load faster by optimizing how it handles data and graphics.

The Results 📊

The switch to WebAssembly brought some amazing results:

• 3x Faster Load Times: Figma’s load times improved by more than 3 times! This means users can start working on their designs much quicker.
• Better Performance: The app runs smoother, even with large files. No more waiting around for things to load.
• Happier Users: Designers are happier because they can work more efficiently without delays.

How It Works 🔧

WebAssembly works by converting code into a format that browsers can run very quickly.

Here’s a simple breakdown:

1. Code Conversion: Figma’s C++ code is converted into WebAssembly.
2. Fast Execution: WebAssembly runs this code much faster than JavaScript.
3. Smooth Experience: Users get a smoother and faster experience when using Figma.

Why WebAssembly is Awesome 🌟

• Speed: WebAssembly is designed to be fast. It can run code almost as quickly as native apps.
• Efficiency: It uses less memory and resources, which means better performance.
• Compatibility: All major browsers support WebAssembly, so it works everywhere.

The Numbers 🔢

Here are some impressive numbers from Figma’s switch to WebAssembly:

• 3x Faster Load Times: Users can start working on their designs three times faster than before.
• 20x Faster Parsing: WebAssembly parses code 20 times faster than the old JavaScript method.
• 50% Less Crashes: The number of crashes decreased by half, making the app more stable.

User Feedback 🗣️

Figma’s users have noticed the difference. Here’s what some of them are saying:

• “Figma loads so much faster now! It’s a game-changer for my workflow.” 🎨
• “I can work on large files without any lag. WebAssembly is amazing!” 🖌️
• “The app feels so much smoother. Great job, Figma!” 👍

Conclusion 🏁

Switching to WebAssembly has been a huge success for Figma. The app is faster, more efficient, and more stable. Designers can now work without delays, making their creative process smoother and more enjoyable. WebAssembly has truly transformed Figma, making it a powerful tool for designers everywhere.

I hope you like how Figma improved its user experience using WebAssembly.

You can also create great web apps using Rust and convert them to WebAssembly.

If interested in learning Rust, you can check out this repo.

Have a great day.