Figma recently announced its new Variables product, allowing you to define and manage your design tokens directly within Figma. I have been experimenting with Figma Variables for a few weeks and am reasonably impressed with how it works. In this article, I'll share how I've been using Figma Variables to support my design projects and how I've been syncing them with my codebase with GitHub Actions and StyleDictionary, utilising a dev preview of the Figma API. For this article, I’ll focus primarily on syncing these variables one way from Figma to GitHub, making Figma the source of truth for all my design tokens.

kickstartDS is a comprehensive component and pattern library, enabling web development teams to create consistent and brand compliant web frontends super efficiently.

We’re a truly multi-brand organisation, which is why being able to create individually branded customer experiences while re-using our technical knowledge, digital assets and business processes is so important. This article explains how we achieve this using the GEL Design System, its tools and resources.

Measuring a design system is both essential and challenging to ensure its longevity and success. There are already some ways to measure it, but mainly from a design point of view. Still, developers play a critical role in the success of a design system. They are responsible for implementing the design system's components and patterns into the projects, and thus, are the cornerstone of the design system’s efficiency. By reducing efforts and saving time, design systems can reduce development time.

Design tokens are being used by companies like Amazon and Adobe to solve the pitfalls of coding a design system. I provide an introduction to design tokens.

In this article I'll explore using Web Components for a design system and what kind of benefits and limitations it introduces.

How has Encore grown and evolved over the last few years? Find out what our design systems team has been up to and the learnings along the way.
#accessibility #design-systems #f:article

Ad Hoc brings small teams of skilled professionals together to build government digital services that are fast, efficient, and usable by everyone. #design-systems #f:article #accessibility

The central digital experience resource of Helsinki Design Language. Guidelines, design assets and component libraries for building a consistent and accessible digital brand across the city.

Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets — automatically.

The missing industry standard definition of UI - specification proposals for new elements and APIs

Fluid responsive design methodology

List of components used by Block editor (names!).

Accessibility is unfortunately still an afterthought on many projects. User interaction and accessibility requirements are poorly documented, at best. Or forgotten, when handing over designs to developer teams. And fixing it later costs a LOT more than building it right to begin with. Great documentation helps teams implement accessibility requirements the right way. I will tell you why, what and how designers can document different aspects of accessibility and user interactions requirements, to build better more inclusive products.

via: axe-con confence

Backlight is a collaborative platform empowering front-end teams to build and ship great Design Systems.

Stratum UI Design Kit is a Figma library with ready-made consistent UI elements, helpers, and widgets. Build your UI design on the best practices and well-crafted states. Fast and fun.

The definitive guide to standardize the design/code of the UI Components based on the 39 most popular Reference Systems.

Design systems are great for developer efficiency, visual consistency, and accessible experiences. But measurement can be challenging, and even here at Sparkbox we’re often relying on anecdotes from our own projects or from self-reported metrics that we’ve gathered from our annual design systems survey. We wanted more proof, so we decided to test our hypothesis, “design systems help developers produce better code faster.” Our test subjects? A handful of willing Sparkbox developers.
via CSS-Tricks mailing list (https://css-tricks.com/newsletter/276-future-friendly-layouts-and-design-system-vitals/)

Themable react components with various configuration to match your need.

via devtools.fm

The Radius design system starter kit is a collection of open-source tools and libraries that guide and help you to build your design system faster. Design systems need to match your brand and product needs, and your current and future digital workflows. Too much, too little, too complex, or too off-brand, and you will fight your design system as much as benefit from it.