Sketch is getting a lot of popularity among web designers and developers. The main reasons behind that is; first and foremost, it is cost efficient; and then it is user friendly and easy to learn as compared to photoshop and comes with many features that makes it considerable to create a website prototype. With time, technology has emerged into a juggernaut of a field with a wide combination of profound progressions, for instance, the conversion from Sketch to HTML. Sketch is absolutely extensible app. You can add new features to it with the help of plugins.
Here are 10 Best plugins that can enhance your productivity using Sketch app. There are differing, color palette selector, ranging from content generators, and they can help you to show layer estimations or consequently add padding to a layer.
- Content Generator:
Although, we already have a plugin to insert placeholder images, but what about when it comes to general content? Content Generator is a Sketch app plugin for generating dummy data such as avatars, photos, names, geo data etc. It works great for mockup designs and for minimizing stress from trying to figure out how to fetch data on the spot.
That’s how you can add dummy data: Select a layer, Select Plugin > Generator, and choose Geo, Persona or Photos.
- Dynamic Button:
Dynamic button plug-in for Sketch app allows to create buttons with fixed paddings no matter what text you add. regardless of the length of your content, it will automatically adjust the padding based on the value you give. You can firstly create a structure manually and then use plug-in or create text layer and then make a structure automatically using shortcut Command + J. After you can see a group “flexible button” with text layer (0:0:0:0) and background (‘BG’).
- CSS Buddy:
CSS Buddy is a Sketch 3 plugin that allows you to use CSS on layers. Fundamentally, you can apply, height, width, opacity, border, box-shadow and background to the layer using CSS.
By installing this plugin, once you install the plugin just select a layer on your canvas and run Apply to Selected or press Command + Shift + A. A text dialogue will prompt you to enter in CSS.
- Sketch Notebook:
In some cases, we have to indicate what we do in a comment or by means of documentation. if you are working on projects with different designers or a customer’s association, this is likewise important so you can guarantee that the result is the thing that the everyone was going for.
Sketch Notebook is a plugin used for documenting your design in Sketch easily. It will add an extra sidebar to your work space, that contains comments you add to any element on your design. You can reorder comment, delete, realign, and toggle comment perceivability.
If you follow the pattern of Material Design, a notable thing you will see is the use of particular colors. Material Design has a marvelous color palette. Now you can bring that to your workspace with Material Design Color Palette Plugin.
Sketch app plugin for displaying Google Material Design color palette. Choose Hue(Ctrl+Shift+H), Value(Ctrl+Shift+V), or Swatch(Ctrl+Shift+S) to generate a color palette that is feasible for your project.
- Blade:
Have you at any point considered changing over your plan from Sketch to HTML? Assuming this is the case, you most likely ought to get Blade. it is a Sketch module that naturally produces HTML files from your design. It will convert group into div, text into p and so on.
Blade is a Sketch 3 plugin for automatically generating HTML. It generates tag <div> for group, tag <p> for text, etc. When using Blade, you can advise the plugin what DOM element to create by adding a special name to the layer, for example, [btn] or input[text] so Blade comprehends what it ought to do.
- Typographic Scale:
Typographic Scale is a plugin to transform selected content layer into typographic scale. To utilize this plugin, simply select content layer (single or multiple), or mixed layer that contains no less than one content layer, at that point select Plugin > Typographic Scale and adjust the value on the dialog. . The outcome is an arrangement of scaled content that follows the rules of typographic scale.
- Sketch Measure:
Sketch Measure is an estimation tool for Sketch. It measures the length or size of a layer (or layers) in your design. You additionally get the padding and edge of a layer and the distance between two layers. Sketch Measure can likewise print the layer properties, for example, opacity, border, and color. All measurements can be raised by means of keyboard shortcuts.
- Day Player:
A Sketch Plugin for creating placeholder images from online services allowing you to insert customized placeholder images into any Sketch document from a number of different placeholder image services such as unsplash.it, placehold.it, fillmurray.com, placecage.com, placekitten.com.
To use it, open a new or existing Sketch document, Plugins > Day Player > Service, Update the options to your liking, OK/Enter, the image is created on the canvas.
- Modulizer:
This plug-in for Sketch allows easy control paddings for buttons, modules and areas. If your module has background you can set fixed paddings and easy restore it for any content changes. With this plug-in, you can control the paddings for button, module, or areas on your design with the keyboard shortcut Shift + Command + M.
To use Modulizer, following steps should be followed:
Create a background element: Draw a rectangle 1 for your background element.
Create your content: Content can be a single element (like a text box) or a group of elements. (Text boxes, rectangles, or any other group of elements.) Modulizer is smart enough to base the padding off of whichever element is on the bottom, so ensure that all of your other elements are arranged in front of your background element.
Run the Plugin: Highlight the content and background and ⌘⇧M.
Enter your settings: The window accepts pixel values in the same order as CSS.
Modifying settings: ⌃⌘⇧M lets you set new values. Alternatively, you can rename the background layer with your desired padding values and rerun ⌘⇧M.
You can also use an ellipse, but it doesn’t work well with a perfect circle on a rectangular element. For most consistent results, use a rectangle.
