Design Systems Workshop
In this workshop we will break a small Vue.js Todo app down into a published pattern library of reusable, testable, documented components. Along the way we will learn how design systems are built, how the code and teams are organized, and how you can take your own design system from a grassroots project to a market shifting force.
- You will be able to confidently advocate for the value a design system will bring to your product
- You will be able to evaluate the risks and benefits of various design system architectures
- You will be able to recommend the correct team structure needed to not only establish your design system, but to keep it healthy for years to come
- You’ll be able to effectively break a design down into systems of components
- You will understand how Vue.js can be used to break down a small application into smaller, connected components
- You will use visual regression tests to help ensure that the visual integrity of your work remains intact
- You will come away from deep knowledge of some of the tools and frameworks used to create modern design systems
This workshop has a few opportunities to write code, but everyone from developer to designer to project manager will benefit from watching the creation of a small decoupled, documented, testable design system along with discussions around how to establish, build and nurture your design system and design system team.
- What is a Design System?
- Design System Benefits
- Taking an inventory of our project
- Design System Variations
- Writing a “dumb” Vue component
- Design System Code Organization
- Writing a “smart” Vue component
- Writing a composite Vue component
- Design System Code Structure
- Writing an iterating Vue Component
- Design System Staffing
- Writing docs and tests
- Design System Intermediaries