Syncing with your team’s Sketch Libraries

Video Producer

Explore the possibilities of InVision DSM

Design System Manager - Learn

Building and managing a true design system over the long term requires a solution that includes version control, roles and permissions, documentation, and production-ready code. That’s why we redesigned InVision Design System Manager with an even deeper appreciation for maker and user workflows. The new experience empowers teams like yours to build, evolve, and scale [&hellip;]

Building and managing a true design system over the long term requires a solution that includes version control, roles and permissions, documentation, and production-ready code.
 
That’s why we redesigned InVision Design System Manager with an even deeper appreciation for maker and user workflows. The new experience empowers teams like yours to build, evolve, and scale with even greater creativity and speed.
 
InVision DSM allows you to create a single source of truth to keep your entire team empowered to design consistently and iterate quickly.

Why do I need DSM?

When teams work in silos, creating digital products that customers love, at a competitive pace, can be a challenge.
 
Building and managing a true design system over the long term requires a solution that includes version control, roles and permissions, documentation, and production-ready code.
 
That’s why we redesigned InVision Design System Manager with an even deeper appreciation for maker and user workflows. The new experience empowers teams like yours to build, evolve, and scale with even greater creativity and speed. 
 
InVision DSM allows you to create a single source of truth to keep your entire team empowered to design consistently and iterate quickly.
 
You create as many design systems as you need — for example, you can create one for your brand, one specifically for iOS components, and one for Android components.
 
You can create your first design system from the web, or from the DSM Sketch plugin. We’ll take a look at the Sketch plugin in the next video — let’s start on the web.
 
To create your first design system, head to invisionapp.com and log in — then choose DSM from the top navigation bar. The first time you access DSM, you’ll assign a name to your DSM Organization — and then create your first design system.
 
When creating a new design system, you can decide if everyone in your organization will have access – or only people who have been invited. We’ll take a closer look at the power and flexibility of design system permissions in a later video.
 
Give your design system a name — then, optionally add a thumbnail image and description — and click create.
 
You’ll find yourself in the web view for your design system — which we’ll take a closer look at shortly.
 
Next, let’s look at how to get your design system populated with content.

Populating your Design System with styles, colors, and components is as easy as uploading your existing Sketch Library files. Once uploaded, your DSM-based library can be added to Sketch by everyone on your team to start building from it immediately. The original working file uploaded to DSM will continue to be your working file for [&hellip;]

Populating your Design System with styles, colors, and components is as easy as uploading your existing Sketch Library files. Once uploaded, your DSM-based library can be added to Sketch by everyone on your team to start building from it immediately.
 
The original working file uploaded to DSM will continue to be your working file for any new changes. If your team already has a solution in place for sharing and making changes to your working file — like Google Drive, Dropbox, or even Abstract — it’ll be business as usual for continuing to edit those files.
 
Once your working file has evolved you can push the changes to DSM. Any designers working from the Draft will be notified in Sketch that there are new changes to the library — where they can review and decide if they’d like to pull the changes into their design documents.

Uploading Sketch Libraries to DSM

Populating your Design System with styles, colors, and components is as easy as uploading your existing Sketch Library files. 
First, you’ll need to download the DSM Sketch Plugin. It’s included as part of our free suite of plugins for Sketch, called Craft.
 
Once you’ve installed Craft, you can head to Sketch — and click “Sign in” on the new DSM panel just above the layer list. Enter your InVision account credentials and click “Sign in”.
 
If your organization is new to DSM, you’ll be prompted to create your first design system. Give it a name — then optionally add a description — and thumbnail image.
 
You can choose to restrict access to only people invited to this particular Design System — or keep it open to anyone at your organization. But don’t worry, you can always change these settings later.
 
Click create — and your new design system will appear in the Sketch plugin.
 
Now you’re ready to upload a Sketch library.
 
Start by opening the Sketch file you’d like to add to your design system. 
 
Next choose “Upload document” from the DSM panel above the layer’s list. 
 
The new DSM plugin will open and show you a list of all the design systems in your organization. You’ll find an upload icon next to each one — as well as an “Upload Sketch document” button if a design system doesn’t yet contain a Sketch library.
 
