CSS Outline and Outline Offset

Figma should add an outline and outline offset property similar to the properties in CSS. This is useful for focus styles among other things.

Currently, there are a number of approaches that you can take to achieve a similar effect, but neither is ideal:

  1. Drop shadow: one problem with using drop shadows to create a focus outline is that you have to have a fill.
  2. Absolutely positioned frame: you can add an extra frame within an element that’s absolutely positioned and apply a stroke. This isn’t ideal because you’re required to add an extra, unnecessary frame to every element that you want to add an outline to.

Thanks for the feedback @Ryan_Leichty – I’m adding some additional tags to your suggestion to surface it a bit better for others who are looking for something similar :grin:

1 Like

This has been an issue for a while and I’m now running into an issue with my previous workaround which was option 2 above.

The biggest thing that Figma needs to understand is your customers are designing UI and a lot of that UI is going to use web tech. The abstraction to make it more of a “drawing” program causes issues all over the place like this, or for another example with different colors on each border side. Please at least allow us to do common things we can do in css.

1 Like