@dnb/eufemia/docs/uilib/intro/04-ux-handover.md

DNB Eufemia Design System UI Library

---
version: 11.0.0
generatedAt: 2026-04-21T13:57:53.912Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

<Intro>

# UX handover

UX Designers at DNB are using Figma. Figma files can be shared and viewed online.

To get the details and properties about the layout, styles and the used components, you can inspect the file both for colors, typography, spacing and component usage.

## Spacing

Remember, everything should be in the **8px grid** (0.5rem) spacing - even it the designer sometimes are one or two pixels of, you now know what it should be.

1. Select an area by a single _click_.
2. _Hover_ on the next areas to see the spacing between them.

![What spacing is used](./assets/ux-handover-spacing.png)

## Components

1. Select a component by a single _click_.
2. Have a look at the _Pages_ pane on the left side.

![What component is used](./assets/ux-handover-component.png)

## Typography

1. Select a text by a single _click_.
2. Have a look at the _Properties_ pane on the right side.

![What typography is used](./assets/ux-handover-typography.png)

## Color

1. Select an area by a single _click_.
2. Have a look at the _Properties_ pane on the right side. Only use the color name as the reference. Do not copy HEX codes.

![What color is used](./assets/ux-handover-color.png)

<IntroFooter
  href="/uilib/intro/05-eufemia-for-developers"
  text="Next - Eufemia for Developers"
/>

</Intro>