Design is complex - and ever increasingly so. It requires full collaboration between all teams and professions involved in the process. A shared design language makes teams work together more effectively.
Design systems come in all shapes and sizes and can encompass a wide range of skillsets and roles within an organization. As a front-end developer, I'd like to share some of the tooling that I've found to be helpful when building out the components and code portion of a design system in modern applications.
Sprout Social’s design system, Seeds, has done a lot of growing up since it launched in October of last year. When we launched, our system was home to four categories of guidelines and principles: Brand, Visual, Writing, and Product. A healthy showing, for sure, but something was suspiciously missing — components.
Creating design systems with great documentation and examples can be a pain. MDX makes it far less painful — on this episode, Kathleen McMahon joins to teach us how to create excellent documentation for a design system using MDX and Gatsby.
This talk will take you through our journey to Polaris. An overview of what a design system is, why you would want one, and how we built ours at Shopify. I will give you a behind the scenes look into the technologies and patterns we used to build the system. React, TypeScript, CSS modules, markdown, and how they all come together to build something that both designers and developers will enjoy using.
In this course, you'll create a design system from scratch and learn the foundational design concepts that go into one. You'll design your components using Figma, then take those designs and turn them into coded components using React.
Varya talks about how a component library turns into a design system and shares some of her experience. She talks about how the concepts in a design system are influenced and created by the existing interface.