---
title: Set up Eufemia Web in Figma
description: Eufemia for designers - design guidelines and resources.
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.930Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Set up Eufemia Web in Figma

Use the official Eufemia Web library in Figma so your designs share the components, typography and spacing used by developers.

## Getting started

1. Open Figma.
2. Make sure you are a member of the DNB UX team. If you need access, [contact the Eufemia team](/about/contact/).
3. Open the team selector.
4. Choose **DNB Bank ASA**.

<Img
  src={FigmaTeam}
  caption="Choose the DNB team in Figma"
  alt="DNB Bank ASA in Figma's team selector"
  bottom="large"
/>

<ol start={5}>
  <li>Create a new file.</li>
  <li>Open the library dialog using the library icon.</li>
</ol>

<Img
  src={FigmaLibrary}
  caption="Open the library dialog"
  alt="Figma's library icon"
  bottom="large"
/>

<ol start={7}>
  <li>Enable the Eufemia Web library for your file.</li>
</ol>

<Img
  src={FigmaLibraries}
  caption="Enable the Eufemia library"
  alt="Eufemia in the Figma team libraries dialog"
  bottom="large"
/>

<ol start={8}>
  <li>Set your nudge amount to 8px in preferences.</li>
  <li>Add a layout grid and set its size to 8px.</li>
</ol>

<Img
  src={FigmaLayoutGrid}
  caption="Use an 8px layout grid"
  alt="An 8px layout grid in Figma"
  bottom="large"
/>

## Brand guidelines

Read the [DNB brand guidelines](/design-foundations/brand-guidelines/) before starting a design. Use the Eufemia Web library for the interface components and tokens that apply to Web applications.

## Design tools

DNB's interface design templates and guides are maintained in [Figma](https://www.figma.com). Working in the shared tool makes designs easier to review, maintain and hand over.

## Why not Sketch?

The shared Eufemia libraries are maintained in Figma to provide one source for interface design. Teams can choose other tools when their work requires them, but should keep design files and exports accessible to collaborators.

## UI resources

Use the official libraries so your work stays aligned with maintained design resources.

## Figma files

You may need to request view access to these resources:

- [Eufemia Web](https://www.figma.com/file/cdtwQD8IJ7pTeE45U148r1/Eufemia-Web?node-id=530%3A49)
- [Icons](https://www.figma.com/file/2aNwT4Lbyt9hFmDv8k34yN/Eufemia-Icons?node-id=1%3A9)
- [Flags](https://www.figma.com/file/Uc4ydRIqv0Ab4YiR6mSOZH/Eufemia-Flags?node-id=1%3A3246)
- [Payment cards](https://www.figma.com/file/461cAN5Qc3Nks4ztZ9pjtM)

## Related design guidance

- [Design principles](/design-foundations/design-principles/) and [Motion principles](/design-foundations/motion-principles/).
- [Accessibility for Web designers](/web/accessibility/design-guidance/).
- [Web typography](/web/layout-and-typography/typography/design-guidance/) and [Color tokens](/web/styling-and-themes/design-tokens/colors/).
- [Logos](/collections/logos/) and [Number formatting reference](/design-foundations/number-formatting/).
- [Web layout principles](/web/layout-and-typography/layout-principles/) and [Spacing](/web/layout-and-typography/spacing/).
- [Design and code vocabulary](/web/contribute/guidelines/design-and-code-vocabulary/).
- [Motion examples and implementation for Web](/web/development-guidelines/motion/).