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.

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.

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.

Rogie shows the best practices for documenting your design system using Figma and other tools.

Jeremy Dizon discusses best practices that his team followed to create and maintain multiple Lyft Product Language component libraries in Figma.

“Part ²⁄₅. Add to your design system by building foundational components and organize them using pages, frames, names, and descriptions.”

The Headway design team on managing a design system and multi-tiered UI kits in Figma. Love their usage of status badges and overlays.

Powerful plugin for managing design systems. Design tokens, theme management, content collections, documentation, and access to tokens from GraphQL API.

Create your style guide, type scale, and brand color scheme and turn them into shared styles, grids, and typography to kick off designing a design system from scratch.

A collection of design systems shared in Figma Community. Lots of great companies and examples to learn from.

Salesforce published multiple parts of their Lighting Design System.

Can’t imaging a better place for GitHub to share their design system.

Jules Forrest and Dina Sporer from Credit Karma share how their team converged around a design system workspace to improve their design and delivery process.

Pavel Laptev shares the experience of using a design system approach in Alteos, including how they use Figma API to share design tokens with code.

Gleb Sabirzyanov shares his starter kit for creating your own design system. It includes inputs, buttons, tags, dropdowns, tabs, type, color, etc. He also wrote a Twitter thread on how he used his Master plugin for building it.

A detailed look into how Microsoft is building a cross-platform Fluent Design System. They have an interesting take on building a Figma plugin to move away from fixed values and toward consistent design tokens that later translated into platform-specific code values.

GitLab’s open-source design system.

Designers from Shopify, Condé Nast, and Harry’s share their experiences with creating and maintaining a design system across multiple brands.