Click either one — and you’ll be prompted to confirm that you’d to upload to the draft version of this design system.
 
The draft is the version of a design system where editors and admins work on a system before releasing a public version. It always reflects the latest work in progress and it’s always where new changes go.
 
To learn more about version control and releasing new versions check out our video all about version control in DSM.
 
Click the upload icon to confirm — and your document will be prepared, then uploaded.
 
When it’s done, you’ll be able to click to view your system’s documentation site where your styles and components can be brought together with rich documentation and production-ready code.
 
This series also includes a great video on how to populate and customize your documentation site.
 
Your DSM-based library will automatically be added to Sketch so that you and your team can start building from it immediately. 
If the working file that you uploaded was already added to Sketch as a library, now’s the time to remove it. Just open the Sketch preferences — head to the Libraries tab — and find the copy of the library that doesn’t have (DSM) in the name. Press delete to remove it — and any design documents linked to it will automatically relink to the new DSM copy that was added after uploading to DSM.
 
Your original working file that you uploaded to DSM will continue to be your working file for any new changes. If your team already has a solution in place for making changes to your working file — like Google Drive, Dropbox, or even Abstract — it’ll be business as usual for continuing to edit those files.
 
In a pinch, you can also download a local copy of a Sketch library from DSM. Just open the DSM plugin — click to expand the system’s managed libraries — click the ellipsis icon next to the library — and then choose “Download local copy”.
 
Then, after making any changes to the downloaded Sketch file, you can follow the same steps from earlier to reupload the library to your design system.
 
Once your working file has evolved and you’re ready to upload the changes to DSM — you can click “Push Changes” from the DSM panel — or open the DSM plugin and click the upload icon again. 
 
Any designers working from the Draft will be notified in Sketch that there are new changes to the library — where they can review and decide if they’d like to pull the changes into their working file.
 
They’ll also be notified any time you release an official new version. To learn how to release versions to your team, check out our video on Version Control.
 
Next, let’s take a detailed look at how other members of your team can get connected to your new design system.

Getting Sketch in sync with your team’s existing design system via the new DSM plugin takes just a few simple steps. Once you’ve added a design system’s Sketch Libraries to Sketch, you can rest assured that you’re working from the same source of truth as the rest of your team.. When an admin or editor [&hellip;]

Getting Sketch in sync with your team’s existing design system via the new DSM plugin takes just a few simple steps. Once you’ve added a design system’s Sketch Libraries to Sketch, you can rest assured that you’re working from the same source of truth as the rest of your team..
 
When an admin or editor pushes new changes to a library you’re using, you’ll automatically be notified in Sketch. You can then review and pull changes into your design file by clicking the “Library Updates Available” notification in the top right corner of Sketch.
 
Using DSM in Sketch majorly helps developers too. When you use components from DSM, then use Craft Sync to upload to InVision Cloud for handoff, InVision Inspect mode shows developers which components belong to a design system. Selecting one of these components will show details and link them directly into your design system so they review documentation and even grab production-ready code.

Getting Sketch in sync with your team’s existing design system via the new DSM plugin takes just a few simple steps.
 
Once you’ve installed DSM and signed into your InVision account — you’ll find the DSM panel above the layer’s list — where you can click to open the plugin.
 
Here you’ll find a list of all the design systems in your organization — along with the version you’ll be syncing. 
 
The draft is the version of a design system where editors and admins work on a system before releasing a public version. It always reflects the latest work in progress and is always where the newest unofficial changes will be.
 
Clicking the version name will present the version history where you can switch to any version of the system released by your team.
 
With the appropriate version selected — click “Managed libraries” to reveal the Sketch Libraries contained within the system. Here you can click the plus sign to add each respective library to Sketch.
 
If you have a local copy of the same document already added to Sketch as a library, now’s the time to remove it. Just open the Sketch preferences — head to the Libraries tab — and find the copy of the library that doesn’t have (DSM) in the name. Press delete to remove it — and any design documents linked to it will automatically relink to the new DSM copy.
 
