4 ms·

The engineering behind Figma's vector networks (2019)

209 points by alexharri 3y ago

karmakaze 3y ago
I can't tell who this article is for. It describes points, lines, nodes, edges, and Bezier curves, so I thought it might be not so in depth. But it's long, and skimming down I see talk of determinants and think there might be something there. Even thinking that a "Vector Network" is some great discovery when it's allowing more than a single cycle in a graph needs earlier substantiation--I don't have time to read all the background intro throughout the piece to the end. I'll guess that the 'engineering' here is a review of some graph and/or 2D graphics algorithms.
- epistasis 3y ago
  It's for the interested person who doesn't have much background but wants to go super in depth on the feature. I've taken some computational geometry classes, and loved the interesting theorems and which seemingly trivial problems were actually extremely difficult to prove, and which seemingly complex things were easy to prove, it's a very fun field. Still, I had never actually written the code or seen the algorithms for drawing Bézier curves, so this was great for me. I love drawing with vector graphics, but haven't used Figma much, so seeing their vector graphs was very enlightening for me. I'll be using Figma in the future. It feels like this article was tailor made for me, I loved it.
- jsejcksn 3y ago
  Paragraph five: > This post can be thought of as an introduction to a really interesting problem space, and as a resource for people interesting in making use of some aspects of Vector Networks for future applications. I hope it succeeds in providing value to both developers being introduced to new concepts and ideas, and to designers interesting in learning more about the tool they know and love.
  - ricardobeat 3y ago
    Seems like that was too far into the article for them to reach. But there’s always enough time for a lengthy rant about their own inability to focus for a few minutes (and how the article itself is somehow at fault!).
- alexharri 3y ago
  This post was intended as a source of information for developers who might want to implement vector networks in their own projects. Back in 2018 I wanted to support vector networks in my animation editor project, but had a really hard time finding information. I didn't have a math or CS background, so just knowing what concepts to Google was somewhat of a brick wall. Googling "vector networks" didn't yield any useful results, because there weren't any resources discussing them (aside from marketing content from Figma). So in writing this post, I wanted to create the resource I needed back then.
  - riperoni 3y ago
    This is a nice writeup, but the definition and usage of determinant makes my nails curl. A determinant is defined for matrices, not for vectors and from the purpse of your article I think you skipped over that part for simplicty/brevity. But really, introducing it once properly, then going to the more pragmatic definition of yours aknowledging that it is skipping some parts would be so much better for someone not knowing this field in depth. Or just not calling it determinant. And mentioning that determinants show a sort of scale factor of transformation, also for 3D, would be nice to connect to 3D rendering and such. Since it is meant as intro/tutorial on implementation I would really point into all the right math-relates directions as a reference. Whoever wants, can read or skip those parts.
- syspec 3y ago
  Id rather it exist in its current form than not exist. Sometimes it's just hard to write blog posts. How much is too little info, how much is too detailed. It's actually really hard stuff that we all wrestle with when writing. So to the authors, thanks!
rgovostes 3y ago
Comprehensive! > In this case, that's b. We repeat the previous step and keep selecting the CCW edge until we reach the original node. Isn’t it a?
matroid 3y ago
It looks like Vector Networks is based on Boris Dalstein's work (https://www.borisdalstein.com/research/phd https://www.borisdalstein.com/research/phd). He even has a startup (VGC) for Vector Graphic Editing tool based on these concepts. It is pretty cool! P.S. I have no affiliation with his work, although I did contribute 10$ to his Kickstarter Campaign back in the day.
- rjkaplan 3y ago
  Figma supported vector networks a few years before that thesis was written (I worked there at the time).
  - goodmachine 3y ago
    Are you sure? Boris Dalstein first published his work on Vector Graphic Complexes (VGC) at SIGGRAPH in 2014 [1] Figma introduced Vector Networks in 2016 [2] [1] https://www.borisdalstein.com/research/vgc/ https://www.borisdalstein.com/research/vgc/ [2] https://www.figma.com/blog/introducing-vector-networks/ https://www.figma.com/blog/introducing-vector-networks/
    - wslh 3y ago
      Learning too much from this thread. I tried to look at Wikipedia and it seems there is an opportunity for a page about vector networks!
    - dfield 3y ago
      CEO of Figma here. Most of the original insights around vector networks were in 2013, though we continued to polish the implementation over time. We didn't exit stealth and ship the closed beta of Figma until December 2015 which is why there isn't blog content before then. At first glance, this thesis looks super neat! I'm excited to check it out! I don't believe I've seen it before which is surprising given the overlap.
      - goodmachine 3y ago
