Multiple independent strokes

You can currently set multiple stroke colours to an object, but they will share the same properties (thickness, position, etc.).

My idea is that you should be able to set all stroke properties on each stroke:

image

Make sense or am I missing something?

79 Likes

+1, I’d love this!

10 Likes

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.

7 Likes

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

8 Likes

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

5 Likes

Yes, please. Much needed :blush:

4 Likes

Agreed, this definitely needs to be added.

4 Likes

This is a must.

2 Likes

+1 I’d love this

1 Like

Just like Photoshop. You can say it.

+1 Need this please.

1 Like

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…

33 Likes

Yes to this!

1 Like

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.

5 Likes

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.

2 Likes

+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 Like

+1

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

1 Like

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 : )

6 Likes

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 @sgiroux. Love that!

this is a must-have :slight_smile:

1 Like