View and manage your design system from the web
Mastering InVision DSM
Tutorial Breakdown
DSM allows you to co-create a centralized, web view of your design system for cross-team transparency on design principles, styles, components, accessibility standards, copy guidelines, and more — branded to your look and feel.
When your Design System is ready to share, you’ll be able to use advanced roles and permissions as well as version control to ensure the security and integrity of all your hard work.
Your web view keeps everyone in your organization in sync — from designers and engineers to marketers, product managers, executives, and other stakeholders — your entire team can benefit from your design system and stay on the same page.
When your Design System is ready to share, you’ll be able to use advanced roles and permissions as well as version control to ensure the security and integrity of all your hard work.
Your web view keeps everyone in your organization in sync — from designers and engineers to marketers, product managers, executives, and other stakeholders — your entire team can benefit from your design system and stay on the same page.
Transcript
DSM allows you to co-create a centralized, web view of your design system for cross-team transparency on design principles, styles, components, accessibility standards, copy guidelines, and more — branded to your look and feel.
When you log in, you’ll see a list of your organization’s design systems.
From here, you can create a design system, or click to open an existing one. DSM lets you create as many design systems as you need — to remain in step with your organization as it scales.
You’ll start on the Foundations Page of your design system.
The Foundations page is home to your documentation, colors, and typography — which are the main categories you’ll find on the sidebar — along with an Add Category button at the bottom to break things up further.
Within each Category, you can create as many Pages as you need to document your system foundations. Every page allows you to add detailed documentation with images and rich text.
Color and Typography pages allow you to add the styles contained within any Sketch Libraries uploaded to the system. You’ll be presented with a dialogue box to browse, select, and add assets to the page.
Once you’ve added assets, you’ll be able to manage and rearrange them from the table view that appears on the page. You can edit the name and description of each item — as well as drag to rearrange them — and use the X to delete assets individually.
Now let’s head to the Components page — which is where we organize and categorize any Sketch Library symbols uploaded to the design system.
Much like the Foundations page, you’re able to Add Categories as the top level of organization — like “Actions” for example.
Within a Category, the Add button will allow you to create a component page — or for a second level of organization, you can create a folder — like “Buttons” for example.
Within a folder, you’ll find the Add Page button to create a new component page — which will contain all the symbols, documentation, and code for a particular component.
Mousing over an existing Category, Folder, or Page displays a handle that you can drag to rearrange things — as well as an ellipse button that allows you to rename or delete things.
Within a component page you can choose to Add Components — and browse the symbols in your uploaded Sketch Libraries — to find and add all the appropriate assets to this particular component page. The search bar at the top makes it easy to jump straight to what you’re looking for. Choose Add Assets, and a table view of the selected symbols will be added to the Design tab — each of which can be clicked to open up for a more detailed view.
You can add links to any external component documentation from the Links tab — and even add additional tabs to embed live coded components using the DSM Storybook integration.
Prototypes and a variety of other external resources can be embedded as well.
When your Design System is ready to share, you’ll be able to use advanced roles and permissions as well as version control to ensure the security and integrity of all your hard work.
Your web view keeps everyone in your organization in sync — from designers and engineers to marketers, product managers, executives, and other stakeholders — your entire team can benefit from your design system and stay on the same page.
When you log in, you’ll see a list of your organization’s design systems.
From here, you can create a design system, or click to open an existing one. DSM lets you create as many design systems as you need — to remain in step with your organization as it scales.
You’ll start on the Foundations Page of your design system.
The Foundations page is home to your documentation, colors, and typography — which are the main categories you’ll find on the sidebar — along with an Add Category button at the bottom to break things up further.
Within each Category, you can create as many Pages as you need to document your system foundations. Every page allows you to add detailed documentation with images and rich text.
Color and Typography pages allow you to add the styles contained within any Sketch Libraries uploaded to the system. You’ll be presented with a dialogue box to browse, select, and add assets to the page.
Once you’ve added assets, you’ll be able to manage and rearrange them from the table view that appears on the page. You can edit the name and description of each item — as well as drag to rearrange them — and use the X to delete assets individually.
Now let’s head to the Components page — which is where we organize and categorize any Sketch Library symbols uploaded to the design system.
Much like the Foundations page, you’re able to Add Categories as the top level of organization — like “Actions” for example.
Within a Category, the Add button will allow you to create a component page — or for a second level of organization, you can create a folder — like “Buttons” for example.
Within a folder, you’ll find the Add Page button to create a new component page — which will contain all the symbols, documentation, and code for a particular component.
Mousing over an existing Category, Folder, or Page displays a handle that you can drag to rearrange things — as well as an ellipse button that allows you to rename or delete things.
Within a component page you can choose to Add Components — and browse the symbols in your uploaded Sketch Libraries — to find and add all the appropriate assets to this particular component page. The search bar at the top makes it easy to jump straight to what you’re looking for. Choose Add Assets, and a table view of the selected symbols will be added to the Design tab — each of which can be clicked to open up for a more detailed view.
You can add links to any external component documentation from the Links tab — and even add additional tabs to embed live coded components using the DSM Storybook integration.
Prototypes and a variety of other external resources can be embedded as well.
When your Design System is ready to share, you’ll be able to use advanced roles and permissions as well as version control to ensure the security and integrity of all your hard work.
Your web view keeps everyone in your organization in sync — from designers and engineers to marketers, product managers, executives, and other stakeholders — your entire team can benefit from your design system and stay on the same page.