Skip to main content

Outer focus

Abstractic

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

This topic has been closed for replies.

3 replies

Gleb
  • Gleb
  • Power Member
  • 4708 replies
  • May 5, 2023

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.

Abstractic

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.

Ed_Orozco
Neil7
Che_de_Bruin
3 people like this
  • Ed_Orozco
    Ed_Orozco
  • Neil7
    Neil7
  • Che_de_Bruin
    Che_de_Bruin
A
  • Anonymous
  • 0 replies
  • August 3, 2023

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

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings