10 Free Sketch Plugins for Web Developers

Sketch is getting a lot of traction among web designers and developers. This is probably because it is intuitive, easy to learn and comes with many features that makes it a lot easier to create a website prototype. It may also be because this application is extensible i.e. you can add new features to the application easily with the help of plugins.

Here are 10 plugins that can help you to boost your productivity when working with Sketch. There are diverse, ranging from content generators, color palette selector, and they can help you to display layer measurements or automatically add padding to a layer.

1. CSS Buddy

CSS Buddy allows you to add the CSS to your layer in the Sketch workspace. Basically, you can apply width, height, opacity, box-shadow, border, and background to the layer using CSS.

With this plugin installed, just select a layer then select Apply to Selected from the plugin menu. A dialog will prompt you to enter your stylesheet. Add the CSS content without the CSS class and watch your layer take shape.

2. Material Design Color Palette

If you follow the trend of Material Design, a prominent thing you will notice is the use of distinctive colors. Material Design has an awesome color palette. Now you can bring that to your workspace with Material Design Color Palette Plugin.

This plugin will generate color palettes in seconds without you having to close your workspace. Choose Hue, Value, or Swatch to generate a color palette that is suitable for your project.

3. Sketch Notebook

Sometimes we need to show what we do in a comment or via documentation. If you are working on projects with other designers or a client’s involvement, this is also necessary so you can ensure that the outcome is what the everybody was aiming for.

Sketch Notebook is a plugin for documenting your design in Sketch with ease. It will add an additional sidebar to your workspace, which contains comments you add to any element on your design. You can reorder comment, realign, delete and toggle comment visibility.

4. Day Player

Before using real images in a design, we often use placeholder images to speed up the design process. For Sketch, you can use Day Player to add customized placeholders to any layer on your Sketch workspace from 6 placeholder image services including Placehold.it, LoremPixel and Unsplash. Once activated, you can set the image’s width, height, and other information.

5. Content Generator

We already have a plugin to insert placeholder images, how about one for general content? Content Generator helps you add dummy data such as avatars, names, geolocation data and more. Works great for mockup designs and for reducing headaches from trying to figure out how to generate data on the spot.

To add the dummy data, just select a layer, then select Plugin > Generator, and choose Geo, Persona or Photos.

6. Sketch Measure

Sketch Measure is a measurement tool for Sketch. It measures the length or size of a layer (or layers) in your design. You also get the padding and margin of a layer as well as the distance between two layers. Sketch Measure can also print the layer properties, such as color, border, and opacity. All measurements can be brought up via keyboard shortcuts.

7. Dynamic Button

Dynamic Button helps you create button with fixed paddings easily. It will automatically adjust the padding based on the value you give, no matter the length of your text. With the plugin installed, a text can be converted into a structure with the shortcut Command+J. The amount of padding required can then be punched in to the (0:0:0:0) text layer (under flex button group).

8. Typographic Scale

Typographic Scale is a plugin to turn selected text layer into typographic scale. To use this plugin, just select text layer (single or multiple), or mixed layer that contains at least one text layer, then select Plugin > Typographic Scale and adjust the value on the dialog. The result is a set of scaled text that follows the rules of typographic scale.

9. Modulizer

With Modulizer you can control the paddings for button, module, or areas on your design with the keyboard shortcut Shift + Command + M. You can combine all your layers, group it then use the shortcut to automatically adjust your padding based on the padding value you need. Watch the video demo to see this in action.

10. Blade

Have you ever thought about converting your design from sketch to HTML? If so, you probably should get Blade, a Sketch plugin that automatically generates HTML files from your design. It will convert group into div, text into p and so on.

When using Blade, you can tell the plugin what DOM element to generate by adding a special name to the layer, such as [btn] or input[text] so Blade knows what it should do. Check out this video demo for an inside look.