A presentation at An Event Apart Boston in in Boston, MA, USA by Brad Frost
THE TECHNICAL SIDE OF DESIGN SYSTEMS BRAD FROST
“DESIGN SYSTEM” IS AN UNFORTUNATE NAME
A DESIGN SYSTEM IS THE STORY OF HOW YOUR ORGANIZATION DESIGNS AND BUILDS DIGITAL PRODUCTS
https://varya.me/blog/design-systems-review/
https://www.sketchapp.com/learn/documentation/07-symbols/4-nested-symbols.html
http://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system/
comp production
THE HEART AND SOUL OF A DESIGN SYSTEM IS A CODE LIBRARY OF REUSABLE UI COMPONENTS THAT POWER REAL SOFTWARE APPLICATIONS
https://18f.gsa.gov/2017/10/03/building-a-large-scale-design-system/
JUST SOME OF THE INFINITE FLAVORS OF BUTTON MARKUP <button> <button class=”btn”> <button class=”button”> <button class=”slds-button”> <button class=”button-green”> <button class=”green-button”> <button data-style=”btn-green”> <button class=”btn btn—green”> <button class=”c-button c-button—primary”> <button class=”f6 link dim ph3 pv2 mb2 dib”> <button class=”bg-green hover:bg-green-dark”> <button style=”background: green; color: white;”>
TECH BENEFITS OF DESIGN SYSTEMS ๏ Reduce technical debt - less frontend spaghetti code ๏ Faster production - less time coding common UI components and more time building real features and products ๏ Higher-quality production - bake in and enforce frontend best practices; teams can focus on iterating and improving rather than reinvention ๏ Reduce QA efforts - centralize certain QA tasks ๏ Potentially adopt new technologies faster - a design system can help make adding additional frameworks/technology more manageable ๏ Useful reference - an essential resource and hub for development best practices ๏ Future-friendly foundation - modify, extend, & improve upon over time
WHAT’S YER TECH STACK?
drupal
wordpress angular django react ruby vue
wordpress react
react wordpress
react vue wordpress drupal
vue drupal react wordpress
angular vue 1.x drupal drupal7 third-party react react15.x aem wordpress asp.net
aem wordpress drupal third-party react drupal 7 asp.net react vue drupal wordpress angular 1.x react 15.x third-party wordpress third-party
ONE BRAND
aem wordpress drupal third-party react drupal 7 asp.net react vue drupal wordpress angular 1.x react 15.x third-party wordpress third-party
HOW THE HELL ARE WE GOING TO DO ALL THAT?!
WE’RE NOT.
AT LEAST NOT YET.
aem wordpress drupal third-party react drupal 7 asp.net react vue drupal wordpress angular 1.x react 15.x third-party wordpress third-party
vendor info fashion merchandising media center e-commerce video editor hr app homepage store lookup point of sale partnership microsite look book inventory manager fashion design chat company blog careers
media center video editor store lookup inventory manager look book point of sale hr app company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products
media center video editor store lookup inventory manager look book point of sale hr app company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products
hr app inventory manager video editor store lookup look book point of sale company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products
store lookup inventory manager company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat video editor look book point of sale products
inventory manager video editor store lookup look book point of sale company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products
inventory manager video editor store lookup look book point of sale company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products
video editor store lookup inventory manager point of sale look book company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products
video editor store lookup inventory manager point of sale look book company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products
video editor store lookup inventory manager point of sale look book design system company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products
video editor store lookup inventory manager point of sale look book pilot project dev design system design system company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products
http://danmall.me/articles/design-systems-pilots-scorecards/
Like television pilots help test audience reactions to a series concept without investing significant resources to create the whole thing, application pilots are a good foundation for ensuring your design system’s design and code are battle-tested. –Dan Mall
CRITERIA FOR CHOOSING PILOT PROJECTS ๏ Potential for common components & patterns - Does this pilot have many components and patterns that can be reused elsewhere? ๏ Scope - Is this work accomplishable in our pilot timeframe of [3–X weeks]? ๏ Technical feasibility & independence - How simple is the technical implementation? Is a large refactor or migration required? ๏ Available champion - Will someone working on this product be a good guinea pig, see it through, and then celebrate/evangelize (and even contribute back to) the design system? ๏ Marketing potential - Will this work excite others to use the design system?
WHERE TO BUILD THE DESIGN SYSTEM?
tech stack
ui code tech stack
ui code
http://bradfrost.com/blog/post/a-frontend-workshop-environment/
http:// http://patternlab.io
https://storybook.js.org/
fractal.build
https://vueds.com/
http://patternlab.io/
video editor store lookup inventory manager point of sale look book pilot project dev design system design system company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products
frontend workshop pilot project & component dev design system design system inventory manager video editor store lookup look book look book ui point of sale company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products
HOW ARE WE GOING TO CODE THIS?
JUST SOME OF THE INFINITE FLAVORS OF BUTTON MARKUP <button> <button class=”btn”> <button class=”button”> <button class=”slds-button”> <button class=”button-green”> <button class=”green-button”> <button data-style=”btn-green”> <button class=”btn btn—green”> <button class=”c-button c-button—primary”> <button class=”f6 link dim ph3 pv2 mb2 dib”> <button class=”bg-green hover:bg-green-dark”> <button style=”background: green; color: white;”>
A DESIGN SYSTEM’S CODEBASE NEEDS TO BE CONSISTENT AND COHESIVE
https://github.com/bradfrost/frontend-guidelines-questionnaire/
WHAT ARE SOME PRINCIPLES YOUR TEAM SHOULD FOLLOW WHEN WRITING HTML? CSS? JAVASCRIPT?
SMACSS, BEM OR OTHER METHODOLOGY?
WHAT CSS TOOLS (SASS, NORMALIZE, AUTOPREFIXER, ETC) WILL THE DESIGN SYSTEM USE?
WHAT JS TOOLS (FRAMEWORKS, LIBRARIES, TOOLING) WILL THE DESIGN SYSTEM USE?
SPACES OR TABS?
GUIDELINES ARE GREAT AND ALL, BUT LET’S ENFORCE THEM!
https://eslint.org/
https://stylelint.io/
http://csslint.net/
https://prettier.io/
https://css-tricks.com/make-it-hard-to-screw-up-driven-development/
CSS ARCHITECTURE
OL’ TRUSTY, STURDY, PORTABLE, RELIABLE CSS
<link rel=”stylesheet” href=”cdn.com/design-system.1.0.css” />vendor info fashion merchandising media center e-commerce video editor hr app homepage store lookup point of sale partnership microsite look book inventory manager fashion design chat company blog careers
ONE TYPE OF CSS NAMING (THAT HAS WORKED PRETTY DANG WELL FOR ME OVER THE YEARS) .cn-c-btn—secondary { }
GLOBAL NAMESPACE .cn-
CLASS PREFIXES .c- for UI components .l- for layout-related styles .u- for utility classes .is- and .has- for state-based classes .js- for JavaScript-specific classes
BEM-STYLE SYNTAX .cn-c-btn {} /* btn is Block / .cn-c-btn__icon {} / __icon is Element / .cn-c-btn—secondary {} / —secondary is Modifier */
http://bradfrost.com/blog/post/css-architecture-for-design-systems/
http://cssguidelin.es/
system product
The Design System informs our Product Design. Our Product Design informs the Design System. -Jina Anne https://medium.com/salesforce-ux/the-salesforce-team-model-for-scaling-a-design-system-d89c2a2d404b
HERE’S THE PART WHERE I PEE MY PANTS LIVE CODE
https://danmall.me/articles/designer-developer-workflow/
LATHER. RINSE. REPEAT.
frontend workshop pilot project & component dev design system design system video editor video editor ui store store lookup lookup ui look book point of sale company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products inventory inventory manager manager ui
THE DESIGN SYSTEM CODE MUST BE INTUITIVE FOR DEVELOPERS USING IT
API DESIGN
variant=”primary” size=”large” variant=”secondary” variant=”link” size=”small” fullWidth={true}
OPEN VS LOCKED DOWN?
HERO COMPONENT <Hero imgSrc=”https://placeholder.com/1200x650” imgAlt=”Hero Alt Txt” title=”Hero Title” description=”This is the hero description” />
ADD CALL TO ACTION TO HERO COMPONENT <Hero imgSrc=”https://placeholder.com/1200x650” imgAlt=”Hero Alt Txt” title=”Hero Title” description=”This is the hero description” cta=”Call to action” />
ADD ANOTHER CALL TO ACTION TO HERO COMPONENT <Hero imgSrc=”https://placeholder.com/1200x650” imgAlt=”Hero Alt Txt” title=”Hero Title” description=”This is the hero description” cta=”Primary call to action” secondaryCta=”Secondary call to action” />
MAKING THE HERO MORE COMPOSABLE return ( <div className=”c-hero”> <img className=”c-hero__img” src={imgSrc} alt={imgAlt} /> <div className=”c-hero__body”> <h2 className=”c-hero__title”>{title}</h2> <p className=”c-hero__description”>{description}</p> <div className=”c-hero__children”> {children} </div> </div> </div> );
MAKE THE HERO MORE COMPOSABLE return ( <div className=”c-hero”> <img className=”c-hero__img” src={imgSrc} alt={imgAlt} /> <div className=”c-hero__body”> <h2 className=”c-hero__title”>{title}</h2> <p className=”c-hero__description”>{description}</p> <div className=”c-hero__children”> {children} );
</div> </div> </div> put stuff herebox to put stuff
HERO COMPONENT WITH CHILDREN <Hero> <InlineForm /> </Hero>
HERO COMPONENT WITH CHILDREN <Hero> <Button /> </Hero>
HERO COMPONENT WITH CHILDREN <Hero> <WhateverYouWant /> </Hero>
BAKED-IN BEST PRACTICES
http://bradfrost.com/blog/post/enforcing-accessibility-best-practices-with-component-proptypes/
VALIDATING WITH PROTOTYPES Hero.propTypes = { imgSrc: PropTypes.string.isRequired, imgAlt: PropTypes.string.isRequired, title: PropTypes.string.isRequired, description: PropTypes.string }
http://bradfrost.com/blog/post/enforcing-accessibility-best-practices-with-automatically-generated-ids/
A LABEL NEEDS A FOR
ATTRIBUTE
<label for=”first-name”>First Name</label> <input type=”text” id=”first-name” />
ADDING FIELD INSTRUCTIONS WITHOUT ARIA-DESCRIBEDBY <label for=”password”>Choose a password</label> <input type=”password” id=”password” /> <p>Your password must be at least 8 characters long</p>
ADDING ARIA-DESCRIBEDBY TO A FIELD <label for=”password”>Choose a password</label> <input type=”password” id=”password” aria-describedby=”instructions” /> <p id=”instructions”>Your password must be at least 8 characters long</p>
AUTOMATICALLY GENERATING IDS import shortid from “shortid”; class TextField extends React.Component { componentDidMount() { this.generateId=shortid.generate(); this.generateAriaId=shortid.generate(); } } render() { const { id, label, ariaDescribedBy, instructions, ..other} = this.props; return ( <div className=”c-text-field”> <label htmlFor={id || this.generateId}>{label}</label> <input type=”text” id={id || this.generateId} aria-describedby={ariaDescribedBy || this.generateAriaId} /> <p id={ariaDescribedBy || this.generateAriaId}>{ instructions }</p> </div> ) }
IMPLEMENTING A TEXT FIELD COMPONENT <TextField label=”Last Name” id=”last-name” ariaDescribedBy=”last-name-instructions” instructions=”Please provide your family name” />
IMPLEMENTING A TEXT FIELD COMPONENT WITHOUT ID
ATTRIBUTES
<TextField label=”Last Name” instructions=”Please provide your family name” />
AUTOMATICALLY ASSIGNING UNIQUE IDS IF THEY AREN’T EXPLICITLY DEFINED <label for=”qPbdivDEiH”>Last Name</label> <input type=”text” id=”qPbdivDEiH” aria-describedby=”0LvdKMfqA” /> <p id=”0LvdKMfqA”>Please provide your family name</p>
YOU CAN’T SCREW IT UP!* *You can probably still screw it up if you try really hard.
WHAT DOES IT MEAN TO LAUNCH A DESIGN SYSTEM?
A design system isn’t a project with an end, it’s the origin story of a living and evolving product that’ll serve other products. -Nathan Curtis https://medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935#.4umtnfxsx
SPECTRUM OF INTEGRATION least integrated static frontend reference code consumable components most integrated
SPECTRUM OF INTEGRATION least integrated static frontend reference code consumable components most integrated
comp production
SPECTRUM OF INTEGRATION least integrated static frontend reference code consumable components most integrated
https://v2.designsystem.digital.gov/
30,000 FREAKING WEBSITES
SPECTRUM OF INTEGRATION least integrated static frontend reference code consumable components most integrated
https://www.carbondesignsystem.com/components/accordion/code
DEPLOYING A DESIGN SYSTEM
https://www.npmjs.com/
npm publish frontend workshop pilot project & component dev design system design system inventory manager video editor store lookup look book point of sale company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products
https://www.npmjs.com/package/carbon-components
https://www.npmjs.com/package/@salesforce-ux/design-system
inventory manager video editor store lookup look book point of sale company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat npm install npm publish frontend workshop pilot project & component dev design system design system products
INSTALLING YOUR DESIGN SYSTEM npm install your-design-system
IMPORTING A DESIGN SYSTEM COMPONENT import Button from your-design-system/Button
IMPLEMENTING A DESIGN SYSTEM COMPONENT <Button text=”Book Room” variant=”primary” />
BIG MENTAL SHIFT ALERT: FROM “LET’S BUILD A WEBSITE” TO “LET’S MAINTAIN A PRODUCT WHICH OTHER PRODUCTS USE AS A DEPENDENCY.”
VERSIONING
https://semver.org/
v0.1.0
v0.1.0 Fix bugs or optimize existing features without breaking changes patch
v0.1.0 minor Add new features or deprecate features without breaking changes
v0.1.0 major Breaking changes, such as box model styles, color revisions, public API, markup, icons, fonts
v0.30.0
v0.30.1
v0.30.2
v0.31.0
v1.0.0 🎉
A 1.0.0 designation comes with commitment. Freewheeling days of unstable early foundations are behind you. –Nathan Curtis https://medium.com/eightshapes-llc/versioning-design-systems-48cceb5ace4d
v1.1.0
UPDATING TO THE LATEST VERSION OF THE DESIGN SYSTEM npm update your-design-system
http://designsystem.morningstar.com/about/versioning.html
https://medium.com/eightshapes-llc/releasing-design-systems-57fca91a23f6
frontend workshop pilot project & component dev design system design system video editor video editor ui store store lookup lookup ui look book point of sale company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products inventory inventory manager manager ui
frontend workshop pilot project & component dev react-flavored design system design system video editor video editor ui store store lookup lookup ui look book point of sale company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products inventory inventory manager manager ui
frontend workshop pilot project & component dev design system design system video editor video editor ui store store lookup lookup ui look book point of sale company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products inventory inventory manager manager ui
frontend workshop pilot project & component dev design newreact twig hotness system tech-agnostic tech-specific video editor video editor ui store store lookup lookup ui look book point of sale company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat products inventory inventory manager manager ui
video editor video editor ui store store lookup lookup ui inventory inventory manager manager ui look book point of sale company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat react frontend workshop design system twig new hotness pilot project & component dev tech-agnostic tech-specific products
What happens when the new hotness isn’t the new hotness anymore?
video editor video editor ui store store lookup lookup ui inventory inventory manager manager ui look book point of sale company blog partnership microsite vendor info fashion design fashion merchandising homepage e-commerce careers chat react frontend workshop design system twig new hotness pilot project & component dev tech-agnostic tech-specific products
iOS iOS app 1 iOS app 2 video video editor editor store store lookup lookup look book point of sale company blog partnership microsite vendor info fashion fashion design design fashion fashion merchandisin merchandis homepage homepage e-commerce careers chat inventory inventory manager manager react frontend workshop design system twig g new hotness pilot project & component dev tech-agnostic tech-specific products
DESIGN TOKENS
https://www.lightningdesignsystem.com/design-tokens/
communications native apps marketing site product 1 product 2
design tokens communications native apps marketing site product 1 product 2
design tokens communications native apps marketing site implementation-agnostic source of truth product 1 product 2
DESIGN TOKEN PROPERTIES ๏ Background colors ๏ Border thicknesses ๏ Type colors ๏ Border radii ๏ Font families ๏ Animation speeds ๏ Font sizes ๏ Media queries ๏ Font weights ๏ Margins ๏ Line Heights ๏ Padding ๏ Border colors
https://github.com/salesforce-ux/theo
https://amzn.github.io/style-dictionary
https://www.invisionapp.com/design-system-manager/
THIS IS HARD.
iOS iOS app 1 iOS app 2 video video editor editor store store lookup lookup look book point of sale company blog partnership microsite vendor info fashion fashion design design fashion fashion merchandisin merchandis homepage homepage e-commerce careers chat inventory inventory manager manager react frontend workshop design system twig g new hotness pilot project & component dev tech-agnostic tech-specific products
TAKEAWAYS ๏ Your design system must live in the technologies your products use ๏ Look at your product roadmaps for design system pilot project opportunities ๏ Establish code conventions and use tooling & process to enforce them ๏ Build your design system and pilot project UI screens in a frontend workshop environment ๏ Bake best practices into reusable components & make them as rigid or flexible as you need them to be ๏ Use semantic versioning to manage ongoing design system product work ๏ Use design tokens to feed common design properties into different platforms
BABY STEPS
THANKS! brad@bradfrost.com | bradfrost.com
You can have a killer style guide website, a great-looking Sketch library, and robust documentation, but if your design system isn’t actually powering real software products, all that effort is for naught. At the heart of a successful design system is a collection of sturdy, robust front-end components that powers other applications’ user interfaces. In this talk, Brad will cover all that’s involved in establishing a technical architecture for your design system. He’ll discuss front-end workshop environments, CSS architecture, implementing design tokens, popular libraries like React and Vue.js, deploying design systems, managing updates, and more. You’ll come away knowing how to establish a rock-solid technical foundation for your design system.