Multiple independent strokes

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!