An interesting new plugin for design system management that scans your Figma files to track usage and identify remote, local, and unlinked/detached components, styles, and variables.
Couldn’t walk past a cool website with strong 90s Apple vibes! The design system offers a generous free tier for beginners and students.
A curated collection of design system content, tagged with topics, speakers, and events. Now, where do I find time to go through all of this?!
A new video in the Introduction to design systems course by Figma explains design tokens.
Luis shows how to descope and unpublish primitive variables from the design system.
Speaking of Molly, only 2 weeks left to enroll in the upcoming cohort of her 5‑week Design System Bootcamp. I rarely recommend paid content, but have full confidence in her course as one of the most featured authors in this newsletter and creator of the popular UI Prep design system. Figmalion readers can save $100 with a coupon code FIGMALION100
.
Molly Hellmuth shares a few tips from her recent talk “Design System Traps & Pitfalls” at Smashing Conference. Here are the five ways to de-risk variable adoption for your design system — create a map for your token structure, start using variables with numbers only, use variables and color styles together, stress-test new features, and roll out changes gradually.
💡 5 tips to make sure variables don't break your Figma design system
— Molly Hellmuth (@molly_hellmuth) October 13, 2023
As I shared in my @smashingconf talk "Design System Traps & Pitfalls", adopting new features comes with risk..
Here are 5 ways to de-risk variable adoption for your design system👇 pic.twitter.com/tgOOorlc3r
Dan Mall is a designer, author, speaker, entrepreneur, and one of the most prolific educators in the design systems space. In this Shortcut profile, he distills his experience into ten pieces of advice for tackling complex tasks, preventing burnout, and fostering continuous learning.
I shared this beta’s release notes in the previous issue, but it didn’t show up in my account yet. Cool to see some folks are already trying it out. As Adham Dannaway pointed out, this release is bringing us “one step closer to a shared global design system”. Can’t wait!
Really cool seeing @figma Community Libraries beta rolling out!
— Jordan Hughes (@jordanphughes) August 31, 2023
1. Hit option⌥ + 3 to open libraries
2. Add a bunch of incredible community libraries
3. They'll appear in your assets panel like magic 🪄 pic.twitter.com/RnFaES7gAE
Allie Paschal writes about her process of migrating the Native Mobile Design System from using color styles to variables. Pretty cool to see that she already adopted a newly released scoping for color variables. I didn’t realize that some companies may not allow external plugins in Figma, so it’s nice to see that this process is completely manual and self-sufficient.
“Design Manager Juli Sombat sheds light on how a need for more cohesion led Spotify’s design systems team to take a cross-platform approach to components.”
Aaron Shapiro talks about his work as a Staff Product Designer at Patreon to “guide product, design, and engineering teams in an effort to clean up a decade of cruft and reimagine their existing design system.” It’s a fascinating behind-the-scenes look at how an expansive design system is being built, but I also love this format and storytelling way more than a regular portfolio presentation.
Carly Ayres from Figma sat down with the people working across design systems tooling both inside and outside Figma to understand what the rise of tokens and features like variables mean for the future of design systems.
Staff Software Engineer Daniel O’Connor peels back the layers of the Thumbtack’s design system, Thumbprint, to show how they built it for flexibility and efficiency: “Our current approach is one of layers, dividing our design system up into three levels: Thumbprint Tokens, Thumbprint Atomic, and Thumbprint Components. This approach has transformed the way we build and maintain our design system, and made it easier to deliver a great experience to our consumers and end users.”
Molly Hellmuth asked 5 of her go-to design system people — Luis Ouriach, Nathan Curtis, Lewis Healey, Dan Mall, and Maria Christopher — for advice on how to start using Figma variables. My heart goes to Luis’ advice to start in a spreadsheet before jumping to Figma (but that’s also my answer to any life question).
I asked 5 of my go-to design system people for advice on how to start using Figma variables..@danmall @nathanacurtis @mariachrstphr @Lewishealey @disco_lu
— Molly Hellmuth (@molly_hellmuth) July 13, 2023
..and, wow! There are SO many golden nuggets in these answers.. pic.twitter.com/01JZECxVCb
Intuit is the parent company for products such as Quickbooks, TurboTax, Mint, Mailchimp, and Credit Karma. Intuit Design System (IDS) is used as a foundational system that other multidimensional design systems are built on top of. Nate Baldwin wrote about creating a design token taxonomy for it: “Token names are how design tokens are referenced and identified by consumers. But at the core, a “name” is more of an ordered representation of a catalog system and API. This catalog system and API is also known as a token taxonomy. Building a clear taxonomy assisted us in appropriately and consistently classifying tokens, as well as providing a scalable and predictable naming convention for consumers.”
Cool to see how Atlassian has already rolled out the variables support to their massive Components and Design Tokens libraries.
An in-depth session by Designer Advocate Luis Ouriach and Design Systems PM Jacob Miller on how you can level up your design system in Figma for better scalability, theming, and more using variables.
A different kind of plugin — Chrome extension that lets you export Figma library or component analytics to CSV and enable several CSS overrides to adjust the UI.
Christine Vallaure recorded a comprehensive guide to setting up, connecting, and updating libraries.