design-system
Design system checklist
An open-source checklist to help you plan, build and grow your design system.
Design systems 103: Documentation that drives adoption
Clear documentation transforms abstract design principles into practical tools. Here’s how leading teams build and maintain living documentation that evolves alongside their design systems.
The making of the Figma pattern library
UI3 prompted us to rebuild our own design system from the ground up. Here’s how designers and engineers came together to create a new foundation for building consistent, accessible products.
Stop building components, start building patterns
It seems to be the way that most people start their design system. First, sort out the basics of your foundation layer, including some colors, typography, and maybe some spacing. Then, it’s straight into crafting the perfect button, complete with 14 variants and every state imaginable. It’s tempting, too, as they feel like they’re the parts that will be the most useful. The cards, buttons, form elements, and all the other lovely components make up what most people think of as a « design system ». I think we’re doing it wrong.
Unlocking component flexibility with slots in Figma
Material Design is excited to introduce Slot Components, a powerful technique that allows you to create flexible and dynamic layouts with ease in the Material 3 Figma Design Kit. Slot components unlock local custom component nesting in Figma. With this added flexibility to make changes and edits to components, slot components remove the need to disconnect from the main Material Design Kit. Components can now remain linked to the main library to receive updates and improvements as you change them to suit your needs.
Design systems: simplifying documentation writing
One of the toughest parts of creating a design system might not be what you expect. Getting a design or development team to use it is generally straightforward; after all, who doesn’t want to make their job easier in the long run? Sure, the upfront cost might be high, but that’s an easy sell. No, the toughest part is the documentation.
Designing design systems: supporting implementation and adoption
A design system can’t reach its full potential if no one’s using it as intended. Beautifully designed components need to be paired with thoughtfully written guidance and ongoing support as the system evolves.
designing design systems: constructing an icon system
A process for creating a unified brand experience through iconography
design systems vs. style guides
design systems are a set of standards (like google’s Material design or IBM’s Carbon design System) needed to manage design at scale. Style guides (like content or visual style guides) are just one piece in a design system.
Where to put buttons on forms
Recommandations UX sur l'emplacement des boutons
Top 10 design systems in 2023
A design system is a collection of reusable components, guidelines, and assets that are used to build consistent and cohesive user interfaces across different platforms and devices. It’s a framework that provides designers and developers with a set of rules, principles, and tools for creating and maintaining a unified design language throughout an organization.
SF Symbols 5 et ses 700 nouvelles icônes sortent de bêta
Apple a lancé ce soir SF Symbols 5, la révision annuelle de son jeu d'icônes à destination des développeurs. Celles-ci sont pensées pour s'intégrer à San Francisco, la police de caractères utilisée par Apple pour ses appareils. Le pack d'icône dispose désormais de plus de 5 000 symboles, et cette révision apporte notamment une collection d'animations.
Reflections from building mozilla foundation’s design system
As our small *but mighty* design team grows and matures, the need for a design system kept coming up. And our website was growing and more things were being made! We switched from Sketch to Figma in 2020 and while we were able to import our old system, it was getting increasingly difficult to know what the most updated asset was. Our UI kit was incomplete, disconnected from code, and components were not built responsively or with editability in mind. A design system to us means having a source of truth for all of our design components alongside a collection of documented design decisions and processes. This year we were able to dedicate some time to building out our design system in Figma. We only had 3 months to build a solid foundation and here are our reflections at the end of it all.
Making of true multi-brand design system
Building an advanced design system for true white-label products with full control over colours, typography and visual styles
Introducing Spectrum 2: our vision for the future of adobe experience design
Imagine you’re designing a house. Your first step might be to draw a picture. To turn that picture into a house would require the input of many experts—architects, engineers, and builders—and would involve planning, teamwork, and time with each collaborator.
Introducing Figma Variables and a consolidated “all themes” library!
The Carbon Design team, in partnership with the IBM Figma guild, has enhanced our core theme Figma libraries to incorporate the latest feature enhancements introduced by Figma during Config 2023. We’re most excited about the new variables feature, which allow us to now apply design tokens in a more optimized and enriched way than ever before.
Iconography in design systems: easy troubleshooting and maintenance
No matter how sick you might be dealing with unending visual inconsistency, design systems are still challenging. They can scare any designer regardless of their experience. Still, if you want to bring order to chaos, introducing a design system into your workflow is worth the trouble. Tatsiana Tarkan digs deep into iconography as part of a design system and shares some doable tips that will turn icon creation and maintenance into an enjoyable process.
Figma Variables — Ultimate guide
Learn the capabilities of the new feature
Figma, i love you but you’re bringing me down
Confronting the conflict between what’s possible and what’s practical
Element is accessible by design
At Element, our mission is to provide secure communications to all. We believe that everyone deserves the right to private and safe online interactions. And, everyone means everyone 🧑🤝🧑. In today's digital age, accessibility is a vital aspect of any product or service. When websites, applications or products are not accessible, it limits certain users’ ability to fully participate.
Creating coherence: how spotify’s design system goes beyond platforms
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.
Creating a wise typographic set
How we created an international type library for everyone, everywhere.