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.
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.
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.
“Basically everything is centered around parity with React and proving designers/UI engineers with enough flexibility to use, extend and remix without detaching.”
Thought I'd share some details of how we organize our @helpscout Design System in @figmadesign. Basically everything is centered around parity with React and proving designers/UI engineers with enough flexibility to use, extend and remix without detaching. It's working well, AMA pic.twitter.com/POY1Jxqr6N
— Buzz Usborne (@buzzusborne) May 21, 2020
Project showcasing and explaining The Unigrid System, created by Massimo Vignelli for U.S. National Park Service.
An interesting thread on how Analytics can help make informed decisions when changing the design system. Too bad it’s available only on the Organization plan.
So, @figmadesign's Library Analytics. I haven't seen much talk about these for a while.
— Christos (@NotChristos) May 7, 2020
What's available can give us signals, but what and how can we drive change based on these numbers?
Let's look at some small examples that have helped me make more confident decisions.
Jack Roles talks through the difficulties his team was facing using Sketch, why they selected Figma for creating Babylon DNA design system, and what they’re still learning.
A proposal for Figma to introduce Tokens panel with manually added values that can be reused across properties of objects and then exported to a developer-friendly format.
The City of Chicago published their public identity and design system. FastCompany wrote about it in more detail.
A design system built for the federal government.
Designing an open-source project in the open.
Design fam, we hear you. For our @figmadesign plugin project, y’all want a Style Guide Generator. Let’s build it! 💪
— ˗ˏˋrogieˎˊ (@rogie) March 11, 2020
As an open-source project — since we’re building this for you, we want your input! How? Simply duplicate the file, design your ideas and publish it.
1/4 https://t.co/ZJHjFcLScL
Alex Lockwood from Lyft shares a few examples of how their team used Scripter plugin to build a design system library and automate tasks that would have otherwise taken hours or days to complete.
Good looking and comprehensive design system built specifically for Figma.
Uber published components from their React UI framework as an open-source resource on Figma.
“A strategy that may help ease some of the pain and confusion when deprecating unwanted components.” That’s something we all have to do from time to time, so I’m glad Steve Dennis documented his approach.
Jules Forrest posted a summary of her Config talk as a Twitter thread.
In 2017, when I was first researching this problem, I learned there were two distinct approaches to naming design systems: utilitarian design systems names and fun design systems names. pic.twitter.com/O5VuNP0dea
— Jules Forrest (@julesforrest) February 7, 2020
Figma team shares how they’ve built a unified design system for their marketing site, then implemented it in Contentful CMS.
Always fun to explore and learn from a well-documented style guide.