In this guide I’ll show you how to add dotted lines around shapes or to single lines in Figma. It’s very simple and really just a matter of finding the right menu and understanding what the setting do.
How to Create a Dashed Line (Stroke)
A dashed or dotted line is just a normal stroke broken up into smaller lines with spaces in-between. To create a dashed line or stroke around an object just follow these simple steps:
- After selecting your object apply a stroke to it by double clicking on the number next to the three lines in the Stroke section on the right side of the screen.
- Click on the ellipsis( 3 dots ) in the corner of the Stroke section to open up the Advanced stroke tab.
- Select Dash from the stroke style drop down.
These steps are the exact same for single lines, arrows or even custom drawn shapes using the Pen tool. You can really experiment and come up with some cool different designs.
Dashed Stroke Configurations
After selecting Dash for the stroke, more options open up to provide you greater control over the dash settings.
Below each setting is explained:
Dash – This will set the length of each dash. The smaller the number the more dashes the stroke will have.
Gap – This is the spacing between each dash. This will auto fill when enter the dash length but can be changed.
Dash cap – Effects each end of single dash. None, Square, and Round. Square option does make the dash longer when selected.
Join – Changes the outside edge of corners from sharp, squared, to round.
Dashed Line Placement
Just like a normal solid stroke, a dashed line can be placed either inside, outside or center(half in half out) of an object. The difference is very subtle but below I’ll show the slight differences if you are looking for that certain effect.
Stroke outside the object border example
Stroke inside the object border example
Stroke centered in the object border example
Also, you can have the dotted line effect for any number of side if you wish by selecting it the Stroke per side option ( outlined box icon ). It’s always defaulted to all sides.
Conclusion
That’s it! You now know how to add dashed lines to objects or just single lines in Figma. This is a great way to break up solid shapes or just add some variation to your designs. Have fun and experiment with the different settings to see what effects you can create.
If you have any questions or don’t understand something in this guide just leave a comment for me below.
