Contribute with design

Suggest new design or improvements

We appreciate your help in improving components and design in Figma. The best solutions come through collaboration.

New component

If you want to suggest a new component, we appreciate if it is registered in Github.

When a new component is proposed, we need to assess whether it is valuable enough to be part of Designsystemet. We don't want to end up with hundreds of components with small differences, as we risk unwanted complexity, maintenance, as well as design and technology debt.

For new components that are included, we must:

• Identify and explore similar needs in other product teams and public organizations. How many products/agencies will use it?
• Evaluate the problem the component should solve and the value this provides.
• Consider if it can be made flexible and reusable enough.
• Consider if it aligns with the design principles and if it fits into the whole

Report errors or deficiencies in a component in Figma

If you've found a weakness with any of the existing components in Figma, we appreciate if you either leave a comment in Figma along with the component in question, or create a bug report in Github explaining the error, or a feature request explaining the desired additional functionality.

Create a component in Figma

Components under development are in separate work files. When the design is finished, the component is moved to Designsystemet - Core UI Kit. This file is shared in Figma Community.

There are a few things to consider when creating components in Figma:

• Talk to a developer about specifications, requirements, accessibility, properties, and variants. Agree on the scope for the component and document this in the component's Github issue.

• All styles (colors, spacing, sizes, shadows, etc.) should be linked to the correct tokens. If you use the existing styles, these are already automatically linked to tokens. If you need new styles, these must also be created as tokens.

• Autolayout: The content should scale as expected when resizing. Consider whether the content should wrap under each other if there is not enough width. Can it be useful with a min or max width? And perhaps truncate (...) on the text if it gets too long?

• Variants and "component properties": Use variants for different variants, colors, states. Use Component properties to show/hide layers, instance-swap (e.g., switch an icon) and change text. Properties are named the same way as props in Storybook. We use variant, color, state.

• Sizes are managed using Modes in Figma. You no longer need to create separate variants for Small, Medium, and Large. As long as your component is connected to tokens for typography, spacing and sizing, it will automatically adapt to the selected mode. This makes 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 are connected with "Change to".

• Multi-branding. Consider to what extent the component should support different theming and facilitate this by using brand colors from tokens.

• Naming and organizing: Make sure the layers in the component have sensible names and that there are no unnecessary groupings or layers.

• Think about how another designer will use the component. Is it intuitive to use? Is it flexible enough so they don't need to detach it? Maybe it should be set up with slots so that it's possible to replace the content in it and add other components without having to detach. Also feel free to use "Preferred values" to highlight the components we think will be most used as content.

  • Check that you have good enough contrasts
  • That you have considered 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 for the user should not be marked only visually. Examples can be using an icon or text in addition to red color that indicates something is failing.
  • Focus: All elements should have a visual marker that becomes visible when the element receives keyboard focus. The focus marker should have good enough contrast to the background; to achieve this we use a black border (2px) and a yellow outline (3px) in addition.

• When the component is ready, it is marked as "Ready for review". It is tested by others and after any adjustments, it is marked as "Ready for development". When it is developed as a React component, we link to the component page in Storybook.

Update tokens

To change or create new tokens, you need to create a new branch in the Tokens Studio for Figma plugin. You need the Pro version of the plugin to do this.

See how to connect the plugin to our design tokens.