QuickStart - Designers


  1. Design tools - recommended applications
  2. Fonts - downloads and links to other resources
  3. Logos - downloads
  4. Colors - color libraries downloads, recommendations
  5. UI guides - startup templates with grid, fonts, colors, symbols etc...
  6. Naming conventions - overview of we name things across code and design
  7. Brand guidelines - in relation to designing digital UI's
  8. Inspiration - examples of good application of Eufemia in products

Brand guidelines

What you should read from brand guidelines before starting to design for DNB

Getting started

  1. Open Figma
  2. Make sure you are a member of the DNB UX team. If not, then contact a lead designer (https://eufemia.dnb.no/design-system/contact)
  3. When you click on the 'You' dropdown, you should see DNB Bank ASA as a team to choose from.
  4. Choose DNB Bank ASA
    Join the DNB UX team
    Join the DNB UX team
  5. Create a new file
  6. Add Eufemia library to your file by selecting the 'open book' icon on the top right of the Figma interface.
    Library icon
    Figma's library icon
  7. This opens a new dialogue window. Choose Eufemia by toggling the switch:
    Add Eufemia team
    Add the Eufemia library
  8. In preferences set your nudge amount to 8px - this will snap items to the 8px grid
  9. Add a layout grid and set it to 8px:
    Add 8px layout grid
    Add an 8px layout grid