Breaking down design systems to atomic elements (w/ Brad Frost, Atomic Design)

← To all episodes

Get the Hacking UI Podcasts delivered to you via email, and enjoy more great content and resources from us →

Join our Facebook discussion group →

Episode #31: Brad Frost

We are honored to have with us today, the inspiring Brad Frost – Founder and inventor of the “Atomic Design” system.

Brad started out as a web designer. Started at agency work, then got into doing client work, started a shop, and eventually started consulting for teams, doing workshops, writing a blog and hosting a podcast.

Besides being a web designer, a developer, an author and a podcast host, Brad’s background as a musician also connect with his work.

In this episode, Brad shared his thoughts and insights about how to build a design system, collaborate better, and how to implement that state of mind into your organization.

This is the sixth episode of the third season of the Hacking UI podcast – ‘Scaling a Career’.

In this season we have 10 amazing guests for you, who are leaders and influencers from a variety of different backgrounds. Design managers, development leaders, entrepreneurs and product geniuses that we admire, and we’ll be sharing a new episode every Thursday.

Please support our amazing sponsors


This episode is brought to you by Invision, an amazing product design platform that you probably already know about.

The education team over at Invision created a magnificent source of quality learning material for product designers. On DesignBetter.Co  you’ll find interviews with dozens of leading designers from companies like Google, Airbnb, Netflix, Facebook, Slack and more.

Discover the design practices that they use that will help you to transform your organization and create better products. Also, you can subscribe to their amazing podcast, read one the four free books they published and put together for you and also, be sure to check out their one of a kind workshops for designers.

Start designing better →


Freshbooks is the perfect accounting software for freelance designers and developers or creative entrepreneurs with a small business. They have some really powerful features like integration with stripe, expense tracking and a customer support team who actually works with you to find the perfect solution. If you’re looking to get some understanding of your business and keep track of things without wasting hours of your time, then this is exactly what you need.

Try it free for 30 days →

Links from the show

Recommendations for podcasts and tools

I Love this podcast – now what?

Show your love #1 – Talk: Talk about it with friends and get the word out! We started this podcast in order to learn and would love to see others learn from it too.

Show your love #2 – Leave a review: Review us on iTunes and tell us which guest you’d like us to bring on the show next. When you review us it lets us know that you like the show and that we should keep doing it. Check out the following image, which describes exactly how to leave a review in one minute.

Show your love #3 – Share: Share this page on Twitter, Facebook, or wherever you can 🙂


Key points from this episode:

  • Learn about Brad’s background and how he started as a web designer. [00:04:15]
  • Get tips for managing time and help you to get into habits. [00:08:55]
  • Understand the value of self-promotion and doing stuff for free. [00:10:40]
  • Find out how Brad got to writing the Atomic Design book. [00:15:50]
  • Brad shares his framework and guidelines for taking decisions to breakthrough and navigating your career.  [00:17:10]
  • Find out about Brad’s work and what he cannot wait to do. [00:26:27]
  • Learn about how Brad built his website and the process of doing it all in the browser with pattern lab. [00:25:10]
  • Understand the medium in which you are designing for, coding and its constraints.  [00:28:28]
  • Learn about thinking of UI as a hierarchy, and how atomic design breaks things down. [00:32:07]
  • Learn about structural prep work, and about thinking and understanding components and hierarchy when you take a project from a developer perspective. [00:38:00]
  • Get Bits of Advice for companies that have problems with the separation from design and the development collaboration. [00:46:00]
  • Understand design systems and how to build a design and development collaborative work. [00:52:10]
  • Tips for Designers and freelancers who starting out. [00:55:00]
  • Brad shares his recommendations for podcasts and his favorite tools. [00:56:20]

About The Hacking UI Podcast

The Hacking UI podcast is hosted by Sagi Shrieber and David Tintner, a designer, and developer who are also both entrepreneurs, bloggers, productivity/time-hacking maniacs, and all around tech geeks.

We are thrilled to launch the third season of the Hacking UI podcast, where we hack our way through product design, development, and creative entrepreneurship.

Our first season, was called ‘Scaling a Design Team’, the Second season was called ‘Scaling a Side Project’ and we’ve decided to call this season – ‘Scaling a Career’.

In this season we have 10 amazing guests for you, who are leaders and influencers from a variety of different backgrounds.
We have design managers, development leaders, entrepreneurs and product geniuses.

Let Others Know about this episode:

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest

We participate in the Amazon Services, LLC Associates program, and affiliate advertising program designed to provide a means for us to earn fees by linking to and affiliate sites.