Currently, dashed strokes have ‘trimmed caps’. Is there a way to have all dashes with the same length? Example:
10 Likes
Figma starts and ends every dashed line with a half-length dash. You can use Outline Stroke to convert the stroke to a vector object. This will allow you to remove or extend the half-dash.
https://help.figma.com/hc/en-us/articles/360049283914-Apply-and-adjust-stroke-properties#Dashes
hi Yury, thanks for the reply. How can I make this a feature request, then?
Other people may already vote for your proposal. However, you can add explanations to the original post, for example, how this function will be useful to other users.
I also really want this. I can’t understand a scenario where trimmed caps are preferable.
4 Likes
Hi, it’s not even doing a half length currently. It’s doing some weird math I can’t figure out; it changes radically based on whether you have the dash cap set to none, square, or round; or if you have a cap on the stroke itself. It’s not working very well at all for me.
3 Likes
If you are creating a line with square dashes, you can use square end caps in the “start/end point” dropdown.
For longer dashes, although not ideal, you can clip the end caps by putting the dashed line into a frame and setting the constrains to “left and right” to get the desired result.
The whole thing is kinda kludgy—ideally Figma would fix this. I think I agree that same length should be the default behavior. I imagine it’s difficult to get right since the vector endpoints are on the vertices of the pixel grid.
1 Like
This is a bit inconvenient, for sure. Most workarounds are a bit annoying to work with when creating a component that needs to be resized. I’d like to see this fixed also, but here’s another workaround you could maybe try:
- Create a frame with a horizontal auto-layout and add the number of required dashes inside.
- Select each ‘dash’ and set horizontal resizing to ‘Fill’. Vertical resizing is up to you.
- Use the auto-layout ‘spacing between items’ to determine the dash gap.
The drawback here is that the length of the dashes will vary based on the horizontal length of the frame. If you want to keep all dashes the same length and have the gap vary, set the spacing mode to ‘Space between’ so that all items are fixed horizontally.
You could take this a step further and turn this into a component with the largest possible width. Then, as you use it, resize it and hide the dashes as you feel necessary.
Hope this helps anyone out there!
+1 to this request! I’m working with dashed lines often and would always prefer that every dash is equal in length. Unfortunately The current behavior does not make the dashed line feature useful.
2 Likes
+1 feature request!
2 Likes