We’re nearing the launch Chapter 4 of Subatomic, and so far we have 31 videos published that dig into the gory details of building out a comprehensive token system in Figma and code from the ground up.
In this chapter: we’re detailing EVERYTHING, from environment setup, building an MVP token system, building a theme’s color, typography, spacing, border, shadow, animation, breakpoint, and z-index tokens, then extending that structure to create more themes.
Friends, you have no idea how excited we are to finally get the opportunity to unpack our decade of building design systems with countless organizations. There is A LOT of detail packed in here (which is why Ian and I keep saying “holy shit” to each other as we construct these materials). A quick example:
-
In order to cover typography tokens, we have to…
-
Cover responsive typography, which means we have to cover…
-
Breakpoints, which means we have to cover…
-
Viewport modes in Figma, which means we have to cover…
-
The difference between viewport and media queries, which means we have to cover…
-
The token implementation similarities and differences in Figma and in code.
This level of nuance is HARD-EARNED STUFF, which is why we’re so pumped. As I mentioned on Bluesky:
As we underscore throughout the course, design tokens are a cross-disciplinary affair. We are underscoring this further by literally showing a token architecture being constructed in Figma and code side-by-side. It’s becoming apparent that creating the course in this side-by-side, cross-disciplinary fashion will almost certainly level up designers’ understanding of development, and developers’ understanding of design. THIS MAKES US VERY HAPPY.
A few bonus days to preorder at $650!
Lastly, we were planning on making the demos available today, but Ian and I want to dot a few more I’s and cross a few more T’s before we release it our preorder customers. We’re committed make this whole kit as sturdy and useful as possible, so thanks for your understanding and patience as we bring this thing home!
Count on us releasing the Figma file and code boilerplate/demos next week. That means you get a few more days to preorder the course at the lowest early-bird price. So now's the time to preorder!
As always, let us know if you have any questions about our course want to share what your team is struggling with. We’re here to help (and we actually mean that).
Love Always,
Brad Frost and Ian Frost
P.S. Follow us on social media: Brad on Bluesky & LinkedIn and Ian on Bluesky and LinkedIn.
P.P.S. Please add courses@bradfrost.com to your contact list so our emails actually make it to your inbox. We’re still getting the hang of it, thanks!
