Figma Vector Networks: Graphs, Not Just Chains

WHY IT EXISTS Classic vector formats, SVG paths included, model a shape as a single ordered chain of points, each one connecting to at most two neighbors. That works for a closed outline but breaks down the moment a designer needs three or more strokes meeting cleanly at one corner, like the center of a star or an asterisk. Figma needed a data structure that could represent real world drawing, where lines branch and merge, not just trace a loop.

THE MENTAL MODEL A normal vector path is a single strand of beads on a string, point one leads to point two leads to point three. A vector network is a subway map instead, where a station, a vertex, can have any number of lines running into and out of it. That structural difference is what lets you drag one segment off a shared corner in Figma without dragging the others, something a simple path model cannot express because it has no concept of a junction with more than two connections.

HOW IT WORKS Under the hood a vector network stores three arrays. Vertices hold plain x and y coordinates. Segments connect two vertices by index and carry the curve data, tangent handles for bezier curves. Regions, optional, describe filled areas as closed loops of segment indices, which is how Figma renders fill separately from stroke on a shape that is not a simple closed path. Because segments reference vertices by index rather than forming an implicit chain, the same vertex can anchor two, three, or a dozen segments at once.

WHEN IT MATTERS This distinction matters directly to anyone building a Figma plugin that generates or edits geometry programmatically. Reading a node's simplified vector paths gives you a flattened, SVG like chain that loses junction information. Reading its full vector network preserves every shared vertex, which you need if the plugin has to detect or recreate multi way joins. The footgun is assuming the two representations are interchangeable and shipping a plugin that silently mangles any shape with a branching point.

ONE CONCRETE EXAMPLE Building a plugin that draws a five pointed star, you define ten vertices around the points and inner corners, ten segments connecting them in sequence, and one region listing all ten segments to fill the shape. Because it is expressed as a network, a designer can later select just the inner corner between two points and drag it independently, reshaping the star without breaking the two segments that meet there.