Uploading Sketch Libraries to DSM
Mastering InVision DSM
Tutorial Breakdown
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.
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.
Transcript
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.
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.