It would be great if Figma supported outer focus as you have in CSS and HTML, especially on native input fields (see link below), or when a user uses their keyboard to tab between elements on a website.
When working with accessibility it is very common that you highlight elements with the CSS attribute :focus or :focus-visible. However there are zero options in Figma to add an outer border or outline shadow that would simplify this (see accessibility keyboard focus below).
You can make a hack to mimic it with a fixed position element that are x pixels larger than the object itself and then stretch it edge to edge via top to bottom and left to right (see screen capture). Not very scalable though.
Instead of inner and outer shadow, there could be an outer border, which could solve it in an easy way.
You can set Stroke from Inside to Outside in the dropdown below the color setting:
If you need multiple strokes, you still need multiple objects, but at least you don’t need to change the size of an object like you are doing currently.
I am afraid that do not solve what I am trying to explain, as you can only apply one border at the time. Outline in CSS is an additional border on the outside and focus is actually the same but a pseudo-class or state.
Adding a additional layers inside each others could also solve it, but that is not a very smart way to work, especially if you make design as it is represented in HTML.
In HTML you have a DIV or INPUT which is a single element and that element can have a border plus focus state.
We are afterall working with layout that represent code in a front-end framework, so if we can make the design with the same logic we help our fellow engineers.