At times, you may be tempted to open the newly linked Sketch Library to make changes, but consider this off limits since that file is being managed by DSM. 
 
Edits come from a more formal process where an admin or editor uploads the working file of the Sketch Library. Check out the previous video to learn more about how that works.
 
If you happen to be working from the draft version, you will be notified in Sketch any time there are new changes to the library. You can then review and pull changes into your design file by clicking the “Library Updates Available” notification in the top right corner of Sketch.
 
You’ll also be notified in the DSM panel any time your team releases an official new version. You can click to to review the release notes — then click to switch to the latest version. If the latest version syncs any new changes to your Sketch libraries, you’ll again see the “Library Updates Available” notification in the top right corner of Sketch where you can review and pull the changes into your design file.
 
Using DSM in Sketch majorly helps developers too. When you use components from DSM — and then use Craft Sync to upload to InVision Cloud for handoff — Inspect mode shows developers which components belong to a design system. Selecting one of these components will show details and link them directly into your design system so they review documentation — and even grab production-ready code.

For teams to effectively collaborate, they need a way to maintain the integrity of the system as different types of people access it. Roles and permissions are built into DSM at both the organization and design system level — so there is complete control over who can view or edit each design system within the [&hellip;]

For teams to effectively collaborate, they need a way to maintain the integrity of the system as different types of people access it. Roles and permissions are built into DSM at both the organization and design system level — so there is complete control over who can view or edit each design system within the organization.
 
DSM has three organization and design system level roles; Admin, Editor, and Viewer.
 
Thoughtfully spreading those roles across your team will immediately improve consistency and eliminate confusion. It’s not magic. It’s management.

Managing roles and permissions

For teams to effectively collaborate, they need a way to maintain the integrity of the system as different types of people access it. Roles and permissions are built into DSM at both the organization and design system level — so there is complete control over who can view or edit each design system within the organization.
 
DSM has three organization level roles. Administrator, Editor, and Viewer.
 
A DSM Organization Admin can manage the organization by logging in to DSM on the web — then choosing People from the left hand side of the screen. 
 
From here, an Admin can add and remove members — and can also change their roles.
 
If your team is on an InVision Enterprise account, an Admin can open access to anyone on your account — or restrict access to only people who are invited to your DSM organization. 
 
It’s important to note that for Enterprise accounts, only members of your InVision Enterprise account can be invited to join the DSM organization.
 
An Organization Admin can also view and edit all design systems in the organization from the design systems screen — as well as create new ones.
 
Members and permissions can also be managed at the individual design system level. To manage membership of a specific design system — open it — and click share in the bottom right corner.
 
By default, anyone in your DSM organization can access a new design system, but there are three privacy settings which you can use to determine who has access.
 
Click Settings to toggle between anyone in your DSM organization having access — only people invited to this specific design system — or opening it up to everyone who has a DSM share link, including anonymous users. These anonymous users can view the design system on the web, but not use it via the DSM Sketch plugin.
 
Let’s look at how to manage specific members by switching to “People Invited”. Click Save — and you can now type to invite members of your organization to this specific design system. Click Invite, and the selected members will be added— and automatically inherit their Organization-level roles — which can then be edited by an Admin.
 
Design system Administrators can change the System’s privacy settings, invite members of the organization to the design system, set roles for design system members, and of course edit the content of the design system itself.
 
Members in the design system Editor role can also invite members of the DSM organization to the design system — as well as edit the design system.
 
The Viewer role on the other hand can only view the content of the design system.
 
It’s also worth noting that DSM organization admins are also admins of all design systems in the organization, independently of the individual system’s privacy settings.

As your libraries grow and evolve over time, keeping track of changes as well as what’s current can become a critical challenge. That’s why we’ve equipped DSM with some of the most powerful versioning features you’ll find in a design system platform. As the system matures, it’s common for teams to work from an official [&hellip;]

As your libraries grow and evolve over time, keeping track of changes as well as what’s current can become a critical challenge. That’s why we’ve equipped DSM with some of the most powerful versioning features you’ll find in a design system platform.
 
