A presentation at CloudTalk - Front-End Talks in in Prague, Czechia by Ondřej Konečný
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 :)
for free. You
can too.