Skip to content
search icon
clear
Component Status

Designers

Figma setup

  • Make sure to download the stand-alone app, it will help you to work more efficiently.
  • In Figma, under Preferences, make sure that Snap to geometry/object/grid are all on.
  • In Figma, under Preferences, set the Nudge amount to 8px.

Building components

  • Always start to make every component in a frame/artboard.
  • Component grids use a custom colour of #000FF at 25% for lines, and 10% for columns/rows. This allows the users of the EDS to see the default red grids apart from component girds.
  • Use the Spacing components within each new component. Name them Spacing right, Spacing left, Spacing top, Spacing bottom, Spacing center, Spacing middle, or when needed something more custom like Spacing right icon.
  • Always use color tokens for all colors.
  • Always use typography tokens for all typography.
  • Always use elevation tokens for all elevations.
  • Always use Clickbounds for any pressable/clickable areas.
  • Always use spacing tokens when needed. Remember, it is really useful to have all the shapes linked to a master shape.
  • Always make all the states of interactive components that are applicable:
    • Enabled, Disabled, Focus, Hover, Pressed, Loading, Active/Selected, Read only, Resting, Filled, Error, Warning and Success.
  • Always think how a component will be used across the many different applications in Equinor. Consider how the component will be stressed and potentially incorrectly used. Try to build ways that will block this into the component.
  • Always set constraints in the component. Test an instance of the component at its minimum and maximum width.
  • Always have someone else QA your component before it is published.

Displaying components

  • Each component grouping always has its own page. Check how everything has been set up previously to better understand.
  • When making a new component, use the .Token Header and .Token Row. Place each variation of the component on a .Token Row. Make each .Token Row tall enough to fit the component in between the guide. If the component is light, toggle on the dark background layer.
  • The name in the link/table row should be the page name + frame name + component name.
  • The component name is always without the page or frame name.
  • Make sure the section is grouped together on a frame, and that all the components are the top layers. Extend the frame height when adding new components.
  • Make sure to test an instance of the component you have made or changed. Test its responsiveness, and test it with new content.
  • Always remember to PUBLISH your changes, and add commit notes.
Edit this page on GitHub