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