Vector networks

Before you start

Who can use this feature

Supported on any team or plan.

Anyone with can edit access can create and edit vector networks.

Vector networks are shape layers made up of vector paths. These paths tell Figma how to render that shape on the canvas, including where to apply a layer's stroke and fill properties.

A lot of vector tools only allow you to draw paths in a single direction, often ending at the original starting point. Vector networks are unique in that they don't require a specific direction. They can have multiple paths that fork off in different directions, without you having to create and combine separate paths.  That's why we call them vector networks.

Use vector networks to create your own unique shapes, detailed icons, and even intricate illustrations. Use the Pen tool to create your own vector networks from scratch. Or edit any shape layer, including basic shapes, in vector edit mode to make a vector network.

Create vector networks

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

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

• Hold ⇧ Shift while creating a shape to lock the shape’s aspect ratio to 1:1.
• Hold ⌥ Option / Alt while creating a shape to make it scale relative to its center instead of its top-left corner.
• As you click and drag to create a shape, hold Space to move the shape around the canvas before releasing your mouse click.

Edit vector networks

Vector edit mode lets you can select, adjust, and change properties of individual points, lines, or entire shapes.

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.

To enter vector edit mode:

• Select a path and press Return / Enter
• Or, select a path and click from the top of the right sidebar

To exit vector edit mode, press Return / Enter again, or click Close in the secondary toolbar.

Create curved paths with bézier handles

Bezier handles allow you to create a curve in a path. You can adjust the bezier handle for each point in a vector path when creating or editing a vector network.

1. Select a vector network.
2. Click at the top of the right sidebar or press Return / Enter to enter edit mode.
3. If it is a curve, the handles will already be showing. If it is a corner with no handles, press in the secondary toolbar or hold ⌘ Command / Control and click the point to show the handles and create a mirrored curve.
4. Click and drag the handles to adjust the path's curve.

Round corners of the shapes

You can round any intermediate point on a path using the corner radius property in the right sidebar.

If you select the entire vector network, this will round all corners to the same value. If you are in edit mode, you can select individual points and give them different corner radius values.

If you're working with an open path, you can only round the first and last anchor points using endcaps ↓

Add fills to shapes and regions

You can add fills to any closed regions of a vector network. If there are multiple closed regions within a vector network, you can adjust the fill of each region individually.

You can add or edit the fill of a selected vector network in the Fill properties in the right sidebar. If you want to apply fills to only some regions, or use different fills for different regions, you'll need to enter edit mode.

1. With the layer selected, press Return / Enter to enter edit mode.
2. Click the Paint bucket tool in the secondary toolbar at the bottom, or press B.
3. Hover over the region of the vector network you want to add a fill to. A pattern of diagonal stripes indicates which region is currently selected.
4. The cursor will change to a droplet icon with a:
   • + if you can add a fill to that region
   • – if there is an existing fill that you can remove
5. Click to add or remove a fill to the shape or region.
6. Figma uses a grey fill by default. You can change the fill using the Fill property in the right sidebar. You can apply gradients, images, GIFs, or color styles from a library.
7. To add a different fill to another region, you can hover over that region to select it.
8. Click to add a fill and adjust the Fill property in the right sidebar.
9. Press Enter, Esc, or Close to exit edit mode.

Add caps to endpoints

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.

There are six different types of cap styles you can choose from:

• 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.
• Reversed triangle: A reversed or flipped version of the triangle arrow, with the arrow point facing inward toward the path.
• Circle arrow: A solid circle cap.
• 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.

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