Download our example design system and kickstart your own

4 min read
Robert Fenstermacher
  •  Dec 18, 2018
Link copied to clipboard

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:

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.