CSS Outline and Outline Offset

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 😁

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.

Seconding this. Right now you need to add an additional frame, but that can cause things to be wonky because an outer frame influences the component’s size and position. In CSS an outline gets painted on top of things rather than influencing the position of any element.

Nah, mate, autolayout and absolute positioning to the rescue. You get exactly what you describe. Outline won’t affect element size and position as you paint it on top of everything else.

My biggest issue were radii and design tokens. There is a simple math but it is still there. Anyway, I ended up with simple Boolean exclusion and it works fairly well!

Community template guys → https://www.figma.com/community/file/1436507581887903562/outline-decorator

Designer may use inner box shadow to create a focus state for text field. Outline property cannot achieve the same effect.

On one hand, I agree that using absolutely positioned frame for focus style is a chore.

On the other hand, I think outline property need to evolve itself. What designers and developers need is a ‘focus state’ / ‘focus ring’ property. Outline property is not adequate.

Inner shadow? Mind elaborating? 😉

Box shadow does not let you have an offset, just a steady outer ring.

What designers and developers need is a ‘focus state’ / ‘focus ring’ property. Outline property is not adequate.

And what is “focus ring” in real world though?

https://main--641de2ace0e1566a6a450fad.chromatic.com/?path=/story/visual-tests-layouts--form

In Figma, designers may use inside stroke to create this effect. But developers usually use box-shadow to avoid layout change. (If box-sizing = border-box, increasing border width will affect layout.)

I borrow the term ‘focus ring’ from Wise. It means a line around the focused item to indicate which item has keyboard focus.

In the web, a focus ring is either a box shadow or an outline or another element, positioned in a certain way. These are all of the options.

A real CSS outline can have a negative offset and it will appear inside the element.

With a few layers, you can make something that is like a real CSS outline

And I use only one radii value, which is important, especially if you on the system and use tokens for that.

My personal preference is to make the focus ring outside of an element. It makes it much easier to spot since the element gets visually bigger. I prefer external component since I can apply whatever colour I want without creating unnecessary box shadow effects for each combination I want.