doubloon 3y ago
pretty awesome. i really feel like Geometric Algebra, specifically the concepts of wedge product and bivectors, could save everyone a lot of time if it was put into the curriculum. because people keep "rediscovering" it all the time and calling it different names. (here "determinant")
- nyrikki 3y ago
  This! Gibbs/Heavysides style vectors are convenient because it works with our 3D intuition, but Grassman/Clifford style works better for the differential calculus of gradient decent, hyper planes of DBScan, computer graphics etc... Here is a programer friendly site that may be of help for those who are interested. The geometric product being the sum of the exterior and dot products also solves a lot of things you run into with vector and tensor analysis. https://bivector.net/ https://bivector.net/
  - jiggawatts 3y ago
    I like to think of GA as strongly-typed matrix algebra. Instead of putting everything into one type (a matrix of numbers), it recognises and makes explicit physical concepts such as surfaces and volumes.
tuukkah 3y ago
TLDR: How to extend Bezier curves to a graph in vector graphics editors.
tsuru 3y ago
I haven't had time to deep read all the way through yet, but this feels so similar to the half-edge structure used in many 3d mesh editing programs but in 2d...
jansan 3y ago
Where in Figma can I find those vector networks? I see only see very basic path editing features..
- ricardobeat 3y ago
  This is about the basic path editing and how it differs from traditional software. Reading the first 30% of the post will be enough to see what you’re missing.
spankalee 3y ago
This is a cool feature of Figma, but in the frontend world it's the type of thing that makes Figma not a great tool for UI design because it's hard to translate to UI frameworks.
- CharlesW 3y ago
  Is it not as simple as using a plug-in to export to SVG, Lottie, Swift UI code, or whatever?
- ricardobeat 3y ago
  What does that even mean? Designers can create hard-to-implement UI using plain shapes and lines, vector networks don’t change that. And, we have had full SVG support for ages now.
- coldtea 3y ago
  You're not supposed to (or to expect to) translate a vector drawing to "UI frameworks".
  - spiderice 3y ago
    I mean, you could expect to be able to translate from your UI design software to your UI framework. Not sure why you're creating that limitation.
    - coldtea 3y ago
      Because the "vector networks" and vector graphics editing are for the graphic design part of Figma, not the UI design one. You don't just draw whatever random vector shape and turn it into UI. You create UI elements and arrange them in UI related containers (grids etc) for that. The "vector drawing" is for the decoration of the UI, not for its definition.
muglug 3y ago
> The big idea behind the project is to be a piece of animation software that's tailor-made for creating and running dynamic animations on the web. I'll share more about this project at a later date. Macromedia/Adobe Flash was exactly this, and supported vector networks. The only big difference relevant to the article was that Flash supported quadratic beziers natively, but not cubic ones. That meant no self-overlapping curves were possible.
nikkwong 3y ago
Vector networks are interesting, but I've always found their addition into Figma to be an solution that was implemented by engineers to scratch their own fancy rather than to be used practically in the real world. Vector networks would conceivably allow you to draw with vectors in a way that is laborious in other tools like Illustrator/Affinity because of the two-connected node limitation; allowing you to create a drawing of something like a wheel with 8 spokes that is just a single path rather than 8 paths that are layered on top of each other in other tools. Vector networks feel like the correct way to draw an object rather than the hack that designers have been relying on since the inception of vector-based art because of this limitation. The problem is that well, vector-networks, in conjunction with the standard pen tool, are not enough to actually be useful for drawing. Figma doesn't have any newer path-drawing functionality like a curvature or 'smart-mode' pen tool which draws curves that are fully continuous and pleasant looking. These newer tools are a cornerstone of creating elegant looking shapes in modern vector design programs, but Figma just has the 25-year old pen tool. Figma also doesn't have other tools that are necessary for drawing—reflect, an isometric mode, path smoothing, blending, repeating, etc. It's a strange positioning because vector networks are basically only useful for drawing (like drawing an object like a car, or a scene, or something). I have never used them once for UI design, which is generally based on rectangles where a vector-network isn't needed. And they would make drawing so much better, as the linked post describes. But without any additional helper tools, you just can't create drawings of any complexity on their own; so they end up not being used. Figma could be the best vector drawing tool because of everything else that makes Figma so great—it's wonderful UI, snappiness, great color handling, etc. I want Figma to be able to replace illustrator for me so damn bad. And they are so close. But they have chosen to not focus on drawing at all; so they have this amazing vector-network thing that they're always bragging about—but I doubt anyone's really using it for anything, since it is useless for drawing just by itself. The real goldmine for artists who create vector based art would be if a tool that is actually built for drawing—like illustrator—decided to add vector-networks as a core part of their offering. I mean, at the end of the day, a vector-network is basically a bunch of paths that have a node with a shared coordinate. Doesn't seem like it would be that hard to implement, but Adobe innovates on Illustrator at snail-like speed.
- jansan 3y ago
pier25 3y ago
Figma has some really cool ideas. It would be awesome if they released a tool focused on illustration instead of UI.

