Skip to main content

Hi,


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.


developer.mozilla.org

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.


outer focus


outer focus position

You can set Stroke from Inside to Outside in the dropdown below the color setting:


image


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.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings