How can I make this dot-matrix in Figma without doing it dot-by-dot?

Question

Ideally I'd like it to follow a bezier path so I can change the shape and find what I like best.

I am not a Sketch/Figma user, however in other vector software such as Illustrator or Inkscape, you could set a dotted stroke on multiple Bézier curves. I'd be surprised if this isn't also possible in Sketch too. — Billy Kerr, Jun 22 '19 at 2:04
@BillyKerr I was just as surprised to find out that it's not possible in Figma — Luciano, Jun 25 '19 at 11:33
By the way this is not a dot matrix: en.wikipedia.org/wiki/Dot_matrix — Luciano, Jun 25 '19 at 11:44

Wrzlprmft · Accepted Answer · 2019-06-26 06:03:13Z

Yes, I have also faced this problem and come to a solution, which may help you:

Open Figma.
Draw a rectangle
Select a pen tool with P on your keyboard or the help of mouse.
Draw desired shape with your pen tool
Go to the right-hand side toolbar and select stroke, and then follow below steps in stroke field.
Increase the width of the line by dragging with the mouse right or by typing number with your keyboard. In my example, 5 was suitable.
Now click to the menu bar (three dots), and change CAP option from None to Round.
And finally, fill the Daskes field with [dash, gap]. 1,20 was suitable for me.

I created a video on YouTube for more clarification.

Thanks, @wrzlprmft, for improving this answer. – B4BIPIN Feb 12 '20 at 5:17 — B4BIPIN, Feb 12 '20 at 5:17

Luciano · Accepted Answer · 2019-06-25 11:43:47Z

It's (surprisingly) not possible to do in Figma. You can do it in Sketch the same way as Illustrator:

Draw a path with the Vector tool (V) or Pencil tool (P) - preferably the Vector tool, with which you can just add a few points and you have a more precise control of the line
Adjust the Thickness value in the Borders panel - that will be the size of the dot.
click the Cog icon in Borders and select round Ends, round Joints and adjust Dash & Gap values: Dash will be the dot (use 1 to make it a circle) and Gap will be the distance between the dots (it will depend on the length / thickness of your line)
duplicate the line and adjust the shapes / positions
Optional step: Adjust the Opacity of the lines (in your example the further lines to the right have lower opacity value)

Keivan Sina · Accepted Answer · 2019-06-26 09:41:40Z

-1

You can't do it with Figma but it's possible with Sketch:

Install Sketch Install Looper plugin via this link: http://sureskumar.com/looper Create your desired shape Convert it to Figma Enjoy it:)

Install Sketch
Install Looper plugin via this link: http://sureskumar.com/looper
Create your desired shape ( here is some tutorial to do this: https://www.youtube.com/channel/UCzm9iVAvS9rVn5ZyZSbrIVQ/videos)
Convert it to Figma
Enjoy it:)

Figma is a great plugin to make complicated designs and I'm sure it can help you.

answered Jun 21 '19 at 22:41

Keivan Sina

3773 silver badges20 bronze badges

you don't need a plugin to do this, and your answer is really vague (dl plugin / watch one of these tutorial videos - which one?). Check How to Answer to learn what constitutes a good answer. – Luciano Jun 25 '19 at 13:24

Add a comment |

3 Answers 3