6 ms·

Keeping Figma Fast: perf-testing the WASM editor

287 points by imslavko 3y ago

yeldarb 3y ago
Nice post. Figma's engineering blog looks great; right up there with Airbnb's and Etsy's which I also enjoy.
- maccard 3y ago
  Airbnb is a great example of a terrible experience that just keeps getting worse. It makes my M1 Mac, my 32 core workstation and my top of the line android device chug.
  - rozap 3y ago
    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.
    - maccard 3y ago
      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 one I understand the least.
      - steve_adams_86 3y ago
        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.
        sa46 3y ago
        6 bookings per second at $200 per booking is $103M processed per day. Each booking likely represents dozens to hundreds of requests. Then, for every visit resulting in a booking there’s probably hundreds of non-booking visits.
        maccard 3y ago
        > 6 bookings per second at $200 per booking is $103M processed per day. I don't doubt that they don't prcess a lot of money - that's besides the point. They're a cookie cutter CRUD app (that happens to process a lot of money) that takes _hundreds_ of requests and 12 seconds to load on a 32 core workstation with a gigabit fibre internet connection. They have no business writing a blog on performance engineering.
        lopkeny12ko 3y ago
        If your CRUD app's booking endpoint internally fans out to 100s of requests, you're doing something extremely wrong and/or you've dug yourself into microservice hell.
    - School-Cotton 3y ago
      From experience at Facebook: there are extremely good people working on performance and making heroic optimizations. The blog content is real. However, these are necessary precisely because the politics and culture of the organization make it impossible to avoid bloat that accumulates faster than the small minority of perf-conscious folks can improve things.
