New component in Figma

First and foremost: speak with a developer about specification, requirements, accessibility, properties and variants. Align on the scope of the component and document this in the component’s GitHub issue.

All styles (colours, spacing, sizes, shadows and so on) must be connected to the correct tokens. If you use the existing styles, these are already connected to tokens. If you need new styles, they must also be created as tokens.

Auto layout: the content must scale as expected when the component changes size. Consider whether the content should wrap if there is not enough horizontal space. Would it be useful to set a minimum or maximum width? Do you need to truncate text with three dots if it becomes too long?

Variants and component properties: use variants for different versions, colours and states. Use component properties to show or hide layers, swap instances (for example switching an icon) and change text. Name properties in the same way as props in Storybook. We use variant, color, state.

Sizes are handled with Modes in Figma. You no longer need to create separate variants for Small, Medium and Large. As long as you connect the component to tokens for typography, spacing and sizes, it will adapt to the correct size based on the chosen mode. This makes the components easier to maintain and easier to use across different sizes.

Is the component interactive? If so, different states must exist as variants of the component, and these must be connected with Change to.

Multibranding. Consider the extent to which the component should support different themes and prepare for this by using brand colours from tokens and the correct modes for colours.

Naming and organisation: ensure that the layers in the component have meaningful names and that there are no unnecessary groups or layers.

Think about how another designer will use the component. Is it intuitive? Is it flexible enough that they will not need to detach it? It may be useful to set it up with slots so that content can be replaced with other components without detaching. You can also use Preferred values to highlight the components that are most relevant as content.

Consider accessibility:

• Check that you have sufficient contrast.
• Think about how keyboard navigation should work if you are creating a new component that is not standard. (Standard HTML elements already have keyboard navigation defined).
• Instructions or information that is essential to the user must not be conveyed only visually. An example could be using an icon or text in addition to a red colour that indicates an error.
• Focus: all elements must have a visible indicator when they receive keyboard focus. The focus indicator must have sufficient contrast with the background. To achieve this we use a black border (2px) and a yellow outline (3px) in addition.