Introducing Vector Networks | Figma Blog (opens in new tab)
Figma’s vector networks replace the traditional path model with a more flexible structure that lets users connect, split, and manipulate geometry naturally. The system remains compatible with existing cubic Bézier curves while improving direct editing, strokes, and fills. The result is a vector tool that behaves more like physical drawing and avoids several long-standing limitations of pen-based editors. ## Vector Networks vs. Traditional Paths - Traditional paths are chains of lines and curves connecting two endpoints. - Vector networks allow lines and curves between any points, without requiring one continuous chain. - Users can: - Connect any points together - Delete geometry anywhere - Split and recombine shapes naturally - Attach three or more lines to a single point - Stroke caps and joins work consistently, including at multi-line junctions. ## Direct Curve Manipulation - Existing vector tools typically use cubic Bézier curves with control handles positioned away from the curve. - Figma preserves Bézier compatibility but adds a bend tool for direct manipulation. - Holding Command on macOS allows users to drag the curve itself. - Figma automatically adjusts the underlying control handles to match the desired bend. ## More Intuitive Fills - Traditional vector engines use the winding number rule, where fill behavior depends on curve direction. - This makes fills difficult to understand because users generally cannot see whether curves were drawn clockwise or counterclockwise. - Vector networks automatically fill enclosed regions. - A paint bucket-style tool lets users toggle individual enclosed areas to create holes directly. - Developing this fill system was the most difficult part because earlier approaches required users to manually manage negative space. ## Design Through Iteration - Figma’s team initially explored more advanced curve types but chose to remain compatible with existing vector formats. - User studies showed that many people did not consciously notice vector networks; they simply found the tool behaved as expected. - The contrast became clear when users returned to conventional vector editors and encountered their limitations. - Despite many abandoned approaches and doubts during development, Figma concluded that vector networks offered a meaningful improvement over paths. Figma’s recommendation is implicit: vector editing should prioritize direct manipulation and intuitive geometry rather than forcing users to understand the underlying path mechanics. Vector networks preserve compatibility while making drawing, editing, strokes, and fills substantially more natural.