Figma and Charli Marie, Creative Director at ConvertKit, introduce the new video series ​“Coffee with Charli”, where she’ll interview design systems leaders. First up, Charli chats with Chris Pearson of Conde Nast about design systems for multiple brands.

During an audit of marketing pages, the team at Figma realized they weren’t following their own advice. Over the course of a month, their small team created and organized a robust, adaptable style guide and component library that now lives in their CMS. I loved that part: “…every color has its own branded name, inspired by California, where Figma is based. An earthy green is avocado toast, and an ember yellow is sunset.”

What a gem! ​“This file contains the Figma design language and system. It includes the styles, components, and variants Figma’s design team uses everyday to design Figma itself, as well as some instructions and best practices.”

Polaris for Admin Web UI kit is focused on building and creating products for Shopify.

A nice way to organize a design system and plan work using Figma embeds in Notion.

Warren Tobias describes the whole process of developing a proper design system and replacing Sketch, Abstract, and Flinto with Figma. Interestingly, they continued using Zeplin for the handoff process as their development and engineering team is mostly outsourced.

Jonathan Saring shows and explains the process of creating a design system with components to standardize and scale the UI development process at Bit.

Pinterest’s Ashley Seto and Fidelity Investments’ Taylor Cashdan and Mark Steinruck provide a behind the scenes look into their design systems and the operations that keep them going.

Export Figma styles and custom tokens to Style Dictionary JSON or sync to GitHub. I’ve been thinking of building a plugin for this before, so looking forward to trying it on one of the projects.

Another example from Spotify. Here, they moved from 36 to 4 track row components.

Shopify used Variants to clean up their local design system for retail.

In this example, they replaced 105 button components with just 3. (Sounds like they’ve been using Variants for a while, as Dylan Field used Spotify design system Encore to present the feature in his Config keynote.)

“Figma has partnered with leading global digital and design agencies. These agencies have a proven track record of helping their clients run at scale by setting up and migrating their design systems, implementing more efficient processes, and providing an overall elevated level of service.”

It’s all too easy to focus your design system on the perfect component, missing out on the aspect that’ll ensure your success – collaboration. Join Zalando’s Louise From and Julia Belling to understand how they created, educated, and scaled their internal design system.

A guide to creating the perfect palette with Material Design. While it’s not strictly specific to Figma, the recommended Baseline Design Kit makes it easy to preview a custom color palette in the Material Design system.

Tammy Taabassum created a design system in Figma for an existing product following the design thinking process. She started by assessing the situation (Discovery), set goals (Define), and only then built components and unified colors.

Somehow I missed this article earlier this year, but it’s a good resource for creating an automated process to keep design tokens of the design tool in sync with the code behind it. They achieve this by setting up a Node.js server that generates Sass and Tailwind files with all the variables from the Figma API.

The team members from Shopify, Condé Nast, and Harry’s shared their experiences creating multi-brand design systems in a livestream a few months ago. This post shares some of the highlights from it.

A branding and digital agency BASIC worked with Herman Miller on redesigning a Design Within Reach (DWR) website to replicate the experience shoppers might have in a showroom. They used Figma prototypes for usability testing and took the redesign as an opportunity to create the first design system for all of Herman Miller brands.

Testing a design system to see if the component library is robust enough in real-world scenarios.