770: Design Systems With Brad Frost (Rereleased)

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, Technology, News

4.9 • 1.2K Ratings

🗓️ 17 May 2024

⏱️ 59 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

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. Brad Frost.com. Atomic Design by Brad Frost. Brad (@brad_frost) on Twitter. Brad on LinkedIn. Brad on Mastodon. Brad on YouTube. Brad on GitHub. Brad Frost on CodePen. Big Medium | Design for What’s Next. 06:26 What is a design system? 11:48 How do you keep design and code in sync? Material Design. Shopify Polaris. Carbon Design System. The Design System Ecosystem | Brad Frost. 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. Thinking in Systems. Miriam Eric Suzanne. Zeldman on Web and Interaction Design. 57:12 Sick Picks + Shameless Plugs. Sick Picks Brad: Rubblebucket. Shameless Plugs Brad: Frostapalooza! | Brad Frost, FROSTAPALOOZA - A Concert Party Happening On August 17th 2024. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Transcript

Click on a timestamp to play from that location

0:00.0	Hey what's up this is Scott from Syntax.
0:02.7	Now that we're on YouTube and approaching 800 episodes
0:05.8	we wanted to release some of the very best interviews that we've done on Syntax.
0:10.8	So please enjoy one of our favorite episodes.
0:14.0	Welcome to Syntax, the podcast with the tastiest web development trees out there today. We have a special
0:25.9	guest on the podcast Mr. Brad Frost. Brad is author of Atomic Design, Design System Consultant, web developer, CSS thought leader.
0:38.4	I'm sure he doesn't like that last one. All kinds of stuff around building design systems and building stuff for the web.
0:44.9	Welcome Brad, thanks for coming on.
0:46.5	Yeah, thank you so much for having me. This is awesome.
0:49.4	And if you want to see all of the errors in your application you'll want to check out
0:53.7	sentry at sentry.io forward slash syntax you don't want a production application
0:59.5	out there that well you have no visibility into in case something is blowing up and you might not even
1:04.9	know it so head on a reduceentry.io.4. syntax again we've been using this tool for a long time
1:10.5	and it totally rules all All right, Wes.
1:14.0	Let's start like just tell, I'm sure that literally everybody has probably stumbled
1:20.7	upon your website at some point. if you just go to Brad's website you
1:26.2	probably go oh yeah I remember this website but if people don't know who you are
1:30.8	it give us a rundown of who you are who you're from, what you do, all that good stuff.
1:35.0	Yeah, my website being a sort of a calling card is a point of pride that one time I was at the dog park and was talking I was talking with somebody
1:47.7	Let's talking with somebody and so you know it got into oh what do you do and I'm a web designer and started talking about what they what they got into and then they said what do you do and I said I'm a web designer too and started explaining a little bit more and they it goes you the guy with the
2:05.8	orange website and I was like yes I am I am the guy with the orange website so
2:14.0	is it orange I always I was gonna say I almost introduce you as the guy with the brown website it's like it's like
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.