Sketch Tutorials
Everything You Need to Know About InVision’s New Design System Manager, Including How to Build One
Team collaboration, made simple.
His name might now sound familiar, but Ransom E. Olds is considered by many to be the founder of the automotive industry and patriarch of mass production. Maybe you’ve heard of the Oldsmobile? He’s that guy.
This forgotten pioneer is credited with developing the assembly line, which helped him build the world’s first mass-produced automobile, the Oldsmobile Curved Dash. Now there’s a car!
The credit for the invention of the assembly line often goes to Henry Ford because of one very critical addition — Ford put the cars on a conveyor of sorts, creating the all-important moving assembly line.
The assembly line is one of the most extraordinary innovations ever developed. For the first time, products could be assembled quickly and consistently without sacrificing quality. There was no guesswork — products coming off the line looked the same and worked the same, every single time.
The concept has been improved and adapted across all industries to accelerate production and improve output, and it’s finally made its way into the mainstream design practice with design systems.
The Right Time
If you’re building digital products at scale with an in-house design team of more than one person, it might be time to start building out a design system.
There are varying levels of sophistication and complexity, but all systems include some kind of a collection of reusable elements and components. When you’ve settled on an elemental set of design pieces, you can start codifying how and when they’ll be used, and save them in a central location for assembly-line-style fabrication by your design team.
InVision Design System Manager (DSM)
We’re going through an industrial revolution of sorts where new design tools are released every single day, and it can be hard to see through the clutter.
After vetting various tools, I ultimately ended up coming back to InVision DSM plugin because InVision has and always will be central to our design delivery workflow. It just made sense to me to stay in the ecosystem.
Note: I haven’t switched to Studio because my agency is very engrained in Sketch. At this moment, it would be a costly switch, but we’re not ruling it out. I hear great things, and the time may be more right in the future.
DSM is the Ford of design systems, offering an improvement on the concept which makes it easier to update and scale a design system without abandoning your design tool of choice.
Why not just use Sketch Libraries?
Totally understandable question — I asked the same thing. Here’s why I like it:
- Drag-and-drop interface
- You can search for components
- Symbols are organized visually in a toolbox
- Team sharing is simpler
- Version history and version deployment
- Automatically-generated online style guide
Building Your Design System
Let’s break down every step required for building out your design system in InVision DSM. It’s worth noting that full-blown design systems typically include design, philosophy, and code. I’ll be covering the design portion in this article, but just recognize that it’s just one part of a larger assembly line.
I’m going to assume you’ve already built out your styles and symbols…if you haven’t done that yet, feel free to follow along using Render, the sample design system provided by InVision DSM.
Open up your design system Sketch file where you’ve been building out the various components of your design system, and let’s get started.
Step 1: Creating a Library
Head to your InVision web dashboard and click on DSM.
In the same way that you need to create a new InVision Project before you can start syncing screens, we have to create a new design system library. As your design system grows, it’s best practice to compartmentalize your system components across multiple libraries — one library for desktop, one for iOS mobile, one for Android mobile, one for core components, one for product-specific components, etc.
Click Create New Library to get started:
Step 2: Downloading the Plugin
Your design system “shell” is ready, and it’s time to start filling it with elements, components, and saved styles.
Download and install the InVision Craft plugin if you haven’t already. If you’ve never used it before, you might get confused when you open the app because you don’t see anything launch. You’ll find it in your Mac menu bar.
Make sure you activate the DSM tool under the Tools tab at the top.
If you installed it correctly, you’ll see a new vertical toolbar inside of Sketch:
Step 3: Understanding the Library Sections
Click on the cog shape at the bottom (it might be in a different place depending on which tools you have activated in Craft Manager). You’ll see the DSM toolbox open in a new window, and your new library shell should already be selected:
A DSM library is divided into five sections (called “Folders”) by default:
- Colors: This is where you’ll put all of the colors used in your system
- Text Styles: This is where you’ll put all of the saved text styles
- Layer Styles: This is where you’ll put all of the saved layer styles (fills, borders, shadows, etc…)
- Icons: This is where you can organize all of your design system icon symbols.
- Components: This is where you’ll put all of your symbols.
Folders
Folders are probably the most convenient tool in DSM because they allow you to thoughtfully organize the pieces of your design system so they make sense to everyone using it. You can even create folders within other folders to add deeper organization (currently limited to two levels of nesting).
Step 4: Adding Colors
Select the Colors folder and click the + button in the bottom right. A modal will pop up asking you to name this color palette. You can have multiple color palettes based on your color system, so feel free to create one or many.
DSM will scan your document to find all of the colors that you use. Select which ones you want to add to this palette, then click Add Colors.
Click the text below the color swatch to rename your colors to something a little more useful:
DSM let’s you add descriptions to components in your library, which is great for adding usage guidelines and design principles:
The rich text editor is pretty dope – I don’t have to hack it with my own homegrown formatting.
Step 5: Adding Text Styles
If you’re not already using text styles, I implore you to start immediately. When you design products using text styles, it makes it mind-numbingly easy to make file-wide updates to the font by just updating the style, then syncing.
Anyway, adding text styles is super easy because DSM just does it all for you. Click into the Text Styles folder, then click the + button in the bottom right:
DSM will auto-detect every text style in your document. Just click Select All, and Add Text Styles.
Step 6: Adding Layer Styles
Click into the Layer Styles folder, then repeat the previous step. Pretty easy!
Step 7: Adding Icons
It’s important to note that icons don’t have to be symbols in order to add them into your DSM library.
!!! A Very VERY Important Note !!!
DSM supports deep-nesting in symbols. This means that if you’re using the color symbol technique to allow you to change the color of your icons, DSM will automatically scrape your file for all nested symbols and import those into the library for you automatically. This means you do not need to import your color symbols. Just import your final symbol composites…not the individual nested symbols that make up the final component.
Click into the Icons folder, select an icon layer or symbol, then click the + button to add. Note: You can select multiple icons at a time and add them in one fell swoop. No need to do them one-at-a-time. Phew.
I strongly recommend you take some time organizing your icons into an understandable sub-folder structure. It’ll make it easier to find them later:
I usually divide mine into the following:
- App Icons: Product icons for things like Twitter and Facebook.
- UI Icons: Standard UI icons like settings, delete, user profile, etc.
- Toggle Icons: Things like checkboxes, radios, and switches.
- Misc Icons: Anything else that doesn’t fit in the above categories.
Step 8: Adding Components
You should have the hang of it by now! Click into the Components folder, then click the + button to start adding your reusable elements and components.
This is where you’ll want to be super organized with your folder structure:
Remember, DSM will automatically import any deeply-nested symbols that make up your larger symbol composites, so you only have to import the “final component” into DSM:
The Chips above have lots of nested symbols in them to allow for choosing different avatar styles (image, initials, icons), chip color, and text color. I only had to import my final chip symbol into DSM. When I’m using chips from my design system in another file, DSM will bring all of those nested symbols with it, including any nested symbols that have the same artboard size.
It’s really really nice.
Step 9: Deploying and Using the System
When you’ve finished adding all of the necessary components to your design system, they’ll instantly be available to everyone on your team! They’ll just have to click sync to update their file with the latest-and-greatest from the shared DSM library.
On the Enterprise plan, you’ll have the ability to do some fancier things like library versioning, user permissions, and library access control.
If you’re on the enterprise plan and want to release a new version, just click on the dropdown in the top left, then choose Release new version…
Your new design system version now exists, and if you’ve already released an earlier one, you can see what’s been changed by clicking Version history…
This will take you to a web view of your change log, just like you might see when you update an app on your computer:
You should really aim to be a lot more verbose and detailed than I was in the above screenshot so that your team knows what has changed.
Speaking of team, you’ll probably want to invite some other designers to use, edit, and manage your new DSM library.
From within your library in the web interface, click the Invite button in the upper right of the screen. You’ll see a popover where you can invite other designers.
Note: If you’re on the Enterprise plan, you’ll have the added ability to invite users to View, Edit, or Manage (admin) this library.
You can also visit the People tab on the DSM home screen to view, edit, and add collaborators to your libraries.
You can quickly jump to this page from within the DSM plugin, too:
Step 10: Making Updates to Your System
Since you’re the “master librarian” of your new design system, it makes sense that you’ll want to make updates from time to time, whether it be adding new components, or updating existing ones.
Click into the folder that contains the component you want to update, then click the + button. If DSM detects that the symbol already exists, you’ll get a dialog box that looks like this:
Decide whether you want to Create New or Replace Existing, and the change will propagate into your DSM library:
When updates are made in your library, members of your design team will get notified that components have been updated:
All they have to do is click Sync library to document and the changes will be reflected in their document, with all existing overrides (like text) preserved:
Really-Quick-Side-Note: Anyone who shouldn’t be poking around in the library symbols can just be set to be a Viewer instead of an Admin or Editor inside of the collaborator permissions. Protect your system from any unwanted changes!
Summary
In this article, we learned how to create a library, install the Craft plugin, build out your library, and deploy your system. You and your team are now ready to start using your brand new design system!
I helped InVision create a sample design system called Render so you can see how nice it looks in their web view. Download the Sketch file and the Craft plugin, and you can begin assembling your own library with the DSM tool using the Render system as a starting point.
When I’m not building design systems, I’m working on Sketch tools at UX Power Tools to make you a better, more efficient designer.
Follow UX Power Tools on Twitter
Follow me on Twitter
Say hi on LinkedIn
Learn some stuff from my agency’s blog
