The Technical Side of Design Systems

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

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} );

box 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