12 votes

The engineering behind Figma's vector networks (2019)

3 comments

  1. [3]
    Akir
    Link
    I couldn’t get through this all the way. About a third of the way something about all the pictures and simple writing made my early morning brain start to boil over from trying to imagine...

    I couldn’t get through this all the way. About a third of the way something about all the pictures and simple writing made my early morning brain start to boil over from trying to imagine implementing the features they did. But even so it actually made me change my mind about Figma’s vector networks.

    As someone who hasn’t used Figma, I had read about them and thought it was basically marketing fluff. When I found an explanation of what they were I had swept it under the rug because it just sounded as if they just had a silly new data structure to use instead of paths. Due to my lack of familiarity of the workings of vector drawing programs, I didn’t realize that this was such a big engineering challenge. The data structures they are using must be fairly elaborate. It bugs me a bit because it seems like it would be much less efficient than your typical path implementation, but given that everyone has computers with resources that are several orders of magnitude greater than when paths were originally designed, it’s probably not a big deal.

    2 votes
    1. [2]
      krellor
      Link Parent
      So I gave the full thing a read, and it is an interesting article. I don't think the data structure or computations are so complicated or intensive, though to your point, horsepower has come a...

      So I gave the full thing a read, and it is an interesting article. I don't think the data structure or computations are so complicated or intensive, though to your point, horsepower has come a long way so it is relative.

      Much of the math is numerical analysis, graph theory, and linear algebra, which are well understood and have computationally efficient algorithms for most methods.

      As an example, years ago when HTML5 canvas first became available, I made a JavaScript game like Risk. You could upload image map files. They could be hand drawn, with wild shapes, or neat and orderly. You could upload the map and then use the game tools to make it playable. The first thing was defining the territories and their boundaries.

      I used many of the same objects and methods they use in this article. To detect a territory, the user would start a new territory and then click several points inside. Rays, or as this article calls them, lasers would eminate from these points until they detected a collision with a boundary (change in color, existing boundary definition, etc). Using the algorithm mentioned I would then define a central point inside the object, organize the boundary points in terms of clockwise along the boundary, and then define the path. I didn't have a need to implement the graph cycles algorithm, but that is also well understood in graph theory. Organizing these fundamentals into a vector graph object wouldn't be so difficult, I don't think.

      Fun aside: I found a bug in two browsers when calculating how to order the points clockwise from a central point. So to anyone out there doing linear algebra in the browsers, you're welcome, I put in the bug reports with steps to reproduce.

      The biggest lift is basically taking these new fundamental objects and implementing all the functionality that has been created over the years using different base objects.

      I'm not trying to down play what Figma it's doing. It's cool, and difficult. But the math is well understood, algorithms already exist, and most of them have well circulated examples in code, at least in academia.

      If you do have any specific questions in happy to try and answer them, although this wasn't my primary area in math, and I might be a bit in replying.

      5 votes
      1. Akir
        Link Parent
        Just to clarify, I don’t think that what they are doing is particularly hard to make. It was more like it was too early in the morning to think about it at the time, and I couldn’t help myself. It...

        Just to clarify, I don’t think that what they are doing is particularly hard to make. It was more like it was too early in the morning to think about it at the time, and I couldn’t help myself. It was giving me a headache.