Let’s be honest—all of the discussion around design systems can feel a little like getting pelted with buzzwords. Sure, you can read about the theory and tenets of a good system, (and you should), but sometimes it’s easier just to get into one and poke around.
For you tinkerers, we’ve created a fully functional sample design library in Design System Manager (DSM). It’s our tidy page of guides, patterns, and component libraries. Things you can do with our sample library:
- Explore the system in your browser (bonus tip: send it to anyone skeptical of implementing a design system)
- Download the design file and use it as a base for your own.
- Use it to follow along a walkthrough with an expert.
Below, InVision Senior Design Specialist Emily Campbell takes 12 minutes and explains how the library was put together, what you can learn, and calls out some tiny details you may not notice at first:
In this video:
0:15 – How to compose a design system: components and folder structure
1:20 – The importance of a “getting started” section
3:14 – How to add detailed documentation in DSM
4:21 – The colors page, a foundational element of your design system
6:10 – Text styles and iconography
7:20 – The “why” behind the structure of our sample library
8:45 – Atomic vs categorical structures in design systems, and how to set up what works for you
10:30 – How we use cards and media blocks in our sample design system
Check out the walkthrough, then explore the sample yourself from the DSM web view. It’s also available from inside Sketch using the InVision Craft plugin. You can sign up for DSM for free here.
