eva.ua, since 2019

Design library

Built and connected to the components developers use.

Role
Lead designer
Platform
Web

Minutesfrom a Figma change to production, not days

The button page of EVA Library: five sizes, each in default, hover, focus, press and disabled

The button page

Minutesfrom a Figma change to production, not days

The problem

Before, recolouring a button meant hunting for every button on the site and handing mockups to a developer.

What changed

  1. One library, shared with development

    I built EVA Library WEB and connected it to the library our developers use, so a change in Figma reaches production.

  2. Every component with its states

    Buttons in five sizes and five states (default, hover, focus, pressed, disabled); inputs with focus, error and disabled; alerts in five colours. It also holds templates, desktop and mobile headers with seasonal variants, the footer, modals and the bottom sheet.

  3. Type as roles, not sizes

    Display, title, body, label, overline and caption styles, each tied to a token, with written rules for when to use which.

  4. What is live, and what is not

    Every page in the file carries a status, Prod, Concept or In process, and every component its notes on when to use it and how it behaves.

States

The input page of EVA Library: placeholder, focus, filled, error, helper and disabledInput The controls page of EVA Library: toggles, checkboxes, radio buttons, sliders and progress barsControls The alert page of EVA Library: grey, green, blue, yellow and red alerts in six variantsAlert The modal views page of EVA Library: price, seller and sort sheets and a popupModal views
Four of the library’s pages, each with its states. Open a page to see it in full.

How it was proved

From a Figma change to production
Before, days; now, minutes or seconds.