Live data from Hacker News

Keeping Figma Fast: perf-testing the WASM editor

figma.com

31–40 of 99 posts

Re: Keeping Figma Fast: perf-testing the WASM editor

#32

Is Figma fast? I see huge lag on loading files. Sometimes images don't load for 10+ seconds after the file opens. Based in EU we often don't get thought about in testing.

Sounds like y'all might have a lot of large images or raster files?

That I have files with enormous thousands of components and Figma doesn't miss a beat. If you're able to get vector versions of those, then the speed shouldn't be an issue. Obviously if there are a lot of photos, that might be tough.

Re: Keeping Figma Fast: perf-testing the WASM editor

#33
post #25
post #18

Earlier quoted context omitted.

The shininess of the engineering blog and the actual product seem to be completely disconnected. All the major players (Airbnb, Instagram, Facebook, Twitter) go on about all these often genuinely impressive perf optimizations, but if you actually try the product they're borderline unusable. It's pretty clear that the blogging is just a clout chasing exercise, but the cognitive dissonance is still palpable.

I think Airbnb is the worst offender by far though. Instagram, Facebook and Twitter (just using your examples) operate very dynamic applications at a global scale. AirBnB is a crud app with almost no dynamic content other than the booking system. According to the first site I saw online, they process 6 bookings per second, which I could handle on literally anything with an internet connection. Of all of them, its the…

I thought this sounded way too low but the most generous figure I can find is 12 per second in 2022. What the hell? I thought it would be more. Should I have thought that? I guess not.

Re: Keeping Figma Fast: perf-testing the WASM editor

#34
post #11
post #4

Occasionally I wonder what could have happened to front-end web application development over the past few years if Figma had open-sourced their WebGL-based GUI library. We've had ~15 years of focus on the DOM with the progression of jQuery to Backbone to Vue, and many other libraries. At least what I've heard of the Figma approach almost sounds like the Adobe Flash/Flex runtime. That might only make sense for applica…

It would not. 1. Wasm based UI libraries exist already, checkout makepad [0] for example. 2. Web app standards are way higher than when flash was around. I highly doubt there would be any serious discussion that would also involve vue/react as alternatives. Almost as ridiculous as asking about using unity ui vs react. 3. Flash was world class media design tool for animation and production design. People were using it…

I do some graphics work and I wouldnt say that there is a world of difference between the capabilities of Illustrator and Figma. Photoshop is obviously a completely different tool. Very textural digital painting of the kind that photoshop excells at would be pretty tricky in a browser. (Theres a webversion of Heavypaint now, but thats vector-based of course.

Re: Keeping Figma Fast: perf-testing the WASM editor

#35

Is Figma fast? I see huge lag on loading files. Sometimes images don't load for 10+ seconds after the file opens. Based in EU we often don't get thought about in testing.

The answer to "is x fast?" is always "compared to what?"

Having been a long-time user of Figma's somewhat-trailing (at this point) competitor, Sketch, speed is surprisingly one of Figma's most immediately-apparent advantages despite being web-based rather than MacOS-native.

At a previous job, we had a Sketch file that contained more or less an entire B2B app, and at hundreds of megabytes, it took tens of seconds to load (not asynchronously, either, blocking the UI until the whole thing was in memory). A similar everything-file at a more recent job where we used Figma was like night and day: something like three seconds until the file was usable, and perhaps a few more seconds for any big images to load.

Then there's Figma's upstart competitor, Penpot. In my initial explorations, it felt about as responsive as Figma, but when I loaded one of their tutorial files – not even a mega-B2B-app file – everything slowed considerably. The load time wasn't bad, but the frame rate for simply scrolling around the artboards dropped like a rock. While I'm bullish on Penpot, they have a long optimization road ahead of them.

Re: Keeping Figma Fast: perf-testing the WASM editor

#36

Earlier quoted context omitted.

Hey, I am one of the authors of the article and the systems described. The default 20% margin of error is indeed pretty wide, and it is intended to catch large obvious regressions (e.g. an algorithm accidentally becoming quadratic instead of being linear) As we described in the blog post, we have the second system based on the real hardware. This system is on-demand. If an engineer has a suspect commit or an experime…

Hey, I worked on a really perf sensitive system and for perf tests we would run the last x commits each time to get rid of the busy vm syndrome. It meant that the margin of error could be much less. You might want to consider it as a mid way step between vm’s and scheduling on laptops (those poor laptop batteries!) Ed

That's a good way to address the noise on VMs! We do something different but in a similar spirit: when we compare to the main branch, we calculate the baseline based on 1-2 weeks worth of historical data on main (we identify the latest step change with a simple linear regression). This way we approximate the baseline based on ~100 data points which also helps to address the variance.

Of course re-running the code from main and the PR on the same VM side by side would be the best, and it would cost a lot more money (especially once you factor in GPUs). We considered it but opted to the strategy I outlined above, it's mainly a trade-off between accuracy vs costs

Re: Keeping Figma Fast: perf-testing the WASM editor

#37

Evan Wallace (former CTO) was a WASM pioneer IMO, he has plenty of excellent explorations and works shared on GitHub. I don't know Evan, but I've greatly appreciated stumbling into his works when exploring SharedArrayBuffer and what was once bleeding edge browser performance. https://github.com/evanw

Absolutely! Evan and the early team laid a strong foundation when Figma was ported to WASM + WebGL. It happened before my time at Figma, but check out these earlier posts from Evan and Jamie on the transition, perf testing, and graphs back from 2017-2018:

https://www.figma.com/blog/webassembly-cut-figmas-load-time-... https://www.figma.com/blog/figma-faster/

Re: Keeping Figma Fast: perf-testing the WASM editor

#38

Evan Wallace (former CTO) was a WASM pioneer IMO, he has plenty of excellent explorations and works shared on GitHub. I don't know Evan, but I've greatly appreciated stumbling into his works when exploring SharedArrayBuffer and what was once bleeding edge browser performance. https://github.com/evanw

Also the creator and maintainer of ESBuild!

Re: Keeping Figma Fast: perf-testing the WASM editor

#40
post #24

Earlier quoted context omitted.

Thank you for your comment! WASM gave Figma a lot of speed by default for a lot of perf-sensitive code like rendering, layouts, applying styles and materializing component instances, our GUI code is mostly React and CSS. WASM engine performance has not been a problem for us, instead we are constantly looking forward improvements in the devex department: debugging, profiling and modularization. One of the largest chal…

+1 to heap size limit speaking as a PM over here at Figma. We regularly see files with hundreds of thousands of layers, and trying to keep those enormous files under 2GB of memory for usage across all supported browsers is a constant struggle. Would love to see that cap get raised across the board, it'd enable us and others to do so much more.

It's amazing what we lost moving from desktop to retrograde world of the web. I wonder what's next in the indirection game?
Post reply on HN