The focus indicator visually identifies which interactive element is in focus by displaying an outline wrapped around it. Only one element on a page can be in focus at once and when the element is in focus, it symbolises that it’s ready to be interacted with.
Which elements can be in focus?
If an element can be interacted with by clicking using a mouse or by tapping using a touchscreen device, it should be possible to interact with it using a keyboard. Elements should be arranged in a logical order and be consistent with the reading order or hierarchy of the page.
Global style
The focus indicator has one global style designed to work with the surround of every element and various backgrounds. It’s worth noting this might not work in every scenario as there are hundreds of colour combinations in use.
Examples of the focus indicator
The focus indicator takes on the radius of a component by wrapping around the interactive element.
Enhanced Skyscanner style
In cases where the default style doesn’t work, consider applying specific styling to the component, background, and focus indicator. Always use the global style as the basis.
In this example:
- The focus is set to ‘inner’
- A second white stroke has been added around the interface
Focus indicator in Figma
Figma doesn’t allow for offsetting using a stroke on components. Instead, the 🎒 Bpk Focus Indicator component can be used to overlay designs. This is handled mostly in code so isn’t required on every design.
How to use the component
- Insert 🎒 Bpk Focus Indicator into the file.
- Place directly on top of the UI in focus.
- Match the radius of the component (apply it to both layers of the 🎒 Bpk Focus Indicator component)
- The white layer is used as a placeholder for transparency. Leave this white or recolour to match the surface colour.
