Meet FigJam, our new online whiteboard for teams to explore ideas together. Learn more.

···

    Apply and adjust stroke properties

    Before you start

    Who can use this feature

    Supported on any team or plan.

    Anyone with Can edit access can view and update stroke properties.

    Stroke is a collection of properties you can apply to a vector object. You can think of Stroke as a visual representation of a vector path.

    Apply stroke properties to any vector object to:

    You can then control how the stroke looks with color, weight, distribution, and end point properties.

    Note: When you select an object, we will apply these Stroke properties to the entire object. Use vector edit mode to change the stroke properties for specific vector points.

    Stroke properties

    Access these properties in the Stroke section of the properties panel.

    annotated_image_of_stroke_properties__1_.png

    1. Use the color picker to adjust the paint and set an opacity for the current stroke. Learn how to use the color picker →

      Tip! You can also type a CSS color directly in the field. See the list of CSS colors that are supported by all browsers on the w3 website: https://www.w3schools.com/cssref/css_colors.asp

    2. Click to open the Style picker. From there you can apply a color style or create a new one from the current selection.
    3. Click to add a new stroke to the current selection. You can add multiple strokes.
    4. Click to remove the stroke from the selected layer.
    5. Use the weight field to select a weight of the stroke, in pixels. Enter a value in the field provided, or scroll through values using your mouse/trackpad while the field is in focus.
    6. Click to select individual start and end caps ↓.
    7. Click to define where on the path you want to apply the stroke. Choose from Inside, Outside, and Center.
    8. Click to toggle the visibility of each stroke.
    9. Click to access extra settings in the advanced stroke menu ↓

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

    Advanced stroke menu

    Click to open the Advanced stroke menu to access extra settings like stroke style and miter angles when applicable.

    Caps

    Figma will display the option to edit caps here when:

    • A vector path with more than two end points is selected OR
    • A single vector point is selected in vector edit mode

    Dashes

    Create dashed or dotted lines. Enter the dash length, then the distance between dashes.

    Dash_stroke_settings_in_advanced_stroke_menu.png

    Note: Figma starts and ends every dashed line with a half-length dash. You can use Outline stroke from the right-click menu to convert the stroke to a vector object. This will allow you to remove or extend the half-dash.

    Join

    Define how lines join within a path or vector network. Adjust the joins in an entire path, or enter vector edit mode to select a single anchor point in the path. Choose from:

    • Miter: Create a sharp point, like an arrow, where the two paths meet.
    • Bevel: Cut off the sharp point to create a flat edge.
    • Rounded: Round the point where two paths meet to soften to join.

    Use the Miter Angle setting to control the angle at which two joined lines bevel. For example: for a miter of 90, any angle ≤ 90 degrees will bevel, anything > 90 above will be sharp.

    Image showing how Figma renders each join option

    Export strokes to SVG

    In Figma, you can apply Inside, Center or Outside stroke. SVG as a format only supports Center stroke.

    If you use an Inside or Outside stroke and export to SVG, Figma will simplify the stroke. This converts the Inside or Outside stroke to a Center stroke, this won't affect how the exported object looks.

    Learn more about simplify stroke in our Export settings article.

    Styles and strokes

    At the moment, there isn't a way to save a stroke's non-color properties, like weight and distribution, as a Style. However, you can apply color Styles to any stroke.

    When apply a Style to a stroke, you will still be able to adjust the other properties. This includes the weight and distribution, as well as any advanced stroke properties like caps, join, and dashes.

    Apply a color style to a stroke

    1. Select the stroke you want to apply the Style to.
    2. In the Stroke section of the right-hand panel, click the Style icon
    3. Select the Style using the style picker.
    4. Adjust any of the other properties of the stroke, as desired.

    Image showing a color style applied to a stroke with the rest of the properties as editable

    Scale and resize strokes

    Strokes respond differently based on how you resize them.

    • Resize the object if you want to retain a Stroke's weight, while adjusting the object's dimensions. Hover over the stroke's bounding box until the cursor appears, then drag to resize.
    • Use the Scale tool to scale the Stroke properties along with the object's dimensions. Learn how to use the scale tool →

    Convert strokes to vector objects

    The Outline Stroke feature allows you to convert strokes into vector objects. This will take each path in the object and turn it into a single editable shape.

    This will allow you to:

    • Remove or extend half-dashes
    • Create custom shapes and edit them in vector edit mode
    • Combine multiple paths into a single object
    • Scale vector objects uniformly

    Note: It's not possible to convert a vector object back into a stroke, unless you undo the action. Use the keyboard shortcuts to undo:

    • macOS: Command Z
    • Windows: Ctrl Z

    Outline stroke

    1. Access the Outline Stroke feature in a few ways:
      • Right-click on the layer and select Outline Stroke
      • Go to the ☰ menu and select Vector > Outline Stroke
      • Use the keyboard shortcut:
        • Mac: Shift Command O
        • Window: Shift Ctrl O
    2. Figma will convert the path into a vector object and apply any paints you had as a stroke as a fill.
    3. You can see how that vector object looks in vector edit mode. Press Enter / Return, or click Edit object in the toolbar to edit the vector object.

    Image showing how much more complex a shape is when you use outline stroke

    Tip! If you have a Style applied to the stroke, Figma will also take the color properties of the Style and apply this to the object as a fill.

    Related Videos