Multiple independent strokes

This would be so useful as all the workarounds confuse developers when they’re inspecting the figma design file e.g. “why does it say this button has a drop shadow but I can’t see it”

Big +1

Someone on my team came up with a weird union boolean hack where the union group treats the stoke as a fill and you can add another stroke to it. However, this only works with two strokes on a line and not three or more. 😢

This is a big issue for our team as we work a lot with trails on maps and used to be able to edit a single fully styled stroke in other design tools, now it’s a tedious task with multiple layers.

+1 – This is very much needed

Adding my 5 cents. Multiple strokes are really needed!

I really wish even if this wasn’t supported, at least an offset would be. Frames in frames is a pain especially for components like buttons.

Still waiting for this, nothing to add

Still need this too! would be nice to have a proper solution than using the shadow for the strokes.

+1
Coming from Sketch, I was honestly surprised how limited multiple strokes are in Figma. Hope this will be implemented soon. 🤞

Still waiting for this, Figma!!!

The recent updates to Figma were great, but the software is still missing basic support for styling multiple different borders/strokes one the same element.

Currently, we need to create a bunch of nesting to apply different styles to each side of a border, which makes handoff impossible because developers need to go through layers and layers of nested groups to get each border definition. It’s also unnatural when it comes to how CSS can handle borders. We already offer multiple box-shadow definitions on the same shape under the Effect panel, why can’t we have the same for border?

Here’s a quick mockup:

Thanks for your feedback and the idea, @ThomasJ!

We’ve moved it to a similar topic thread. Our team monitors the forums for topics with the most feedback and votes to prioritize accordingly, so it’s best to keep similar ideas consolidated.

Trying to convert a button to component properties and the focus variant (auto layout with a stroke and the component inside it is giving me troubles, the selecting matching layers won’t select the icons in that variant and i can’t make component properties out of them.

I believe having a feature like this one would be able to easily make this a non issue.

+1 I find myself wishing for this often

Easy,

Either you use multiple inner shadows, which are fake strokes, or you use multiple frames to create real strokes.

1. apply a stroke to a frame, say, 10 px black.
2. frame that frame to create an outer frame. don’t forget to clip content.
3. apply a stroke to that outer frame, say, 8 px red.

You’ll get 8px red stroke and underneath it 10 px black.

add more outer frames to get more strokes.

and add to this gap between strokes

Can’t believe they still don’t add this feature!

Also need this feature, thought might add to this topic since it is still not here…

This is much needed to support focussed states

+1 This would be huge. Sure, you can use inner shadow or a drop shadow. But in making multiple states using Variants, I want to be able to set a second stroke as a Boolean property.

For example, I am making inputs for our design system currently. Instead of making a focus state for default, active, hover, disabled and error, I would LOVE to be able to just set a focus state as a Boolean that you can turn on and off. But alas, effects cannot be set as Boolean properties.

I think they are not going to add this feature 😕

Even Sketch has it years and years ago.
I bet the product team know about it, but made a deliberate decision to not have it in Figma. Although, technicaly and design wise it is not a huge thing to build.

There may be limitations for this feature, based on the capability of svg format. However, in late 2023, I believe we’re entitled to expect every css-based feature as well from Figma…

The ability to add multiple strokes to text, shapes and frames could be game changing for many areas of design. At the moment you can add multiple strokes of different colours but they can’t have their own properties such as weights, orientation etc.

The ability to have, for example, a circle with a white inside stroke at 4px and also a black outer stroke of 6px - making an overall stroke of 10px but two different colours.

I’d greatly appreciate having the ability to set border colors individually for each side.

Also waiting (inpatiently) for this.