Web Design » Figma » How Do You Make a Dotted Line in Figma?

How Do You Make a Dotted Line in Figma?

Last updated on December 9, 2022 @ 8:31 am

There are a few different ways that you can make a dotted line in Figma. One way is to use the Pen tool to draw a path with dots along it. Another way is to use the Line tool to draw a dotted line.

To use the Pen tool to create a dotted line:

1. Select the Pen tool from the toolbar.

Click the pen tool in figma

2. Click on the canvas to create a new point.

3. Move the cursor to the next point you want to add and click again. Repeat this until you have created the path you want.

Pen tool path in figma

4. To add dots along the path, select the first point and then press Alt (Windows) or Option (macOS). Click on the next point and repeat until you have added all of the dots you want.

Dotted line using the pen tool

To use the Line tool to create a dotted line:

1. Select the Line tool from the toolbar. Then click and drag it to the canvas to create a line.

Line tool in figma

2. Click the More icon in the Stroke section on the right-side panel. In the Advance Stroke menu, select Custom for the stroke style, add the dash numbers, then select the rounded cap. Adjust the line size, and you should now have a dotted line.

Convert line to dotted dash figma

PRO TIP: If you are not careful, you can easily create a dotted line in Figma that is not perfectly straight. Be sure to use the grid and snap-to guides when creating your dotted line to ensure it is perfectly straight.
Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.