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

DNB Eufemia Design System UI Library

---
version: 11.3.0
generatedAt: 2026-05-19T08:46:53.000Z
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.

<InlineImg
  src={UxHandoverSpacing}
  caption="What spacing is used"
  width="auto"
  className="blank x-10"
/>

## Components

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

<InlineImg
  src={UxHandoverComponent}
  caption="What component is used"
  width="auto"
  className="blank x-10"
/>

## Typography

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

<InlineImg
  src={UxHandoverTypography}
  caption="What typography is used"
  width="auto"
  className="blank x-10"
/>

## 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.

<InlineImg
  src={UxHandoverColor}
  caption="What color is used"
  width="auto"
  className="blank x-10"
/>

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

</Intro>