The Technical Side of Design Systems

A presentation at An Event Apart Boston in May 2019 in Boston, MA, USA by Brad Frost

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/

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

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

HOW THE HELL ARE WE GOING TO DO ALL THAT?!

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

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

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?

http://bradfrost.com/blog/post/a-frontend-workshop-environment/

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

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?

WHAT CSS TOOLS (SASS, NORMALIZE, AUTOPREFIXER, ETC) WILL THE DESIGN SYSTEM USE?

WHAT JS TOOLS (FRAMEWORKS, LIBRARIES, TOOLING) WILL THE DESIGN SYSTEM USE?

GUIDELINES ARE GREAT AND ALL, BUT LET’S ENFORCE THEM!

https://css-tricks.com/make-it-hard-to-screw-up-driven-development/

OL’ TRUSTY, STURDY, PORTABLE, RELIABLE CSS
<link rel=”stylesheet” href=”cdn.com/design-system.1.0.css” />

ONE TYPE OF CSS NAMING (THAT HAS WORKED PRETTY DANG WELL FOR ME OVER THE YEARS) .cn-c-btn—secondary { }

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/

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/

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

variant=”primary” size=”large” variant=”secondary” variant=”link” size=”small” fullWidth={true}

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 here

HERO COMPONENT WITH CHILDREN <Hero> <InlineForm /> </Hero>

HERO COMPONENT WITH CHILDREN <Hero> <Button /> </Hero>

HERO COMPONENT WITH CHILDREN <Hero> <WhateverYouWant /> </Hero>

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

https://www.carbondesignsystem.com/components/accordion/code

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

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.”

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

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

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 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 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?

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

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://www.invisionapp.com/design-system-manager/

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

THANKS! brad@bradfrost.com | bradfrost.com

Brad Frost
@bradfrost

1 / 225

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.

The Technical Side of Design Systems

Link for this presentation:

HTML code for embedding:

Share on social media: