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 > Upload assets.

Add Assets

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

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.

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.

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.

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.

Icons

Create a new group in “Icons”;

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

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 also directly access and reuse assets of 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

In this guide, we'll learn how you can use this plugin to import your Sketch Libraries into Mockplus, and see how you can access and reuse the shared Libraries through the plugin.

Download and Install

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 Plugin

Once you've installed it, you can start the plugin by heading to Plugins > Mockplus > Design Systems > Upload 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 Project to 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.

Enable Libraries

After a Sketch Library is imported, it will appear in the plugin for both you and your teammates. You can decide whether to "Enable" it or not.

If you choose not to enable it, an "Import" button will be displayed.
If you choose to enable it, the button will change to "Enabled," and the Library will also be checked in Sketch's component libraries, making it available for use in Sketch.

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 the Library immediately when opening the plugin. They can choose to enable or update it into their Sketch component libraries for quick reuse. No need to click any Share button.

Mockplus Cloud

Mockplus RP

Mockplus DT

Mockplus DS

Mockplus Cloud Plugins

Mockplus Apps