Bridge the Gap Between Design and Development

Bridge the Gap Between Design and Development

About me Ondřej Konečný Designer and Developer

What is current situation?

What we want?

What we (probably) get?

What if there is a design update?

Dark mode example.

How we can improve it?

Storybook for the win. LIVE VERSION

What is Storybook good for? ✅ UI development ✅ Documentation ✅ Single source of truth ✅ Testing ✅ Live and actual state of the components ✅ Can be used by developers, designers, managers, testers

Recap

Recap

So, what should we do? ➔ Create scalable and maintainable Front-End Architecture ➔ Create a shared component library ➔ Unify frameworks, methodologies, naming conventions etc.

Why?

Because of high CSS specificity

We do not want this.

Because there is ⅔ unnecessary code.

And because we don’t like troubles.

Agan. What is the solution?

Figma inside - Foundations

Figma inside - Components

Figma inside - Tooltip

Fundamentals of the design

Naming of the variables

Component specific definitions

Multi-platform FE system architecture

So what are design tokens?

Global tokens Global tokens are the primitive values in our design language, represented by context-agnostic names. Our color palette, animation, typography, and dimension values are all recorded as global tokens. These can be directly used, and are inherited by all other token types.

Alias tokens Alias tokens relate to a specific context or abstraction. Aliases help communicate the intended purpose of a token, and are effective when a value with a single intent will appear in multiple places.

Component-specific tokens Component-specific tokens are an exhaustive representation of every value associated with a component. They often inherit from alias tokens, but are named in a way that allows engineering teams to be as specific as possible in applying tokens in component development.

Design tokens are just spicy variables.

Design tokens are just spicy variables.

How to convert JSON to CSS or another languages?

What should we do (IMHO) now?

Steps? ➔ ➔ ➔ ➔ Find the way how we construct the Front-End structure ◆ Monorepo? Multi-repo? Monolit? Npm packages? Select good CSS approach Move all components into one place Create Storybook - if you agree that it is useful

Great design and user experience lives in the details.

Thanks! Some topics for next meeting? And why is good consider not using this framework :)