209 points by alexharri 3y ago

I can't tell who this article is for. It describes points, lines, nodes, edges, and Bezier curves, so I thought it might be not so in depth. But it's long, and skimming down I see talk of determinants and think there might be something there. Even thinking that a "Vector Network" is some great discovery when it's allowing more than a single cycle in a graph needs earlier substantiation--I don't have time to read all the background intro throughout the piece to the end. I'll guess that the 'engineering' here is a review of some graph and/or 2D graphics algorithms.

epistasis 3y ago
It's for the interested person who doesn't have much background but wants to go super in depth on the feature. I've taken some computational geometry classes, and loved the interesting theorems and which seemingly trivial problems were actually extremely difficult to prove, and which seemingly complex things were easy to prove, it's a very fun field. Still, I had never actually written the code or seen the algorithms for drawing Bézier curves, so this was great for me. I love drawing with vector graphics, but haven't used Figma much, so seeing their vector graphs was very enlightening for me. I'll be using Figma in the future. It feels like this article was tailor made for me, I loved it.
jsejcksn 3y ago
Paragraph five: > This post can be thought of as an introduction to a really interesting problem space, and as a resource for people interesting in making use of some aspects of Vector Networks for future applications. I hope it succeeds in providing value to both developers being introduced to new concepts and ideas, and to designers interesting in learning more about the tool they know and love.
- ricardobeat 3y ago
  Seems like that was too far into the article for them to reach. But there’s always enough time for a lengthy rant about their own inability to focus for a few minutes (and how the article itself is somehow at fault!).
alexharri 3y ago
This post was intended as a source of information for developers who might want to implement vector networks in their own projects. Back in 2018 I wanted to support vector networks in my animation editor project, but had a really hard time finding information. I didn't have a math or CS background, so just knowing what concepts to Google was somewhat of a brick wall. Googling "vector networks" didn't yield any useful results, because there weren't any resources discussing them (aside from marketing content from Figma). So in writing this post, I wanted to create the resource I needed back then.
- riperoni 3y ago
  This is a nice writeup, but the definition and usage of determinant makes my nails curl. A determinant is defined for matrices, not for vectors and from the purpse of your article I think you skipped over that part for simplicty/brevity. But really, introducing it once properly, then going to the more pragmatic definition of yours aknowledging that it is skipping some parts would be so much better for someone not knowing this field in depth. Or just not calling it determinant. And mentioning that determinants show a sort of scale factor of transformation, also for 3D, would be nice to connect to 3D rendering and such. Since it is meant as intro/tutorial on implementation I would really point into all the right math-relates directions as a reference. Whoever wants, can read or skip those parts.
syspec 3y ago
Id rather it exist in its current form than not exist. Sometimes it's just hard to write blog posts. How much is too little info, how much is too detailed. It's actually really hard stuff that we all wrestle with when writing. So to the authors, thanks!

rgovostes 3y ago

Comprehensive! > In this case, that's b. We repeat the previous step and keep selecting the CCW edge until we reach the original node. Isn’t it a?

matroid 3y ago

It looks like Vector Networks is based on Boris Dalstein's work (https://www.borisdalstein.com/research/phd https://www.borisdalstein.com/research/phd). He even has a startup (VGC) for Vector Graphic Editing tool based on these concepts. It is pretty cool! P.S. I have no affiliation with his work, although I did contribute 10$ to his Kickstarter Campaign back in the day.

rjkaplan 3y ago
Figma supported vector networks a few years before that thesis was written (I worked there at the time).
- goodmachine 3y ago
  Are you sure? Boris Dalstein first published his work on Vector Graphic Complexes (VGC) at SIGGRAPH in 2014 [1] Figma introduced Vector Networks in 2016 [2] [1] https://www.borisdalstein.com/research/vgc/ https://www.borisdalstein.com/research/vgc/ [2] https://www.figma.com/blog/introducing-vector-networks/ https://www.figma.com/blog/introducing-vector-networks/
  - wslh 3y ago
    Learning too much from this thread. I tried to look at Wikipedia and it seems there is an opportunity for a page about vector networks!
  - dfield 3y ago
    CEO of Figma here. Most of the original insights around vector networks were in 2013, though we continued to polish the implementation over time. We didn't exit stealth and ship the closed beta of Figma until December 2015 which is why there isn't blog content before then. At first glance, this thesis looks super neat! I'm excited to check it out! I don't believe I've seen it before which is surprising given the overlap.
    - goodmachine 3y ago

doubloon 3y ago

pretty awesome. i really feel like Geometric Algebra, specifically the concepts of wedge product and bivectors, could save everyone a lot of time if it was put into the curriculum. because people keep "rediscovering" it all the time and calling it different names. (here "determinant")

