Multiple independent strokes

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