Design Systems with Brad Frost
Ғылым және технология
In this revisited supper club episode, Wes and Scott talk with Brad Frost about how to implement design systems in small and large scale projects, best practices around naming things, keeping everything in sync across different codebases, and how design systems help projects.
Show Notes
00:00 Welcome to Syntax!
00:49 Brought to you by Sentry.io.
01:14 Introducing Brad Frost.
06:26 What is a design system?
11:48 How do you keep design and code in sync?
15:52 How do you use Shopify, WordPress, React, etc. through a design system?
19:19 How is CSS handled?
25:19 What's the benefit of going all in on web components?
28:49 Do small startups need to worry about design systems?
32:36 How do design tokens work?
37:38 How do you deal with pushback on design systems?
41:05 How do you go outside the guidelines?
44:52 What system do you use for naming things?
49:06 How do you best document your language choices?
50:41 Supper Club questions.
57:12 Sick Picks + Shameless Plugs.
All links available at syntax.fm/770
------------------------------------------------------------------------------
Hit us up on Socials!
Scott: / stolinski
Wes: / wesbos
Randy: / @randyrektor
Syntax: / syntaxfm
www.syntax.fm
Brought to you by Sentry.io
#webdevelopment #webdeveloper #javascript
Пікірлер: 13
“What’s in a design system figma library isn’t as much of a spec for developers to build it out. What this figma library is is a promise of what is in code. It is a representation of what exists in the coded design system.” Perfect
Syntax 800 episodes?? Since when?! Congratulations!!
I learned a lot from this episode. Loved Brad's Sick Pick. I am going to print out that quote and paste it in my office.
I think one thing to call out with design systems is that while they’re typically not the source for innovation, it should support teams experimenting with new UI ideas by providing low-level “nuts and bolts” to help experimental UI at least stay cohesive with the system: design tokens, CSS parts in components, constructable style sheets, etc
I appreciate the take here to try an establish a definition for what constitutes a 'design system'. I think I would interpret it even more generically: A design system is in essence a governance mechanism which describes how some scope of products are communicated to its audience. Design systems are documented to provide the guidance. Many find this most convenient to document within Figma, given how valuable it can be to express that guidance through visualizations. Figma/Sketch/XD and similar apps typically build out features to help design teams keep a consistent reference of these concepts that can be instantiated to make a design team's workflow more flexible and resilient to change. Similarly, a component library is just a tool to help templatize the expression of that system in a manner where that communication medium is in some digitally interactive format (web/native apps). Ultimately, the implementation of the system is a challenge that a team or organization will have to figure out how to best maintain and scale.
How do you maintain consistency with the versions of components published? i.e. how do apps know of the latest published version of the component without manually changing the version in packgejson and hitting install?
@danielarrizza4985
Ай бұрын
I use npm-check-updates to see what needs to be updated
Really just here for the Michigan hockey hat. Go Blue!
@syntaxfm
Ай бұрын
Go Blue!
@GuillermoArellano
Ай бұрын
CHEATERS!!
Second!
confused.
First☺️