nyrikki 3y ago
This! Gibbs/Heavysides style vectors are convenient because it works with our 3D intuition, but Grassman/Clifford style works better for the differential calculus of gradient decent, hyper planes of DBScan, computer graphics etc... Here is a programer friendly site that may be of help for those who are interested. The geometric product being the sum of the exterior and dot products also solves a lot of things you run into with vector and tensor analysis. https://bivector.net/ https://bivector.net/
- jiggawatts 3y ago
  I like to think of GA as strongly-typed matrix algebra. Instead of putting everything into one type (a matrix of numbers), it recognises and makes explicit physical concepts such as surfaces and volumes.

tuukkah 3y ago

TLDR: How to extend Bezier curves to a graph in vector graphics editors.

tsuru 3y ago

I haven't had time to deep read all the way through yet, but this feels so similar to the half-edge structure used in many 3d mesh editing programs but in 2d...

jansan 3y ago

Where in Figma can I find those vector networks? I see only see very basic path editing features..

ricardobeat 3y ago
This is about the basic path editing and how it differs from traditional software. Reading the first 30% of the post will be enough to see what you’re missing.

spankalee 3y ago

This is a cool feature of Figma, but in the frontend world it's the type of thing that makes Figma not a great tool for UI design because it's hard to translate to UI frameworks.

CharlesW 3y ago
Is it not as simple as using a plug-in to export to SVG, Lottie, Swift UI code, or whatever?
ricardobeat 3y ago
What does that even mean? Designers can create hard-to-implement UI using plain shapes and lines, vector networks don’t change that. And, we have had full SVG support for ages now.
coldtea 3y ago
You're not supposed to (or to expect to) translate a vector drawing to "UI frameworks".
- spiderice 3y ago
  I mean, you could expect to be able to translate from your UI design software to your UI framework. Not sure why you're creating that limitation.
  - coldtea 3y ago
    Because the "vector networks" and vector graphics editing are for the graphic design part of Figma, not the UI design one. You don't just draw whatever random vector shape and turn it into UI. You create UI elements and arrange them in UI related containers (grids etc) for that. The "vector drawing" is for the decoration of the UI, not for its definition.

muglug 3y ago

> The big idea behind the project is to be a piece of animation software that's tailor-made for creating and running dynamic animations on the web. I'll share more about this project at a later date. Macromedia/Adobe Flash was exactly this, and supported vector networks. The only big difference relevant to the article was that Flash supported quadratic beziers natively, but not cubic ones. That meant no self-overlapping curves were possible.

nikkwong 3y ago

Vector networks are interesting, but I've always found their addition into Figma to be an solution that was implemented by engineers to scratch their own fancy rather than to be used practically in the real world. Vector networks would conceivably allow you to draw with vectors in a way that is laborious in other tools like Illustrator/Affinity because of the two-connected node limitation; allowing you to create a drawing of something like a wheel with 8 spokes that is just a single path rather than 8 paths that are layered on top of each other in other tools. Vector networks feel like the correct way to draw an object rather than the hack that designers have been relying on since the inception of vector-based art because of this limitation. The problem is that well, vector-networks, in conjunction with the standard pen tool, are not enough to actually be useful for drawing. Figma doesn't have any newer path-drawing functionality like a curvature or 'smart-mode' pen tool which draws curves that are fully continuous and pleasant looking. These newer tools are a cornerstone of creating elegant looking shapes in modern vector design programs, but Figma just has the 25-year old pen tool. Figma also doesn't have other tools that are necessary for drawing—reflect, an isometric mode, path smoothing, blending, repeating, etc. It's a strange positioning because vector networks are basically only useful for drawing (like drawing an object like a car, or a scene, or something). I have never used them once for UI design, which is generally based on rectangles where a vector-network isn't needed. And they would make drawing so much better, as the linked post describes. But without any additional helper tools, you just can't create drawings of any complexity on their own; so they end up not being used. Figma could be the best vector drawing tool because of everything else that makes Figma so great—it's wonderful UI, snappiness, great color handling, etc. I want Figma to be able to replace illustrator for me so damn bad. And they are so close. But they have chosen to not focus on drawing at all; so they have this amazing vector-network thing that they're always bragging about—but I doubt anyone's really using it for anything, since it is useless for drawing just by itself. The real goldmine for artists who create vector based art would be if a tool that is actually built for drawing—like illustrator—decided to add vector-networks as a core part of their offering. I mean, at the end of the day, a vector-network is basically a bunch of paths that have a node with a shared coordinate. Doesn't seem like it would be that hard to implement, but Adobe innovates on Illustrator at snail-like speed.

jansan 3y ago

pier25 3y ago

Figma has some really cool ideas. It would be awesome if they released a tool focused on illustration instead of UI.