Skip to main content

Getting started with design

You're ready to start designing with EDS. This guide helps you set up Figma access, understand our design workflow, and create your first designs with confidence.

Prerequisites: Equinor Figma account access
Time to get started: 5-10 minutes

Figma Setup​

You'll need Figma access to work with EDS design components and libraries:

Get Figma access — Apply through internal Equinor resources or contact your team administrator for help with account setup.

Join your design team — Contact your team admin to join an existing team, or search for your team in Figma and request access.

For detailed setup instructions, permissions guidance, and workspace organisation, see our complete Figma guide.

Start Designing​

Once you have Figma access, follow these specific steps to create your first EDS design:

1. Configure your Figma workspace

  • Open Figma preferences and change nudge amount to 8px (matches EDS grid system)
  • Enable the EDS component library in your file's Assets panel
  • Create a new frame using standard screen sizes (1440px width for desktop)

2. Build your first interface

  • Start with layout components like TopBar or SideSheet for navigation
  • Add content using Typography components for headings and body text
  • Include interactive elements like Button or TextField components
  • Use Icon components from the EDS icon library for visual elements

3. Apply EDS design principles

  • Use the 8px grid system for consistent spacing between elements
  • Apply colour tokens for backgrounds, text, and interactive states
  • Ensure minimum 3:1 contrast ratio for text (use EDS colour combinations)
  • Set focus states for all interactive elements

4. Test your design

  • Preview your design using Figma's prototype mode
  • Check that all interactive elements have proper spacing (minimum 44px touch targets)
  • Verify colour contrast meets accessibility standards

For detailed component usage, workspace setup, file organisation, and advanced Figma techniques, see our complete Figma guide.

Next Steps​

Ready to advance your EDS skills? Here are specific next steps to help you grow:

  • Explore advanced components — Try data visualisation, navigation, or form components for complex interfaces
  • Join design community channels — Connect with other designers using EDS and share experiences
  • Propose new components — Submit requests for components not currently in the system
  • Create design variations — Learn to customise components whilst maintaining consistency

Need help? Visit our Support page for community channels and office hours.