5 ms·

For people like me who know little about Figma, what motivates their use of WebAssembly?

by dfgdfg34545456 2y ago

jumploops 2y ago
They started with the goal of photoshop in the browser.
- 8n4vidtmkvmk 2y ago
  Photopea is great and replaced my need for PS. I only do light weed editing though
  - gedy 2y ago
    > light weed editing Sounds like getting stoned and making a meme or something
    - erhaetherth 2y ago
      Haha. Auto-correct. I think I meant light "work" editing maybe??
codeflo 2y ago
You probably know that Figma is a UX design software. This means it’s basically a graphics program: you draw shapes, you scroll and zoom around. It does that extremely well. It’s unbelievably snappy even on a very large canvas with many complex UI screens. Very few desktop applications run nearly as well these days. I’m convinced that this kind of optimization is an important part of their success.
- dfgdfg34545456 2y ago
  I'm curious about how it all hangs together, WebAssembly and Typescript. The very first mention of WebAssembly in the article: "Some years after WebAssembly obtained widespread mobile support, we replaced many core components of our Skew engine"
  - fastball 2y ago
    I'd assume all the graphics computation happens in C++ code via WebAssembly, which is then rendered in the browser via WebGL. The Typescript part is the glue and all the non-gfx parts of the interface, like the top bar / sidebars / etc. Since Figma is also all about multiplayer, I imagine they might have a system that takes changes to a document, packages them up in a compact binary format, and then sends that over the wire (to Figma or to other connected clients). A decent decent target for a WASM module would probably be that serialization/deserialization step.
- BananasFritas69 2y ago
  unbelievably snappy until you build something complex with complex components that have a lot of hidden variants, exponentially scales the number of existing layers and it goes dogshit with <10 fps, lag, and screen freezes (even on apple chip)
  - flohofwoe 2y ago
    That sounds more like a "Doc, it hurts when I do this" problem though.
    - easton 2y ago
      Yes, but it’s hard to explain that to a designer without technical background.
kveykva 2y ago
Vector editing has a lot of CPU bound tasks. Evan has some writing regarding the transition to WASM https://medium.com/figma-design/webassembly-cut-figmas-load-time-by-3x-76f3f2395164 https://medium.com/figma-design/webassembly-cut-figmas-load-...
- dfgdfg34545456 2y ago
  Thanks, that is helpful.

For people like me who know little about Figma, what motivates their use of WebAssembly?

jumploops 2y ago

They started with the goal of photoshop in the browser.

8n4vidtmkvmk 2y ago
Photopea is great and replaced my need for PS. I only do light weed editing though
- gedy 2y ago
  > light weed editing Sounds like getting stoned and making a meme or something
  - erhaetherth 2y ago
    Haha. Auto-correct. I think I meant light "work" editing maybe??

codeflo 2y ago

You probably know that Figma is a UX design software. This means it’s basically a graphics program: you draw shapes, you scroll and zoom around. It does that extremely well. It’s unbelievably snappy even on a very large canvas with many complex UI screens. Very few desktop applications run nearly as well these days. I’m convinced that this kind of optimization is an important part of their success.

dfgdfg34545456 2y ago
I'm curious about how it all hangs together, WebAssembly and Typescript. The very first mention of WebAssembly in the article: "Some years after WebAssembly obtained widespread mobile support, we replaced many core components of our Skew engine"
- fastball 2y ago
  I'd assume all the graphics computation happens in C++ code via WebAssembly, which is then rendered in the browser via WebGL. The Typescript part is the glue and all the non-gfx parts of the interface, like the top bar / sidebars / etc. Since Figma is also all about multiplayer, I imagine they might have a system that takes changes to a document, packages them up in a compact binary format, and then sends that over the wire (to Figma or to other connected clients). A decent decent target for a WASM module would probably be that serialization/deserialization step.
BananasFritas69 2y ago
unbelievably snappy until you build something complex with complex components that have a lot of hidden variants, exponentially scales the number of existing layers and it goes dogshit with <10 fps, lag, and screen freezes (even on apple chip)
- flohofwoe 2y ago
  That sounds more like a "Doc, it hurts when I do this" problem though.
  - easton 2y ago
    Yes, but it’s hard to explain that to a designer without technical background.

kveykva 2y ago

Vector editing has a lot of CPU bound tasks. Evan has some writing regarding the transition to WASM https://medium.com/figma-design/webassembly-cut-figmas-load-time-by-3x-76f3f2395164 https://medium.com/figma-design/webassembly-cut-figmas-load-...

dfgdfg34545456 2y ago
Thanks, that is helpful.