Skip to main content
Version: EDS 2.0 (beta)

Getting started with design

Getting started with design

Set up Figma, connect to the EDS component libraries, and start designing with shared tokens and components.

Prerequisites: Equinor Figma account

Set up Figma

  1. Get Figma access: apply through AccessIT or contact your team administrator
  2. Join your design team: search for your team in Figma and request access, or ask your team admin to add you
  3. Enable the EDS library: open your file's Assets panel and enable the EDS component library

For detailed permissions guidance and workspace setup, see the Figma guide.

Configure your workspace

Before you start designing, adjust a few Figma settings:

  • Set the colour scheme and density with variable modes on your top-level frame. Colours, spacing and typography in the EDS library are variables, so everything inside the frame follows the modes you set
  • Create frames using standard screen sizes, for example 1440px width for desktop
  • Familiarise yourself with the EDS component naming in the Assets panel

Build your first interface

Start simple and layer in complexity:

  1. Check the components that are available in EDS 2.0 before you build your own
  2. Add content: use the EDS text styles for headings and body text
  3. Add interactive elements: Button, TextField, or Checkbox
  4. Add icons from the EDS icon library where needed

Accessibility checklist​

  • Use the EDS colour tokens in the pairings they are made for. They meet the WCAG 2.1 ratios of 4.5:1 for text and 3:1 for large text and interface components, so check any other combination against the same ratios (see Colour)
  • Set focus states for all interactive elements
  • Check target sizes at the density you ship (see Target size)

Next steps

Connect with other designers in the community channels, or propose a new component if something is missing.

Explore components