michael chan

Adam Fratino and michael chan discuss scaling design systems at Peloton

This week, chantastic asks Adam Fratino about scaling Peloton’s design system from startup to IPO!

Peloton revolutionized fitness by bringing the buzz of boutique fitness into people’s homes. But as their product grew, it became tougher to maintain a cohesive brand.

How did a small team build a global brand?

Adam spills his secrets on scaling a design system to support multiple products, across dozens of countries, in a matter of years. His advice? Keep it simple, keep it small, account for change, and embrace high-touch, human processes.

Watch the complete interview on our YouTube channel »

We’re hiring! Join the team behind Storybook and Chromatic. Build tools that are used in production by 100s of thousands of developers. Remote-first. View openings »

--

--

Learn how to apply CDD to Next.js pages in Storybook

Next.js 12 is here! I want to show you four quick tips to get the most from Next and Storybook!

Next.js enables you to build high-performance applications with React. It offers groundbreaking components like next/image to optimize image loading.

As Next.js becomes more advanced so does the integrations between it and Storybook.

I took a deep dive and researched how to optimize Storybook for Next.js. Here’s what I found.

  • 📦 Initialize a new Storybook with Webpack 5
  • 📑 Create stories for Next.js pages
  • 🌎 Import shared, global styles in preview.js
  • ⬇️ De-optimize Next Image for use in Stories

Continue reading »

P.S.
I made a friendly, follow-along YouTube video as well! It includes a bonus tip for setting up MSW to mock getStaticProps and getServerSideProps.

--

--

michael chan

michael chan

Clumsy Jesus follower. Awkward friend. Mediocre web developer. Working on http://learnreact.com