···

    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.

    Strokes are a collection of properties you can apply to layers in design files. You can think of strokes as the visual representation of a vector path. Use stroke properties to:

    You can control the appearance of a stroke with color, weight, distribution, side, and end point properties.

    Note: When you select an object, Figma applies stroke properties to the entire layer. You can use edit object mode to adjust stroke properties for individual points.

    Stroke properties

    View and adjust stroke properties in the Stroke section of the right sidebar.

    Paints

    Paint is the main property you’ll use to define the stroke. You can apply more than one paint (color) to a stroke. This includes gradient and image paints. Paints must share the same weight, position, and style properties.

    1. Use the color picker to select a paint type, value, and opacity.
    2. Click to add another paint to the current selection.
    3. Select or to toggle the visibility of each paint.
    4. Select to open the Style picker. From there you can apply a color style or create a new one from the current selection.
    5. Select to remove the stroke from the selected layer.

    Position

    Figma lets you define where to apply the stroke on the layer’s path. Choose from Inside, Outside, or Center. The default option for most shape layers is Inside, except lines which are set to center.

    The SVG format only supports center stroke. This is something to consider if you plan on exporting the layer as an SVG.

    When you export a layer with inside or outside stroke to SVG, Figma will “simplify” the stroke. This makes an inside or outside stroke look like a center stroke. This won't affect the appearance of the exported object, but it will impact the complexity of the SVG code.

    Learn more about simplify stroke →

    Tip: Preview stroke positions and styles on the canvas by hovering over each option on the dropdown before selecting it.

    stroke-preview.mov.gif

    Weight

    Use the field to select the weight of the stroke, in pixels. Enter a value, or focus on the field and scroll through values using your mouse or trackpad.

    Note: Figma doesn’t include the stroke weight in the layer’s dimensions. This means you won’t see the stroke included in the layer’s dimensions in the Inspect panel. Strokes in the Inspect panel ↓

    Individual strokes

    By default, Figma applies the stroke properties to all sides of a layer. If your layer is a rectangle, frame, or component/instance, you’ll also have a Stroke per side property.

    Use the Stroke per side property to choose which side or sides to apply the stroke.

    • All (default)
    • Top
    • Bottom
    • Left
    • Right
    • Custom: to choose which sides to apply stroke. Custom also allows you to set a different stroke weight per side.

    Tip! Rectangles include any shapes created using the rectangle tool, frames, and components and instances that use frames.

    Custom strokes per side

    When you select custom, you’ll see four individual fields in the Stroke section. Use the fields to adjust the weight for each side independently. To remove a stroke from a side, set the weight to 0.

    You can use individual strokes to create common design elements and patterns:

    • Apply a single stroke to the top or bottom of a row in a table
    • Show a horizontal line underneath a section header or divider
    • Apply a border to only three sides of an element
    • Add a color block to the left side of a card or task element

    End points

    Add styling to the end points of any open ended paths. The end point property will show up in two different locations, depending on the vector path you have selected.

    Only two end points

    If the layer is an open vector path, you can set the endpoints at the start and end of the vector path in the main Stroke section. For example: line and arrow shapes.

    Use the two fields to set the cap or tip style ↓ for the start (left) and end (right) endpoints.

    More than two endpoints

    If you have a closed vector path or shape—or an open path with more than two end points—you’ll find the end points settings in the Advanced stroke menu instead.

    If you have the entire layer selected, you can use the End points property to set the same tip or cap style for all endpoints.

    To edit them independently, you need to select each end point in vector edit mode:

    1. With the layer selected, press Enter / Return to open vector edit mode →
    2. Select a single end point. You can identify the selected end point by the blue circle with a white stroke.
    3. Select the in the Stroke section of the right sidebar to open the Advanced stroke menu.
    4. Update the End point property.
    5. The Advanced stroke menu will stay open, allowing you to select another end point in the canvas and update the end point again.

    Cap and tip endpoints

    Choose from a selection of caps or tips to add to your end points:

    • None: No cap or tip is added to the end of the path. The end are square, without adding any length to the path.
    • 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.
    • Line arrow: Two 45-degree lines to either side of the end point(s). The line arrow 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 pointing inward towards the path.
    • Diamond arrow: Adds a solid diamond shaped tip to the end point.

    Stroke style

    Use the Stroke style setting to create solid, dashed, or dotted lines.

    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 use edit object mode to remove or extend the half-dash.

    Dashed

    Create a uniform dashed line.

    1. In the Stroke panel, select to open the Advanced stroke menu.
    2. Select the Dashed stroke style
    3. Enter the length you want for the Dash, in pixels.
    4. Enter the length of the Gap between dashes, in pixels.
    5. Choose the type of cap for the dash:
      • None
      • Round
      • Square

    Dotted

    Create a dotted line.

    1. In the Stroke panel, use the dropdown to change the stroke position to Center.
    2. Select to open the Advanced stroke menu.
    3. Select the Dashed stroke style
    4. Enter a Dash length of 1 pixel.
    5. In the Dash cap setting, select Round.
    6. Adjust the Gap between dashes to suit.

    Custom

    Create a dashed or dotted line with a custom pattern.

    1. In the Stroke panel, select to open the Advanced stroke menu.
    2. Set the Stroke style setting to the Custom option.
    3. Use the following syntax in the Dashes setting to define the dash pattern dash, gap, dash, gap...
    4. Select the Dash cap you want to use.

    For example: We want to represent the letter f in morse code ..-. as a custom dash pattern. We’d enter the following in the Dashes setting 10, 20, 10, 20, 80, 20, 10, 100.

    Dash stroke settings in advanced stroke menu

    Join and miter angle

    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° will bevel, anything > 90° will create a sharp point.Image showing how Figma renders each join option

    Some properties are only supported on specific layer types. Use the table below to see if a specific property is supported on the layer type you’re working with.

    Layer type Paints Position Weight Stroke per side Style Endpoint Join
    Rectangle ✓ ✓ ✓ ✓ ✓ ✕ ✓
    Lines ✓ ✓ ✓ ✕ ✓ ✓ ✕
    Arrows ✓ ✓ ✓ ✕ ✓ ✓ ✓
    Ellipse ✓ ✓ ✓ ✕ ✓ ✕ ✓
    Polygon ✓ ✓ ✓ ✕ ✓ ✕ ✓
    Star ✓ ✓ ✓ ✕ ✓ ✕ ✓
    Booleans ✓ ✓ ✓ ✕ ✓ ✕  
    Vector networks ✓ ✓ ✓ ✕ ✓ Open paths only ✓
    Text ✓ ✓ ✓ ✕ ✓ ✕ ✓
    Frames (including components) ✓ ✓ ✓ ✓ ✓ ✕ ✓

    Styles and strokes

    You can only create and apply color styles to strokes. There isn't a way to save a stroke's other properties, like weight and position, as a style.

    When you apply a color style to a stroke, you can still adjust the other properties. This includes the weight and distribution, as well as any advanced stroke properties like caps, join, and dashes.

    Apply color styles to strokes

    1. Select the layer you want to update.

    2. In the Stroke section of the right-hand panel, click the Style icon.

    3. Use the style picker to select the relevant color style.

    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 →

    Strokes in the Inspect panel

    Strokes show up in the Inspect panel as Borders. Some stroke properties are easy to identify by name alone. Paint is represented by border-color and style by border-style.

    When it comes to weight and strokes per side, there are a few different ways we might show those values in CSS.

    • When a layer has the same stroke weights on all sides, or unique values for each side, we’ll use border-width. The exact syntax will depend on the combination of values. View border-weight syntax on MDN →

      For example: a rectangle with 6px stroke on the top side, 2px on the bottom, and 4px on the left and right is represented in CSS as border-weight: 6px 4px 2px;.

      A rectangle with 6px stroke on all sides is represented as border-weight: 6px.

    • When only one side of the layer has a border, we’ll use the CSS property for that specific border. For example: border-top: 1px solid fff

    Note: Figma doesn’t include the stroke weight in a layer’s dimensions. You won’t see the stroke weight included in a layer’s dimensions in the Inspect panel.

    This is something to consider when translating designs to code, especially for layers with center and outside stroke.

    In an auto layout frame, you can choose to include stroke in the layer’s total dimensions. When included, the layer’s dimensions in the Inspect panel will include the weights of any strokes. Learn more about strokes in auto layout →

    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

    See more