Resources · Libraries

Design

The design side of ECO: variables and UI components for Figma.

Figma library

Designers: start your prototypes and designs from the components in the ECO Figma library. They match the components in code.

Design with FigmaFigma variables and UI components.

What you find there

  • Variables for color, spacing, typography and other foundations. They are the same tokens as in code.
  • UI components with their variants, sizes and states.

Working with the library

Follow these habits so a design can be built exactly as drawn.

Do

  • Use a library component whenever one exists.
  • Apply variables for color, spacing and type.
  • Check the component’s guidelines in Components before you adapt it.
  • Ask in Slack when a component or a pattern is missing.

Don’t

  • Detach a component to change it.
  • Type in a color, size or spacing value by hand.
  • Draw a new version of a component that already exists.
  • Copy a pattern from another website’s style.

Do you have a question, comment or idea?

Let us know in the design system Slack channel.

ECO Design SystemVisit the ECO Slack channel.