Vector Networks

Vector networks are one of the most unique features in Figma. Most pen tools draw paths in a loop with a defined direction, always wanting to reconnect to their original point. Vector networks do not have a direction and can fork off in different directions without requiring a separate path object to be created. Complex objects can then be created within the same object and with the same properties much faster than they could be drawn using traditional vector path tools.

Check out this  video tutorial to see Vector Networks in action. And be sure to read “Introducing Vector Networks” on our Medium page.

Creating

You can use the Pen tool, or any of the Shape tools, to create a new vector layer. 

When using Shape tools, you can hold modifier keys to draw them in specific ways:

  • If you hold ⇧ (Shift) while creating a shape, it locks the shape’s aspect ratio to 1:1.
  • If you hold ⌥ while creating a shape, the shape is created relative to its center instead of its top-left corner.
  • If you hold space bar while creating the shape, it moves the entire shape instead of just a single point.

Editing

If you select a path and hit  ENTER , you’ll enter Vector Edit mode, in which you can select, adjust, or change properties of individual points, lines, or entire shapes. You can also use the Edit Object button from the Toolbar to enter Vector Edit. To exit, just hit ENTER again or press DONE in the toolbar.

When you're editing an object, you can interact with the existing points and the lines between them. You can also use the Pen Tool to plot additional points and manipulate those as well. 

Paths between the points can be straight lines, or you can curve them using the Bend Tool to activate Beziers.

Bézier Curves

To access a point’s Bézier handles, enter Edit mode. If it is a curve, the handles will already be showing. If it is a corner with no handles, hold ⌘ and click the point to show the handles and create a mirrored curve.

Rounded Corners

Any intermediate point on a path can be rounded via the Corner Radius property in the Inspector. If you select the entire path, it rounds all corners to the same degree. If you go into Edit mode, you can select individual points and round them separately.

Terminal points on an open path can only be rounded via End Caps.

End Caps

End Caps enable you to add styling to terminal points on an unclosed path. The first three also apply to the ends of each dash of a dash pattern. The default Cap style is None so lines and dash patterns track the dash length specified. You can also select from these other styles:

  • None (default): No cap is applied. The terminal point is the end of the path.
  • Square: A cap half the stroke width is applied and the corners are square.
  • Round: A cap half the stroke width is applied and the corners are rounded to 50%.
  • Line Arrow: Two 45-degree line segments are applied to either side of the terminal point(s) with the same stroke width as the path.
  • Triangle Arrow: An equilateral triangle is applied to the terminal point(s).

Check out this  video tutorial to see Vector Networks in action. And be sure to read “Introducing Vector Networks” on our Medium page.