- culi 3y ago
  No RSS feed though afaict :(
  - aswan 3y ago
    No, but there is atom (https://www.figma.com/blog/feed/atom.xml https://www.figma.com/blog/feed/atom.xml) and jsonfeed (https://www.figma.com/blog/feed/feed.json https://www.figma.com/blog/feed/feed.json)
titzer 3y ago
Really awesome work! If the authors happen to drop by, I'd be curious if some of the work in their pipeline might be able to help for other types of GUI applications with Wasm. I'm also very curious to see what role, if any the Wasm engine's performance plays in the overall story, and be able to distill out any key workloads that can help Wasm engines improve.
- imslavko 3y ago
  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 challenges of the platform we face today is the heap size limit. While Chrome supports up to 4GB today, that's not yet the case for all browsers. And even with that, we are still discovering bugs in the toolchain (see this recent issue filed by one of our engineers) https://github.com/emscripten-core/emscripten/issues/20137 https://github.com/emscripten-core/emscripten/issues/20137 The challenge of the perf-testing at scale in our company is helping developers to detect perf regressions when they don't expect them - accidental algorithmic errors, misused caches, over-rendering React components, dangerously inefficient CSS directives, etc.
  - jjcm 3y ago
    +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.
    - Keyframe 3y ago
      It's amazing what we lost moving from desktop to retrograde world of the web. I wonder what's next in the indirection game?
drewda 3y ago
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 applications with high levels of information density and snappy reactivity requirements like Figma or Google Docs or a web map -- not for content-focused websites. Still, it's interesting to wonder if our arguments would be more interesting these days if we were discussing those types of approaches, rather than just fighting about React vs. Svelte, or this JavaScript module loader vs. that one...
- bsder 3y ago
  Figma was considered ... good? Every time I have used it, it feels incredibly laggy with a crapton of useless animations. Maybe it's better on Windows?
  - jve 3y ago
    Not for me... well, I'm on Windows. It is currently the best tool for me, as a non designer, to smash together (design) icons and export in my choice of format.
  - hifix 3y ago
    I use it daily on Windows and I have to say it seems pretty fast. Never noticed any lagging or unnecessary animations.
  - jjcm 3y ago
    PM over here at Figma - would love to know where you're experiencing lag / where you're seeing useless animations. Overall we're pretty minimal when it comes to animations in product (i.e. here's a quick 22s recording of navigating between screens/opening properties panels in product today: https://video.non.io/video-2940009905.mp4 https://video.non.io/video-2940009905.mp4) as we really want to convey that the app is snappy/performant. Definitely keen on diving in if you're experiencing otherwise. Happy to chat here or my email is jake@figma.com. Regarding platform specific performance - it shouldn't affect things as long as you have GPU acceleration enabled. The majority of us over here at Figma are using OSX FWIW.
yellow_lead 3y ago
Seeing a 20% margin of error for some of their tests (due to VMs, noisy neighbors), makes me curious how others solve this problem. Dedicated hardware seems like a good investment, otherwise you need to constantly overcompensate with multiple runs.
- imslavko 3y ago
  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 experimental change that might affect performance, they would schedule a 30min-1hr run on that queue, where we run selected benchmarks 9-15 times each on laptops of various strength. In this configuration, the margin of error is closer to 2-3% from our observations so far. To get more confidence, you would want to run even more trials, typically we advise 9 iterations, though. We also do all our daily benchmarking on those laptops too. Edit: in addition to preventative testing, we also track production metrics in a similar way as described by the sibling comment
  - ed_elliott_asc 3y ago
    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
    - imslavko 3y ago
      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
skhameneh 3y ago
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 https://github.com/evanw
- imslavko 3y ago
  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-by-3x/ https://www.figma.com/blog/webassembly-cut-figmas-load-time-... https://www.figma.com/blog/figma-faster/ https://www.figma.com/blog/figma-faster/
- chrysoprace 3y ago
  Also the creator and maintainer of ESBuild!
- adamnemecek 3y ago
  What do your mean? Did he contribute to the WASM standard?
- no_wizard 3y ago
  Former?! When did Evan step down?
  - fhub 3y ago
    "I cofounded Figma in 2012 with Dylan Field and worked on Figma as CTO for the better part of a decade, leaving in 2021" From https://madebyevan.com/figma/ https://madebyevan.com/figma/
ShadowBanThis01 3y ago
We didn't have a problem with Figma's technology, but we did have problems with their UI. For example, it confused "teams" and "projects," making managing your work and granting access to people a baffling pain in the ass. It took a week of E-mailing people for me to gain the necessary access to my own team's files when we adopted Figma, most likely because of the inept segregation and presentation of these entities. Has there been any UI overhaul since acquisition?
mdtrooper 3y ago
I want to write only: https://penpot.app/ https://penpot.app/
permo-w 3y ago
I used Figma recently on a decent laptop. I used it both in-browser and within its desktop app. it was anything but fast. lightning speed compared to Android studio, but slow compared to anything else
chrisdbanks 3y ago
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.
- samsolomon 3y ago
  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.
- mortenjorck 3y ago
  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.
  - inhumantsar 3y ago
    The most telling point to me is when people outside of product, design, or engineering use figma for the first time. In my experience they dive in and don't think about it, it's just natural to use. Not to say the UX is ideal, because imho it sucks hard, but no one complains about *having to use a webapp when they open figma.
  - 3y ago
deleted 3y ago
[deleted]
MBCook 3y ago
I have the displeasure of using Figma at my job. I have a very low opinion of anything that locks up my browser for multiple seconds (Chrome or Safari) whenever I open it in a tab. Then it takes a few seconds to load the file, which I don’t care much about. But locking my entire browser is inexcusable. It’s nice they’re working on performance once you get going, but launch performance is abysmal for me (x86-64 Mac).
- failuser 3y ago
  I’ve seen this happen, but I don’t understand why that is possible. Chrome tabs are separate process, how can one tab freeze the whole browser even when running the worst code in existence?
  - seanthemon 3y ago
    Figma is beyond chrome, it's a quantum app: it's both in a state that will lock up my pc while everyone on zoom waits for the screen to load and a journey in following designer's instructions: "no a bit more left, no actually right, ok go down, no up, ok back go the left a bit, ok here it is!", same vibe as rally racing lol
    - wryanzimmerman 3y ago
      For #1: don’t use it in chrome, download the app (it seems like it takes advantage of the wrapper pretty well); for #2, just click on the designer’s name in the top corner to zoom your screen to theirs and let them drive for a second!
  - yazzku 3y ago
    Sounds like either processes are waiting on each other, or the OS sucks.
  - capableweb 3y ago
    > I’ve seen this happen, but I don’t understand why that is possible. Chrome tabs are separate process, how can one tab freeze the whole browser even when running the worst code in existence? Because if anything takes up 100% of CPU, other things starts being unresponsive as there is not enough CPU to go around. Happens easily when dealing with concurrency and parallism, which I'm guessing Figma happily uses.
deleted 3y ago
[deleted]
yazzku 3y ago
> We recently developed stress test scenarios for rendering complex scenes—like thousands of layers edited by 50 multiplayer users—and took a very deep dive into CPU and GPU profiles. I don't really know what any of this means. You're running a single-thread graphics API (OpenGL) in a browser (does WASM support background threads?). On any modern PC, that's gonna look like 1 CPU thread doing all the work and the GPU idling 80% of the time waiting for something to happen.
- jillesvangurp 3y ago
  > does WASM support background threads? yes Figma is able to use more than 1 CPU core and also claim a lot of your GPUs capabilities. Don't believe me? Open Figma, load a large file and watch it use multiple CPU cores using htop. Driving the GPU is not all the application does. It also has to work with a largish model and abstract syntax tree and do lots of complex things with that before it goes anywhere near the GPU and opengl. Driving that probably happens on the main thread. On a modern M1, the app is fast and responsive. It only uses a few worker threads (less than the number of CPU cores) and the GPU is fast enough to keep framerates high if you do things like zooming and panning the view. It's the older and slower laptops that are going to be more challenging.
perryizgr8 3y ago
Figma is anything but fast. Whenever I need to open a file it takes a minute to load on my half a gigabit connection. It's strange how much people are willing to put up with slow software nowadays.
- agracey 3y ago
  How fast is it after opening the file? I’d imagine there are trade-offs being made where some aspect of performance are sacrificed to improve others but I haven’t used Figma (sadly, it looks really nice)
  - perryizgr8 3y ago
    It does pretty well after the initial loading. But the loading is excruciating for me because I need to open different files again and again throughout the day, and it takes the same amount of time to load every file every time.
    - imslavko 3y ago
      (author of the article) I want to acknowledge that the load-times for Figma go up linearly with the complexity of your design file + its dependencies. It is always painful when users rightfully complain about giant design files taking a while to load and fully render. The team is working on changing that so hopefully your experience gets better over time. This is not my area of expertise, so I am not in the position to promise anything on this forum but I just want to say that the testing framework described in the article is also used to continuously test and measure the file load/parsing time as folks are working towards algorithmic improvements.
antoineMoPa 3y ago
That's kind of wild to me to see an app like Figma that's a commercial success, but also a demonstration of technical excellency. My brain automatically assumes that you can't pick both commercial success and technical excellency at the same time and must compromise on the latter to build more features. But maybe there is hope and users actually love the benefits of a better tech stack (performance, consistency, stability) and maybe it's easier to build features with an excellent technical foundation.
- tmpz22 3y ago
  > My brain automatically assumes that you can't pick both commercial success and technical excellency at the same time The problem is your anchor point. Your idea of what software can and should be is based on? Gmail? Salesforce? The GTAV loading screen? The iOS warning that you’re running out of icloud storage space? Silicon Valley software expectations are tainted by recency bias and private equity excrement. The current ceiling to aspire to is literally “CI passes”
- tobyjsullivan 3y ago
  Your assumption was correct most of the time. 99% of tech startups are not innovating technically. They are applying existing tech to new problems. In these cases, quality engineering is low priority. But there is that other 1% that is making new things possible. And if they are extremely lucky, they’ll build new tech and figure out how to turn it into a product. Figma is an example of what can happen when that mix hits. Most technical innovations, though, will be licensed/sold/etc. to other companies which fall into the first group. All that said, it turns out customers love software that works well. Startups (and most software companies, really) undervalue quality because it’s hard and not strictly necessary when there’s no direct competition.
- DanielHB 3y ago
  Sometimes commercial success is due to technical excellence. Especially in overcrowded fields just being better is enough.
lopkeny12ko 3y ago
Like many other commenters, I found this article surprising. Figma is anything but fast for me. Do you performance-test your software on any Linux distributions? Figjam on Firefox on Ubuntu is painfully slow and laggy. On a 32-core Ryzen machine, drawing lines on an empty file visibly lags. Doing the same thing in Excalidraw, on the other hand, is extremely responsive.
- et-al 3y ago
  To be fair, Excalidraw and Figma are vasty different in terms of scope. Is your GPU doing any work? What are the results from here? https://pmndrs.github.io/detect-gpu/ https://pmndrs.github.io/detect-gpu/
- imslavko 3y ago
  Hey there we test on macs, windows and linux laptops, it is very surprising that drawing 1 rectangle is painfully slow. Sometimes it happens when your browser does not enable hardware acceleration or when your Linux distro does not know how to switch to the discrete GPU. We won't be able to tell without getting more of your hw specs and debug information, feel free to reach out to the Figma support or email me at skim@figma.com - this is exactly the type of issues that elud us when looking at prod metrics in aggregation.

287 points by imslavko 3y ago

yeldarb 3y ago

Nice post. Figma's engineering blog looks great; right up there with Airbnb's and Etsy's which I also enjoy.

maccard 3y ago
Airbnb is a great example of a terrible experience that just keeps getting worse. It makes my M1 Mac, my 32 core workstation and my top of the line android device chug.
- rozap 3y ago
  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.
  - maccard 3y ago
    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 one I understand the least.
    - steve_adams_86 3y ago
      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.
      - sa46 3y ago
        6 bookings per second at $200 per booking is $103M processed per day. Each booking likely represents dozens to hundreds of requests. Then, for every visit resulting in a booking there’s probably hundreds of non-booking visits.
        maccard 3y ago
        > 6 bookings per second at $200 per booking is $103M processed per day. I don't doubt that they don't prcess a lot of money - that's besides the point. They're a cookie cutter CRUD app (that happens to process a lot of money) that takes _hundreds_ of requests and 12 seconds to load on a 32 core workstation with a gigabit fibre internet connection. They have no business writing a blog on performance engineering.
        lopkeny12ko 3y ago
        If your CRUD app's booking endpoint internally fans out to 100s of requests, you're doing something extremely wrong and/or you've dug yourself into microservice hell.
  - School-Cotton 3y ago
    From experience at Facebook: there are extremely good people working on performance and making heroic optimizations. The blog content is real. However, these are necessary precisely because the politics and culture of the organization make it impossible to avoid bloat that accumulates faster than the small minority of perf-conscious folks can improve things.
culi 3y ago
No RSS feed though afaict :(
- aswan 3y ago
  No, but there is atom (https://www.figma.com/blog/feed/atom.xml https://www.figma.com/blog/feed/atom.xml) and jsonfeed (https://www.figma.com/blog/feed/feed.json https://www.figma.com/blog/feed/feed.json)

titzer 3y ago

Really awesome work! If the authors happen to drop by, I'd be curious if some of the work in their pipeline might be able to help for other types of GUI applications with Wasm. I'm also very curious to see what role, if any the Wasm engine's performance plays in the overall story, and be able to distill out any key workloads that can help Wasm engines improve.

imslavko 3y ago
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 challenges of the platform we face today is the heap size limit. While Chrome supports up to 4GB today, that's not yet the case for all browsers. And even with that, we are still discovering bugs in the toolchain (see this recent issue filed by one of our engineers) https://github.com/emscripten-core/emscripten/issues/20137 https://github.com/emscripten-core/emscripten/issues/20137 The challenge of the perf-testing at scale in our company is helping developers to detect perf regressions when they don't expect them - accidental algorithmic errors, misused caches, over-rendering React components, dangerously inefficient CSS directives, etc.
- jjcm 3y ago
  +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.
  - Keyframe 3y ago
    It's amazing what we lost moving from desktop to retrograde world of the web. I wonder what's next in the indirection game?

drewda 3y ago

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 applications with high levels of information density and snappy reactivity requirements like Figma or Google Docs or a web map -- not for content-focused websites. Still, it's interesting to wonder if our arguments would be more interesting these days if we were discussing those types of approaches, rather than just fighting about React vs. Svelte, or this JavaScript module loader vs. that one...

bsder 3y ago
Figma was considered ... good? Every time I have used it, it feels incredibly laggy with a crapton of useless animations. Maybe it's better on Windows?
- jve 3y ago
  Not for me... well, I'm on Windows. It is currently the best tool for me, as a non designer, to smash together (design) icons and export in my choice of format.
- hifix 3y ago
  I use it daily on Windows and I have to say it seems pretty fast. Never noticed any lagging or unnecessary animations.
- jjcm 3y ago
  PM over here at Figma - would love to know where you're experiencing lag / where you're seeing useless animations. Overall we're pretty minimal when it comes to animations in product (i.e. here's a quick 22s recording of navigating between screens/opening properties panels in product today: https://video.non.io/video-2940009905.mp4 https://video.non.io/video-2940009905.mp4) as we really want to convey that the app is snappy/performant. Definitely keen on diving in if you're experiencing otherwise. Happy to chat here or my email is jake@figma.com. Regarding platform specific performance - it shouldn't affect things as long as you have GPU acceleration enabled. The majority of us over here at Figma are using OSX FWIW.

yellow_lead 3y ago

Seeing a 20% margin of error for some of their tests (due to VMs, noisy neighbors), makes me curious how others solve this problem. Dedicated hardware seems like a good investment, otherwise you need to constantly overcompensate with multiple runs.

imslavko 3y ago
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 experimental change that might affect performance, they would schedule a 30min-1hr run on that queue, where we run selected benchmarks 9-15 times each on laptops of various strength. In this configuration, the margin of error is closer to 2-3% from our observations so far. To get more confidence, you would want to run even more trials, typically we advise 9 iterations, though. We also do all our daily benchmarking on those laptops too. Edit: in addition to preventative testing, we also track production metrics in a similar way as described by the sibling comment
- ed_elliott_asc 3y ago
  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
  - imslavko 3y ago
    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

skhameneh 3y ago

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 https://github.com/evanw

imslavko 3y ago
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-by-3x/ https://www.figma.com/blog/webassembly-cut-figmas-load-time-... https://www.figma.com/blog/figma-faster/ https://www.figma.com/blog/figma-faster/
chrysoprace 3y ago
Also the creator and maintainer of ESBuild!
adamnemecek 3y ago
What do your mean? Did he contribute to the WASM standard?
no_wizard 3y ago
Former?! When did Evan step down?
- fhub 3y ago
  "I cofounded Figma in 2012 with Dylan Field and worked on Figma as CTO for the better part of a decade, leaving in 2021" From https://madebyevan.com/figma/ https://madebyevan.com/figma/

ShadowBanThis01 3y ago

We didn't have a problem with Figma's technology, but we did have problems with their UI. For example, it confused "teams" and "projects," making managing your work and granting access to people a baffling pain in the ass. It took a week of E-mailing people for me to gain the necessary access to my own team's files when we adopted Figma, most likely because of the inept segregation and presentation of these entities. Has there been any UI overhaul since acquisition?

mdtrooper 3y ago

I want to write only: https://penpot.app/ https://penpot.app/

permo-w 3y ago

I used Figma recently on a decent laptop. I used it both in-browser and within its desktop app. it was anything but fast. lightning speed compared to Android studio, but slow compared to anything else

chrisdbanks 3y ago

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.

samsolomon 3y ago
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.
mortenjorck 3y ago
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.
- inhumantsar 3y ago
  The most telling point to me is when people outside of product, design, or engineering use figma for the first time. In my experience they dive in and don't think about it, it's just natural to use. Not to say the UX is ideal, because imho it sucks hard, but no one complains about *having to use a webapp when they open figma.
- 3y ago

deleted 3y ago

[deleted]

MBCook 3y ago

I have the displeasure of using Figma at my job. I have a very low opinion of anything that locks up my browser for multiple seconds (Chrome or Safari) whenever I open it in a tab. Then it takes a few seconds to load the file, which I don’t care much about. But locking my entire browser is inexcusable. It’s nice they’re working on performance once you get going, but launch performance is abysmal for me (x86-64 Mac).

failuser 3y ago
I’ve seen this happen, but I don’t understand why that is possible. Chrome tabs are separate process, how can one tab freeze the whole browser even when running the worst code in existence?
- seanthemon 3y ago
  Figma is beyond chrome, it's a quantum app: it's both in a state that will lock up my pc while everyone on zoom waits for the screen to load and a journey in following designer's instructions: "no a bit more left, no actually right, ok go down, no up, ok back go the left a bit, ok here it is!", same vibe as rally racing lol
  - wryanzimmerman 3y ago
    For #1: don’t use it in chrome, download the app (it seems like it takes advantage of the wrapper pretty well); for #2, just click on the designer’s name in the top corner to zoom your screen to theirs and let them drive for a second!
- yazzku 3y ago
  Sounds like either processes are waiting on each other, or the OS sucks.
- capableweb 3y ago
  > I’ve seen this happen, but I don’t understand why that is possible. Chrome tabs are separate process, how can one tab freeze the whole browser even when running the worst code in existence? Because if anything takes up 100% of CPU, other things starts being unresponsive as there is not enough CPU to go around. Happens easily when dealing with concurrency and parallism, which I'm guessing Figma happily uses.

deleted 3y ago

[deleted]

yazzku 3y ago

> We recently developed stress test scenarios for rendering complex scenes—like thousands of layers edited by 50 multiplayer users—and took a very deep dive into CPU and GPU profiles. I don't really know what any of this means. You're running a single-thread graphics API (OpenGL) in a browser (does WASM support background threads?). On any modern PC, that's gonna look like 1 CPU thread doing all the work and the GPU idling 80% of the time waiting for something to happen.

jillesvangurp 3y ago
> does WASM support background threads? yes Figma is able to use more than 1 CPU core and also claim a lot of your GPUs capabilities. Don't believe me? Open Figma, load a large file and watch it use multiple CPU cores using htop. Driving the GPU is not all the application does. It also has to work with a largish model and abstract syntax tree and do lots of complex things with that before it goes anywhere near the GPU and opengl. Driving that probably happens on the main thread. On a modern M1, the app is fast and responsive. It only uses a few worker threads (less than the number of CPU cores) and the GPU is fast enough to keep framerates high if you do things like zooming and panning the view. It's the older and slower laptops that are going to be more challenging.

perryizgr8 3y ago

Figma is anything but fast. Whenever I need to open a file it takes a minute to load on my half a gigabit connection. It's strange how much people are willing to put up with slow software nowadays.

agracey 3y ago
How fast is it after opening the file? I’d imagine there are trade-offs being made where some aspect of performance are sacrificed to improve others but I haven’t used Figma (sadly, it looks really nice)
- perryizgr8 3y ago
  It does pretty well after the initial loading. But the loading is excruciating for me because I need to open different files again and again throughout the day, and it takes the same amount of time to load every file every time.
  - imslavko 3y ago
    (author of the article) I want to acknowledge that the load-times for Figma go up linearly with the complexity of your design file + its dependencies. It is always painful when users rightfully complain about giant design files taking a while to load and fully render. The team is working on changing that so hopefully your experience gets better over time. This is not my area of expertise, so I am not in the position to promise anything on this forum but I just want to say that the testing framework described in the article is also used to continuously test and measure the file load/parsing time as folks are working towards algorithmic improvements.

antoineMoPa 3y ago

That's kind of wild to me to see an app like Figma that's a commercial success, but also a demonstration of technical excellency. My brain automatically assumes that you can't pick both commercial success and technical excellency at the same time and must compromise on the latter to build more features. But maybe there is hope and users actually love the benefits of a better tech stack (performance, consistency, stability) and maybe it's easier to build features with an excellent technical foundation.

tmpz22 3y ago
> My brain automatically assumes that you can't pick both commercial success and technical excellency at the same time The problem is your anchor point. Your idea of what software can and should be is based on? Gmail? Salesforce? The GTAV loading screen? The iOS warning that you’re running out of icloud storage space? Silicon Valley software expectations are tainted by recency bias and private equity excrement. The current ceiling to aspire to is literally “CI passes”
tobyjsullivan 3y ago
Your assumption was correct most of the time. 99% of tech startups are not innovating technically. They are applying existing tech to new problems. In these cases, quality engineering is low priority. But there is that other 1% that is making new things possible. And if they are extremely lucky, they’ll build new tech and figure out how to turn it into a product. Figma is an example of what can happen when that mix hits. Most technical innovations, though, will be licensed/sold/etc. to other companies which fall into the first group. All that said, it turns out customers love software that works well. Startups (and most software companies, really) undervalue quality because it’s hard and not strictly necessary when there’s no direct competition.
DanielHB 3y ago
Sometimes commercial success is due to technical excellence. Especially in overcrowded fields just being better is enough.

lopkeny12ko 3y ago

Like many other commenters, I found this article surprising. Figma is anything but fast for me. Do you performance-test your software on any Linux distributions? Figjam on Firefox on Ubuntu is painfully slow and laggy. On a 32-core Ryzen machine, drawing lines on an empty file visibly lags. Doing the same thing in Excalidraw, on the other hand, is extremely responsive.

et-al 3y ago
To be fair, Excalidraw and Figma are vasty different in terms of scope. Is your GPU doing any work? What are the results from here? https://pmndrs.github.io/detect-gpu/ https://pmndrs.github.io/detect-gpu/
imslavko 3y ago
Hey there we test on macs, windows and linux laptops, it is very surprising that drawing 1 rectangle is painfully slow. Sometimes it happens when your browser does not enable hardware acceleration or when your Linux distro does not know how to switch to the discrete GPU. We won't be able to tell without getting more of your hw specs and debug information, feel free to reach out to the Figma support or email me at skim@figma.com - this is exactly the type of issues that elud us when looking at prod metrics in aggregation.