As the system matures, it’s common for teams to work from an official release version, that’s separate from the Draft — until it’s time to release the next new version and so on.
 
Versioning keeps your team moving forward and allows for agility and predictability at scale — without risk or compromise.
 
Let’s look at versioning in DSM works.

Version control

As your libraries grow and evolve over time, keeping track of changes as well as what’s current can become a critical challenge. That’s why we’ve equipped DSM with some of the most powerful versioning features you’ll find in a design system platform.
 
Let’s look at versioning in DSM works.
 
As an Editor or Admin, any new changes to the system live in a staging environment called the Draft. Changes to the draft are immediately available to people viewing the Draft on the web — as well as any designers working with the Draft in Sketch.
 
Members of your team may spend more time in the Draft when your team is small, and when the frequency of changes is high, typically at the initial phases of setting up a new design system.
 
As the system matures, it’s common for teams to work from an official release version, that’s separate from the Draft — until it’s time to release the next new version and so on. 
 
You can release a new version of your system at any time from the web — or from the Sketch plugin — by clicking “Release new version”. 
 
This launches a web page to give the new version a name and add context about what’s changed in this version — when you’re ready, click “Release version” and you’re done.
 
Everyone with access to the design system will be notified that a new version is available — and can choose to switch to it immediately.
 
Designers can easily switch or roll back versions at any time from the Version History tab of the sketch plugin. This updates the Sketch Libraries associated with the design system — so Sketch will allow you to decide if you want these changes to apply to any existing documents.
 
Admins and Editors can continue iterating and evolving within the Draft — without concerning the rest of the team with every little unofficial change.
 
To manage the version history and track changes from the web, you can click the current version name in the top left corner — then choose “Version history”.
 
From the ellipses next to a version name — you’ll be able to view — or revert to that version.
 
Before doing so, you can also click to compare any changes made from the previous version. Here you’ll find a visual summary of any items added, removed, or changed in the design system.
 
Versioning keeps your team moving forward and allows for agility and predictability at scale — without risk or compromise.

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 [&hellip;]

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.

View and manage your design system from the web

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.

Once your DSM design system is live on the web, you can customize its appearance to be cohesive with your brand. With a richer, more flexible web experience, the new DSM allows you to customize the web view of your design system with your own brand logos and colors. In just a few steps, your [&hellip;]

Once your DSM design system is live on the web, you can customize its appearance to be cohesive with your brand.
 
With a richer, more flexible web experience, the new DSM allows you to customize the web view of your design system with your own brand logos and colors.
 
In just a few steps, your entire web view will look and feel like it was created by you from the ground up.

Branding your design system documentation site

Once your DSM design system is live on the web, you can customize its appearance to be cohesive with your brand.
 
With a richer, more flexible web experience, the new DSM allows you to customize the web view of your design system with your own brand logos and colors.
 
To edit the look and feel of a system, click the gear icon in the bottom right corner, next to the share button — and click Customize theme.
 
From here you can edit the text, background, and border colors of the Top navigation, Sidebar, and Main content.
 
If you go a little too crazy, you can always Reset styles back to their default.
 
You can also brand your system with a logo by uploading a custom jpg or png.
 
Click save — and your branded web view is officially live!

With our new DSM integration in Inspect, we’ve built an even more powerful experience for developers by bringing DSM data directly inside Inspect. With the ability to link directly to live code and view details like usage guidelines and external resources, we’re giving developers the information they need to build better, more consistent products — [&hellip;]


With our new DSM integration in Inspect, we’ve built an even more powerful experience for developers by bringing DSM data directly inside Inspect. With the ability to link directly to live code and view details like usage guidelines and external resources, we’re giving developers the information they need to build better, more consistent products — faster.
    

Using the Inspect DSM integration

Many developers turn to InVision Inspect to work more seamlessly with their designers — grabbing colors, generating code snippets, and measuring design elements on the fly.
 
Until now, developers who relied on Inspect to identify specific properties, may not realize the component already exists in a design system. Which often means wasting time by rebuilding existing components — and ending up with a bunch of mismatched variations.
 
