Tutorial > Mockplus Cloud > Design System > Design Tool Integration

Design Tool Integration

Download Sketch Plugin for Mockplus DS

In Sketch, you can easily add any assets to your design system libraries on the web using our Sketch plugin.

Download and install the Sketch plugin first.

And then, open your Sketch app and start the plugin in this path: Plugins> Mockplus DS.

Add Assets to Libraries

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.


Previous Logic Line