···

    Create diagrams and flows with connectors and lines

    Before you start you should know
    • Anyone with can edit permissions can create and edit connectors.
    • This article is about lines in FigJam, Figma's new digital whiteboarding tool. Lines in design files are straight vector paths. Figma also has prototype connections.

    Lines in FigJam let you create paths between shapes and stickies, illustrate order, or annotate something on your board. Every line can be customized with its own color, text, end points, and stroke weight.

    Elbow_connector_and_straight_line_on_the_board.png

    There are two types of line shapes:

    • Elbowed connectors can wrap around objects to create an indirect path to other objects on the board.
    • Straight lines create a direct path to other objects on the board.

    Create a line

    Create_connectors.gif

    Lines snap onto existing shapes and stickies. This way, a shape brings its lines along with it if it's moved around the board.

    1. Click in the toolbar.
    2. Select between an elbow connector or straight line shape. You can also use the keyboard shortcuts X or ⇧ ShiftL to create an elbow connector, and L for a straight line.
    3. Click and drag your cursor between the objects you want to connect.

    The line tool stays active until you select another tool, or press V or Esc.

    Once created, you can click and drag a line's start or end point to another object, or another side of the same object.

    Tip!

    A connector is automatically added when you add a shape to the board using quick create.

    Move lines

    Lines can be moved around the board and connected to other objects. Their paths can be moved to better illustrate a flow or make space for other objects on the board.

    Move start and end points

    When a line's start and end points are snapped to the side of an object, you can move one of the points at a time to another object, or another side of the same object.

    1. Click anywhere on the line's path.
    2. Click and drag the blue dot for the point you want to move.
    3. Snap it to another object's side.

    To place the end point of a line on any part of an object (and avoid the snapping the line to the side of the object), hold down ⌘ Command (Mac) or Ctrl (Windows) while moving the line.

    The cursor selects a connector line between two objects, then moves the endpoint to the middle of the sticky note object.

    You can leave a line's start or end point unattached from objects on the board to complete the connection at a later time, or just let it vibe there.

    Move entire line

    To move an entire line, you'll first need to detach the start and end points from any objects they may be connected to. Once detached:

    1. Select the line from the board.
    2. Drag it to its new location.
    3. Connect the start and end points to objects as needed.

    Customize path

    You can customize an elbow connector's path at any time. This lets you create paths around other objects on the board and have some fun with it. To do so:

    1. Select an elbow connector.
    2. Drag the path handle for the portion you want to move.

    For the start and end portions of a connector, dragging can add an extra portion to the path.

    connectors-1.gif

    Customize lines

    When you first create or open a file, line styles are set to their default properties. For example, they're colored gray, have no text, and are a solid path. Once you add a line to the board, you can use its toolbar to make changes to text, color, line style, and end points.

    FigJam remembers any styles last used for a line during your recent work in a file.

    connectors-2.gif

    Color

    Give your line's path a different color to illustrate separate flows, paths, or workstreams.

    1. Create or select a line.
    2. Click the color picker.
    3. Select a new color.

    Learn more about using colors in FigJam →

    Line style and stroke

    You can pick between solid and dashed styles for your lines. To alternate between them:

    1. Create or select a line.
    2. Click in the line's toolbar.
    3. Select between solid and dashed.

    Stroke

    Lines can be given two different stroke weights: thick and fine. To change a line's stroke weight:

    1. Create or select a line.
    2. Click in the line's toolbar. By default, the weight is set to fine.
    3. Click the weight you want for your line.

    Text

    Lines can have text labels added to their paths.

    To add text to a path:

    1. Create or select a line.
    2. Click in the line's toolbar.
    3. Add text.

    Use Return / Enter to add a new row to the connector's text label.

    Note

    You can only bold or strikethrough text in a line.

    Move text

    Drag the text label anywhere along the line's path to make it easier for your team to see. This is only possible if the line is long enough to move the label.

    Connector_text_being_moved_along_path.gif

    Show text background

    When you add text to a line, you can toggle its background on or off. To do so:

    1. Create or select a line.
    2. Click to add a label, then add your text. By default, the background is toggled off.
    3. Click the color picker in the toolbar.
    4. Click to show the text background.
    Note

    The text background color matches the line's color. There isn't a way to give the line and text background different colors.

    Learn more about text in FigJam →

    Start and end point style

    Lines have five types of point styles to help you define direction in a path.

    • None leaves the point with no styling, just the beginning or end of a line.
    • Solid and Line arrows give the point a solid or lined triangle pointing outwards from the line.
    • Triangle gives the point a solid triangle pointing inward towards the line.
    • Diamond gives the point, well, a diamond.

    When you create a line, the toolbar lets you set a style for the line's start and end points individually.

    1. Create or select a line.
    2. Use the line's toolbar to set styles as needed.

    Select multiple lines using ⇧ Shift Click to edit their start and end points in bulk.

    Connector_points_being_edited_in_bulk.gif

    Related Videos

    See more