Skip to main content

Figma

Figma is the design and prototyping tool we use with EDS. This guide helps you get set up, understand permissions, and work effectively with EDS components.

Getting Access​

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

Join your team by contacting your team admin or owner. You can also search in Figma for your team and request access.

Understanding Permissions​

Viewers can:

  • View and comment on files and projects
  • See all teams in the Equinor Figma organisation
  • Access EDS components, styles, and fonts

Editors can do everything viewers can, plus create and edit files. If you need editor access, ask your team admin to upgrade your permissions.

Creating Teams​

If you need to create a new team, read Figma's team creation guidelines first. Create teams under the Equinor organisation and make sure the team doesn't already exist. We recommend using one team per project and choosing clear, professional names.

Team owner responsibilities:

  • Serve as the main contact for Figma administrators and the EDS core team
  • Follow Figma guidelines from the EDS storefront
  • Manage team member permissions properly
  • Remove inactive members to control costs

Working with EDS Components​

Set up your workspace:

  • Change your nudge amount to 8px for better alignment with EDS grid system
  • Read EDS grid guidelines before working with EDS components
  • Always place content on frames or artboards

Use components properly:

  • Find components in the Assets tab on the left sidebar
  • Search or scroll to locate the component you need
  • Drag components to your frame without changing colours or layouts
  • Review component updates when they become available — you can accept or deny them
  • When you accept updates, all instances update while preserving your custom content like text or overridden colours

File Organisation​

Create cover pages for each file with project information and status badges. Each file must contain a cover page on the first page named "Cover". Place the Default File Cover component and fill in all information so team members know who owns the file and who to contact with questions. Update the status badge and background colour as your work progresses.

Stay organised by using separate pages for different sections of your app, custom components, and sketches. Use Figma's unlimited pages feature to break apart main sections when needed. Lay out frames horizontally with consistent top alignment and equal spacing. Organise page variations vertically under the related main page to help teams switch between files easily.

Design Tips​

Understanding clickbounds — When you start using Figma, you might wonder why some components like buttons have larger bounding boxes than their visual appearance. This happens because of hidden clickbound layers (48px height) that follow WCAG guidelines for touch targets. This ensures your designs meet accessibility standards.

Working with placeholders — Use placeholders when content isn't ready, as they're built into many EDS components. When your content is ready, replace placeholders by dragging new components over them while holding:

  • Mac: Ctrl + Cmd
  • PC: Ctrl + Alt

EDS Designer Sandbox​

The EDS designer sandbox in Figma provides a collaborative space where designers can share projects, explore ideas, and connect with the EDS core team. This community-driven environment helps foster innovation and ensures the design system continues to evolve based on real user needs.

You can visit the sandbox to explore ongoing projects and connect with other designers working with EDS. If you have ideas for new components or improvements to the design system, you can request new features through our support channels.