Brad Frost | The Technical Side of Design Systems | UI Special, CSS Day 2019

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. This talk covers what's involved in establishing a technical architecture for your design system, including front-end workshop environments, CSS architecture, implementing design tokens, popular libraries like React and Vue.js, deploying design systems, managing updates, and more.
Resources: bradfrost.com/blog/post/the-te...
About Brad: bradfrost.com
Get his book, Atomic Design: atomicdesign.bradfrost.com
Follow Brad: / brad_frost
More about CSS Day: cssday.nl or / cssdayconf
Receive conference announcements in your inbox: cssday.nl/subscribe

[@daSenfgurke]

Brad is awesome

[@rileydavidjesus]

Awesome talk

[@virat5484]

really helpful presentation on design system can you Please share PPT or PDF of presentation

[@tedfitzpatrickyt]

React can be a legacy-to-modern UI tool because legacy DOM can be transformed into modern DOM - or DOM output by various server-side tech to modern DOM

[@unleashthedog]

Why not just use an in-between tech/lang/markup to create these components? Like JSON seems perfect to me as a descriptor for components (or xml), and then you can read/parse the system regardless of the tech used, and you don't need to port anything from one framework to the next hotness

[@notthere83]

I find it unfortunate that react-styleguidist doesn't show up anywhere (neither in the talk nor in the linked resources). It's interactive nature, included API parsing and so on IMO makes it much more suitable for a playground, style guide and API documentation all in one versus e.g. storybook. UPDATE: Ah, I just saw the end of the video. I think now I get it. ;)

[@andynonimuss6298]

Designers have been using Design Systems (reusable components and patterns) from the very beginning with Photoshop. Adobe Flash also used reusable graphic "components". We just didn't call it Design Systems back then. Nowadays it's easier to create a Design System with the cloud-based ability in Adobe XD. I think Brad Frost is a cool guy, but he only highlighted the idea of the obvious. I understand the small to large analogy of Atomic Particles, but trying to inject science terms into design language makes the systems concept confusing for designers.

[@jonnylaris]

God what an awful audience...

[@WebConferencesAmsterdam]

Why exactly? :)

[@jonnylaris]

@@WebConferencesAmsterdam they hardly laughed at a single joke by the sounds of it! Great show by the way :)

[@WebConferencesAmsterdam]

Oh, they laughed! We just don’t have mics hanging over the audience :)