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.
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 ⌥ (Option/Alt) 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.
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.
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.
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.
Add styling to the end point of any open paths. Figma displays the cap property differently depending upon the type of vector path you have selected.
Vector paths with two endpoints
Figma will display cap properties in the right sidebar if a vector path with only two endpoints is selected. You are able to set each end cap independently of the other.
Vector paths with more than two endpoints
Figma will display cap properties in the advanced stroke menu ↓ if a vector path with more than two endpoints is selected.
You cannot edit end caps independently when the entire vector path selected. To edit end caps independently, select a single vector point while in vector edit mode →.
- None: Adds no cap to the end of the path. The end of the path are squared off, without adding any length to the path.
- Line arrow: Adds two 45-degree lines to either side of the end point(s). This uses the same stroke weight as the path itself. You cannot change the length of the arrow head lines.
- Triangle arrow: Add a triangle arrowhead to both end points. You'll need to enter vector edit mode → to apply an arrow to only one end of the path.
- Reverse triangle: A reversed or flipped version of the triangle arrow, with the arrow point facing inward toward the path.
- Diamond arrow: A solid diamond cap.
- Round (default): Adds a cap half the stroke weight, as well as rounding the end point of the path to 50% the width.
- Square: Adds a cap half the stroke weight, while squaring the end point of the path.