With our Inspect DSM integration, we’ve built an even more powerful Inspect experience for developers by bringing DSM data directly in Inspect — so developers can easily identify what's already in the system.
 
It starts with building your design files using symbols from your DSM Sketch Libraries.
 
Then, when you publish to InVision Cloud using Craft sync, InVision will automatically retain the relationship between the symbols on the design canvas — and the respective components in DSM.
 
From an InVision share link, developers can navigate to Inspect.
 
On the layers list on the left hand side, DSM components display in purple to visually set them apart.
 
Select a component and you’ll find the new DSM panel on the Inspector on the right.
 
Here you’ll see the name of the library the selected component lives in — followed by a link to the component page in DSM.
 
If code is populated in DSM, the respective links to React, Vue, Angular, and HTML will populate.
 
And any additional external links that exist within DSM will populate below — so developers can access relevant documentation that lives outside of DSM.
 
Clicking a code link brings you directly to the DSM component in the web view for that Library.
 
Here you’ll see a preview of your live component — along with all the add-ons configured in Storybook. As you toggle or edit knobs, the code snippet below will auto-update in real time — so a developer can grab it, and start building.
 
With the ability to link directly to live code and view details like usage guidelines and external resources, we’re giving developers the information they need to build better, more consistent products — faster.

Live Components in DSM create a single source of truth across design and development, bringing design patterns, coded components, and the documentation that ties them together – all in one view. With code published to DSM, a preview of your live component will populate — along with all add-ons configured in Storybook.

Setting up Storybook in DSM

Historically, design patterns, coded components, and documentation have existed in three separate repositories — creating a divide between design and development.
 
Live Components in DSM create a true single source of truth, bringing design patterns, coded components, and the documentation that ties them together – all in one view.
 
Live Components work with Storybook — supporting frameworks like Angular, React, Vue, and HTML.
 
For a developer, setting up the integration is straightforward. We’ve put together detailed, step by step documentation to walk you through it.
 
Once you’ve set up the integration, you’ll be ready to connect components in DSM to your Stories in Storybook.
 
A component page on your DSM documentation site contains each variation and state of a particular component. To learn more about building component pages, we have a detailed video on viewing and managing your design system from the web.
 
At the top of a component page, you’ll find the option to add a tab — where you can then choose “Code” — then choose a Framework. Down below, you’ll find a component container ID to link a Storybook story to this component page.
 
Once your stories in Storybook are connected, pushing updates to DSM is as simple as a one-line command.
 
With code published to DSM, a preview of your live component will populate — along with all add-ons configured in Storybook.
 
As you toggle or edit knobs, the preview — as well as the code snippet below will auto-update in real time.
 
In addition to pulling in components from Storybook, you can also create additional tabs.
 
Creating a Documentation Tab gives you a place to capture usage guidelines or other documentation for a component.
 
A Prototype Tab let’s you embed an entire InVision prototype to display a component’s usage in context. You can even switch to inspect mode without leaving DSM.
 
You can also add a tab to embed live components from an external code environment like CodePen and a few other services.
 
To reference any other code repositories or libraries, you can add any custom URL to the Links Tab — so the flexibility really is limitless.
 
And when you publish a prototype using Craft Sync — your DSM components, their specs, and your production-ready code — all come together in Inspect. So devs have direct access to your real code repositories — directly within the context of design.

Sign up, free

Sign in

InVisionApp, Inc.

Freehand

Prototype

See all customer stories

100% of the Fortune 100 collaborate with InVision.

Company

Blog

Insights

Films

Events

Resources

By using InVision brand assets you agree to follow our guidelines packaged with the media kit. For further information about use of the InVision brand assets, please contact support@invisionapp.com.

Branding your design system documentation site

Tutorial Breakdown

Transcript

Transformative collaboration for all the work you do
Learn more about Freehand

Branding your design system documentation site

Tutorial Breakdown

Transcript

Transformative collaboration for all the work you doLearn more about Freehand

Transformative collaboration for all the work you do
Learn more about Freehand