2022 - present
Summer.fi design libraries
Why
Improve the efficiency of the design process
Keep design consistent across all products
Prevent similar and repeated components
How to structure the libraries
As same as the common design system structure, we followed Atomic Design principles to create Summer.fi’s design system. It has 6 foundations and 1 component library.
Color and variables
Radius & Borders
Shadows
Typography
Illustrations
Icons
Component library
Icon library
It was composed of three groups of icons:
Standard icons: Those are for the everyday use cases, e.g., wallet, arrows, check, close, etc.
Branding icons: The icons from partners, social media, layer 2 networks, and protocols
Token icons: The popular DeFi tokens supported in Summer.fi
Illustration library
The graphics used in banners, modals, and side panels are collected here.
Component library
There are many components in the design system, such as buttons, dropdowns, banners, navigation, etc., so here I only take a few examples to demonstrate how the design team builds those components.
Those components were created by utilizing variants, variables, and properties in Figma.
Example: Dropdown
It is broken down into 3 parts:
Atoms (Basic Elements)
Molecules (Basic components)
Dropdown components
Variants (Examples)
Basic elements
Basic components
Dropdown components
Dropdown examples & examples
