Focus indicator

From power users to travellers using assistive technology, the focus indicator helps many navigate our product with ease.

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.

Focus Indicator Intro

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.

Focus Indicator Global Style

Examples of the focus indicator

The focus indicator takes on the radius of a component by wrapping around the interactive element.

Focus Indicator 02
Focus Indicator 03

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

  1. Insert 🎒 Bpk Focus Indicator into the file.
  2. Place directly on top of the UI in focus.
  3. Match the radius of the component (apply it to both layers of the 🎒 Bpk Focus Indicator component)
  4. The white layer is used as a placeholder for transparency. Leave this white or recolour to match the surface colour.
Focus Indicator Figma