@riacarmin
Design Systems
In the wild and at Hopin
Design Systems
UX Engineering
Design thinking and user perspective into code.
Engineering mind into design.
User
Experience
Front-End Engineering
Design Systems
101
🔥🔥🔥
By understanding recurrent design problems in our environment, readers can identify extant patterns in their own design projects and use these patterns to create a language of their own.
“
DESIGN SYSTEM —
is a living collection of patterns, tools, and guidelines to create the unique experience of a product [whatever that is].
fluent / Microsoft
carbon / IBM
lightning / Salesforce
polaris / Shopify
DESIGN SYSTEMS…
give companies a tool for growing their products at speed but also maintaining quality, usability, and brand experience.
shared language across teams to work on products.
#1
guide new members of the team on how to contribute
#2
space that helps you work efficiently​
#3
Architecture
common skeleton
Guiding Principles
Brand Expression
Patterns
Tooling
Special sauce…
symbols
blocks
globals
components
Symbols —
brand primitives.
// Layout
export const MOBILE_MAX = '560px';
export const TABLET_MIN = '561px';
export const TABLET_MAX = '1024px';
export const DESKTOP_MIN = '1025px';
// Colors
export const UTILITY: ColorUtility = {
WARN: ORANGE.DEFAULT,
ACTION: THEME.PRIMARY,
ERROR: RED.DEFAULT,
SUCCESS: GREEN.DEFAULT,
};
// Line
export const RADIUS = {
SMALL: RADIUS_SM,
DEFAULT: RADIUS_MD,
MEDIUM: RADIUS_MD,
LARGE: RADIUS_LG,
XLARGE: RADIUS_XL,
ROUND: RADIUS_ROUND,
};symbols
Blocks —
language of the interface.
// isClickable
import { css } from 'styled-components';
export const isClickable = css`
${area}
&:hover {
background-color: ${({ theme }) =>
getFromTheme('COLOR.GREY["200"]', theme)};
}
`;
blocks
Globals —
the canvas
import { createGlobalStyle } from 'styled-components';
const { body } = TYPOGRAPHY;
const { link } = INTERACTIVE;
const { field, hasErrors } = FORM;
export const GlobalStyles = createGlobalStyle<{ theme: Symbols }>`
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
padding: 0;
${body}
color: ${({ theme }) => getFromTheme('COLOR.GREY.DARK', theme)};
}
`blocks
Components —
collection of UI patterns
USAGE
PURPOSE
Ubiquitous
Unique
Broad
Narrow
Form
THEMATICALLY
Content
Attention
Layout
Navigation
…
flat
inheritance
The end.
Design Systems: In the wild and at Hopin
By Ria Carmin
Design Systems: In the wild and at Hopin
Introduction to Design Systems
