Tutorial / Mockplus Cloud / Design System / Design Tool Integration

Design Tool Integration

Import Design Assets from Sketch

Our Sketch plugin is a powerful tool that helps to streamline your entire product design workflow by pulling your design files, assets and Libraries from Sketch into Mockplus, and check whether your design files match with the selected design system, all in one plugin.
In this guide, we'll learn how you can use this plugin to import your Sketch assets to create, maintain and evolve your design system with your team in Mockplus.

You may also learn how to use this Sketch plugin to: 

Download and Install the Sketch Plugin

Download and install the Sketch plugin first.

Start Sketch Plugin

After installing the plugin, start the plugin by heading to Plugins > Mockplus > Design systems > Export assets.

Add Assets

After starting the plugin, you can add the following Sketch assets to your online libraries in a few clicks:

Add Colors

Create a new group in the "Colors" category;

Select a color layer in Sketch and click the "+" icon at the top right corner of the plugin.

Add Texts

Select a text layer in Sketch and switch to the "Texts" category in the plugin;

Click the "+" icon at the top right corner of the plugin.

Add Layer Styles

Create a new group in the "Layer Styles" category;

Select a layer with style effects in Sketch (such as blurs and shadows) and click the "+" icon at the top right corner of the plugin.

If you try to add the same layer again, you will be asked whether you want to cover it.

Add Components

Create a new group in “Components”;

Select a component, such as a button in Sketch and click the "+" icon at the top right corner of the plugin.

Add Icons

Create a new group in “Icons”;

Select an icon in Sketch and click the "+" icon at the top right corner of the plugin.

Add Images

Create a new group in “Images”;

Select an image in Sketch and click the "+" icon at the top right corner of the plugin.

Reuse Assets in Sketch

With the plugin, you can import assets to Mockplus Design System libraries and directly access and reuse assets stored in Mockplus DS libraries in Sketch.

Apply Colors

Select a layer in Sketch;

Switch category to "Colors" in the plugin and click on a desired color to apply it to the layer.

Switch Color Modes

Hover over a color, the default color mode HEX and a right arrow will appear;

Click the arrow to switch between color modes (choose from HEX, AHEX, HEXA, HSLA and RGBA).

Copy Color Value

To copy the color value, click the value below the default color mode.

Apply Layer Styles

Select a layer in Sketch;

Switch category to "Layer Styles" in the plugin and click on a desired layer style to apply it to the layer.

Reuse Components

Switch category to "Components" in the plugin;

Drag and drop a component to any desired position to reuse it in Sketch.

Reuse Icons

Switch category to “Icons” in the plugin;

Drag and drop an icon to any desired position to reuse it in Sketch.

Reuse Images

Switch category to “Images” in the plugin;

Drag and drop an image to any desired position to reuse it in Sketch.


Import Sketch Libraries 

With our Sketch plugin, you can easily import your design files, assets, and Libraries from Sketch into Mockplus to streamline your product design workflow.
In this guide, we'll learn how you can use this plugin to import your Sketch Libraries to create, maintain and evolve your design system with your team in Mockplus, and see how you can access and reuse the shared Libraries through the plugin.

Download and Install the Sketch Plugin

Download and install the Sketch plugin first.

Note: To import all design files, assets and Libraries into Mockplus, please first update to the latest version of our Sketch plugin.

Start the Sketch Plugin

Once you've installed it, you can start the plugin by heading to Plugins > Mockplus > Design Systems > Export Libraries.

Upload Sketch Libraries 

When you've created a Library that contains all your frequently used Symbols, Text Styles, Color Variables and other assets, upload it to Mockplus as follows:
  • Open the Library you want to upload in Sketch

  • Click Upload Library on the plugin 

Mockplus will create a new Library Projectto hold all your assets in that Sketch Library document on the web after the upload.You may give the project a new name or directly use the Library name to manage it in Mockplus better.

Update Libraries

Updating libraries is done differently in both Sketch and Mockplus, and you need to sync changes in the following way:
  • When you updated the Library in Sketch: 

Sync the changes to Mockplus by clicking Update Library on the plugin.You may also directly upload the updated Library as a new Library.


When you updated the Library in Mockplus: 
  • Start the plugin in Sketch and the Update button will become clickable 

  • Click the button to update the corresponding Library in Sketch as well

Share and Reuse Libraries

When one of your team members has uploaded a Library into Mockplus, other team members will be able to see, reuse and update the Library to their Sketch Libraries immediately when opening the plugin. No need to click any Share button.


To reuse the Library in Sketch, click Enable on the plugin and the Library will also become enabled in Sketch instantly.