Support

How can we help you?

Get answers to all your Stark-related questions with
step-by-step guides from our Support center.

Using Focus Order

Establish your product's focus order sequences and focus items

Focus Order lets you annotate the sequences and focus elements in your product or websites, establishing the tabbing journey for individuals who can’t (or choose not to) use a mouse to ‘tab’ through your product. These clear and concise annotations remove guesswork during the designer/developer handoff.

Focus Order ultimately ensures that users won’t get lost while navigating your page, forcing them to leave. Designing an easy-to-navigate experience can help keep your users engaged.

🗣️

We've updated our annotations in Figma! Instead of showing in the sidebar, they'll now use the built-in annotation setup in Figma. If you have existing annotations, simply go to any annotation tool, click the More Options button, and then click Migrate Annotations to switch to the new setup.

Using Focus Order in Figma

Download: Stark for Figma

Stark UI with focus annotations in each button with a cursor pointing at the Sidebar panel in Figma

To use Focus Order in Figma, go to Plugins and choose Stark > Focus Order. The plugin can now be used to annotate your design file.

Adding and Editing New Items

Stark UI showing Focus Order in Figma and cursor adding a New Item

To add a new Focus item, select an interactive element on your artboard and click Add item on the plugin. Interactive elements include buttons, input fields, and links (both text and image links). All of these items need to have a set order to give users a clear journey to follow.

Stark UI shows Focus Order annotations inside its Figma plugin.

Items will be named and numbered as you add them to your design file. An item will take on the name of a selected element by default (e.g., Navigation), but you can change the name of any item you add.

Stark UI shows the ability to Skip an element, mark them as Reading Order, and add a note in the Figma plugin.

When clicking on a Focus Order card, you can choose to Skip an element or add it as Reading order, as well as add a written note to communicate more information on that specific item to your developers.

Stark UI displays Focus Order annotations in the Sidebar Annotation Panel

Using Focus Order in your browser

Download: Stark for Brave, Stark for Chrome, Stark for Edge, Stark for Safari, Stark for Arc, and Stark for Firefox.

TeamSync website displaying Stark Focus Order items and Browser Extension in the UI.

To get started using Focus Order, open Stark from your browser’s extension menu. Stark will automatically scan the live web page and surface the existing tabbing order on your page.

This enables you to scan your page for incorrect, unclear, or missing sequences and focus items so that you can either share these findings with your wider team or make the appropriate changes to your designs.

Have any questions about using Focus Order? Don’t hesitate to reach out to us at support@getstark.co.

Go back to articles