···

    Vector networks

    Before you start

    Who can use this feature

    Supported on any team or plan.

    Anyone with can edit access to a file can create and edit 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.

    Create vector networks

    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:

    • 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, or 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 toolbar

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

    Fills

    Add fills to closed regions of a vector network.

    1. Select a vector network.
    2. Click in the toolbar or press Return / Enter to enter edit mode.
    3. Click in the toolbar or press B to select the paint bucket tool.
    4. Click the area of a closed vector network to add the fill.

    You can add different fills to separate regions of a vector network as long as they are separate closed regions.

    Bézier Curves

    To access a point’s Bézier handles:

    1. Select a vector network.
    2. Click in the toolbar 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 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.

    Rounded Corners

    Any intermediate point on a path can be rounded via the corner radius property in the right sidebar. 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.

    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 →.

    Cap types

    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.
    • 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.

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

    Related Videos