Multiple independent strokes

+1, I’d love this!

This 1000%.
It’s not uncommon for UI elements with multiple states to have multiple strokes. You can often use dropshadow effects with Spread to mimic this, but this doesn’t work on vectors. This is also a very common thing that is easily done using CSS. Bringing Figma closer to parity with what CSS can do will only benefit designers.

please add double stroke to object. now i can add different colours, but size change stroke to all colours. i can’t create stroke to object with free space between line and object. and can’t create two stroke lines with different colours

+1 please. The separation in colour makes independent stroke width needed.
Keep it up crew, appreciate all the hard work!

Yes, please. Much needed 😊

Agreed, this definitely needs to be added.

This is a must.

+1 I’d love this

Just like Photoshop. You can say it.

+1 Need this please.

I’d love this, and would also like to see the ability to have each use library styles. So, like both of the examples below…

Yes to this!

Hi all,

Hope this helps keep things consistent with what can be done in CSS and FiGMA.
I ran into the same problem and because over the years I’ve migrated from Adobe to Sketch and in the past 2 years FiGMA I was looking for the same multiple strokes option.

The best way I found to solve it was to substitute the extra strokes with effects that have everything set to 0 except for the spread:

The way to simulate this would be:

• inside stroke: inner shadow
• centred stroke: 1/2 inner shadow + 1/2 drop shadow
• outside stroke: drop shadow

Please see the below screenshot for the inside stroke case.

Hope this help, for now at least.

Nifty trick, but does not work with no fill shapes. My use case is a simple ghost (outline border - no fill/transparent) button in a focus state.

This simple (and most common requirement when button UI is in question), require 2 additional elements to be layered inside of a frame to achieve a remotely reusable component, and it’s still not reusable in 100% auto-layout way) because it requires manual resizing of a nested element.

If anyone has a more elegant solution for this use case, I am open to suggestions.

+1

We really need this. We have a focus state for most of our components that is an outside stroke. We ended up creating frame in frame in frame… to be able to do it. It’s a bit tricky to work with in terms of resizing constraints and all.

+1

Need this. It is pretty normal to have variants of components with multiple strokes.

Hi. My solution for this is just add stroke and four shadows with: x:1, x:-1, y:1, y:-1. 0 Blur.

Hope this will help : )

What I like the most is the ability to set up a style for both strokes at once which is the case in your proposal @sebastien.giroux. Love that!

this is a must-have 🙂

Coming from Sketch, this is a must-have!

You can not add an additional thickness to the line if it is not snakes, this option can only be with an additional layer.

Thank you! Great solution!

100% - this feels like a quick win with a big impact 🚀🚀🚀🚀

10000 % yes. Working on designs for a huge client (Mcdonalds) and need to style icons and shapes with multiple independent strokes but cant.

+1 Yes, please!! Keep checking an update on this, one of the most frequent blockers for me