Let me start this review by asking you a simple question.
I give you and three other people a library pack that all contained the same styles and components:
- Radio buttons, checkboxes, switches
- Input fields & dropdowns
- As well as other common components for a mobile or web app
I tell each of you to design a sign up form that includes taking in a user’s first name, last name, age, physical address, and email address. I give all of your 2 hours to complete the task.
At the end of the 2 hours do you think each form looks the same? The answer should be no and I want to prep you for this; InVision’s DSM isn’t going to get you that either.
DSM Is Not a DSM
There are three major categories that make up a design system. You have library packs and templates that are distributed to designers, those designers follow a style guide that has clearly defined guidelines, and then you have the actual developed components. If you’re missing any of those, then you don’t have a design system.
DSM does not fully manage a design system. The part it does the best is pulling things into a lightweight style guide, but even that is far from competitors such as Frontify. They are clearly lacking in features that would allow you to create a robust style guide that would be on par with Google’s Material Design online guide.
Adding Styles and Components
To get up and running you need to make sure you have an InVision account, set up your online DSM account where you can create a style guide, download Craft, sign in, and you’re up and running.
Adding items to DSM through Craft is a simple task. You can select the item in Sketch and within the DSM panel you can click on the plus symbol within the section you want to add. However, doing things in bulk is a challenge and deleting things in bulk is not possible. If you accidentally add 20 shades of the wrong color, you will be stuck deleting each one individually. There is also an awkward back and forth of where you can and can’t edit things. Text can be edited online and in the plugin, but many other things can only be done through the plugin and not online.
Google’s Material Design online guide is a great example of how to write guidelines. If you do not show specific scenarios, then it leaves everything up for interpretation. My intro question got you thinking about this and there should be questions like:
- On the form where does the submit button go?
- If I have a cancel button would it be a text or a contained button?
- Can an input field be any length, or should they represent their content?
- Plus a million more questions…
DSM allows you to write a description and add in images, but where they let you do it and how they let you do it leaves a lot more to be desired. I tried to show an example of what you’re not allowed to do with contained buttons. I could only add the example once I drilled down to the enabled version of the button versus back on the page that talked about contained buttons in general.
Building out the Style Guide
When building out a style guide you want full control. You want to be able to change the look of the style guide itself to match your design system, and you also want the ability to heavily customize the content.
DSM gives basic options when it comes to editing the style guide itself. You can add sections to the navigation by creating folders within Craft. An example is I have a folder for components and then inside that I have more folders for contained buttons and text buttons. If you want to build out pages directly on the web that aren’t tied to a style or component, then there’s a workaround. Pages are folders and folders are tied directly to items added in the Craft plugin. So in Craft just add a new folder and don’t add any items into it from Sketch. One downside to their navigation setup is that in my case I want a section for components, and within that I want a section for buttons, and within that I want all of my different button types (text, contained), but it’s not possible. You can only nest down one level.
In the description blocks of the style guide you can do basic things like make the text bold, italic, create a link, add lists, insert images, and add snippets of code. This is a great start and has a lot of the basics you would need to start writing out basic guidelines. However, without the ability to easily show do and don’t scenarios you won’t hit the mark you’re looking for in a style guide.
To illustrate a quick point here is a comparison of element types you can add in DSM and Frontify.
Frontify has been in the game for a while. They have almost anything you can imagine when it comes to adding different elements into your style guide, so you can see why DSM is a poor alternative in this particular area.
Permissions and Pricing
The version that I evaluated was the free version. To get basic things like adding in new editors that aren’t admins or even adding in viewers you have to upgrade to the enterprise version. You do have the option to have others view the style guide if you make your style guide completely public, but there are a lot of companies that want to keep their design system internal. Version control is also another feature that requires upgrading.
Going to an enterprise plan can escalate prices quickly with InVision. On their regular suite you can go from everyone having a free plan to $35/month per user. I’ve been in organizations where we’ve paid close to $100,000 a year for 300 users to have access to InVision. I have not contacted InVision to request their DSM enterprise pricing.
Invision has a great start at helping companies organize their design system while helping them write some guidelines. Using DSM is better than using nothing, but I would also caution that there are better products out there at the moment. DSM has a fraction of the features that Frontify does and it may be some time before they catch up.