Syncing with your team’s Sketch Libraries
Mastering InVision DSM
Tutorial Breakdown
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.
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.
Transcript
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.
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.