Top Sketch Plug-ins to Improve your Workflow

It is in the past few years that most of the top sketch plug-ins arrived on the scene and made our lives simpler and fun because of their many uses. It offers some great plug-ins, despite of being a very young application. Plugins and the incredible community that develop them are a huge part of what makes Sketch great.

If you’re a regular Sketch user you probably use at least a couple of plugins everyday. Whether you need help creating awesome animations, adding data visualizations to your interfaces or simply managing your components, Sketch’s expansive plugin ecosystem has a tool to help.

In this post, we will be discussing 7 of the top sketch plug-ins that can make your workflow much easier and faster than before:

Top Sketch Plug-ins-

1. Runner

Runner speed up Sketch workflow.

Runner is a top sketch plug-in, highly searched & especially designed for Sketch. Once you have download the Runner app, then double click on the plugin file and everything will be done automatically.

In the Sketch toolbox, Runner is the most frequently used plugin because it has some new features-  Plugins > Runner > Run…  with shortcut key commands ⌘ + ‘ which will run Runner.

You can run these commands directly from your keyboard.

• Run everything
• Jump anywhere
• Insert symbols
• Create styles and symbols
• Apply styles
• Install plugins

Essentially, Runner is a plugin for the design tool sketch and it helps you to work with your Sketch faster by providing you a spontaneous interface to upgrade your daily workflow.

2. Prism

This top sketch plug-in is used for color sharing made easy. Prism Plugins makes it easy to generate and share a color palette from your design.

With the help of a Prism plugin, you can create beautiful artboard with all the colors in your Document Colors and to export your document color into a variety of color palettes.

This plugin is so incredible because of color changing feature in different formats in another way to improve your workflow as well as productivity.

Procedure- Firstly, you need to add color into document color, then you can use its shortcut key control ^ + command ⌘ + C to show beautiful palettes.

It has different features such as-

• Fully customizable.
• Formation of beautiful palettes.
• Automatic color naming.
• Convey code in different formats (CSS, SASS, Swift, etc.)

3. Anima

Anima app is a Design to Code animation. Anima is an all-in-one plugin that is constructed to help you create responsive layouts with pins, stacks and padding, and high-fidelity prototypes that fit all screens.

High-fidelity prototypes

The fidelity of the prototype refers to the level of details and functionality built into a prototype. In this sense, a high-fidelity (sometimes referred to as high-fi or hi-fi) prototype is a computer-based interactive representation of the product in its closest resemblance to the final design in terms of details and functionality.

Anima is a very useful plugin for coders, with the use of Anima you can create a constraint-based layout just like coder does. You can also create the preview of multiple resolutions at once.

Generally, it is used for animation because all your creation, animations to interaction are saved right into your Sketch file.

4. Paddy

These plugins work for creating Automated Padding, Spacing, and Alignment for your Sketch plugin. Usually, Paddy plugins are used to set automatic padding and spacing for elements, so it’s a nice way to start creating layers equally and fit in the body of these elements.

Once you install the Paddy Plugin then you select some text on your artboard to go to plugin>Paddy>Enter padding for selection.

With the use of Paddy, you can automatically create a background rectangle, sized the same size as you wanted. But the interesting part is when you modify or change the text, the background rectangle will contain the same measurements which you set back.

If we take an example of the chat interface then these plugins are helpful like designing the chat bubble and adjusting the rectangular corner radius.

5. Rename It

Keep your Sketch files organized, batch rename layers, and artboards. Basically the working of Rename it describes sequentially rename a layer in sketch either in ascending and descending order or add the width or height of the layer.

Features:

• Add Name: Type “+” and the text to add at the end of the layer name (e.g., + button).
• Sequence: Type “%N” to name layer in sequence. You can also use “%n” for reverse order. The more Ns you add the more digits it will add (e.g, Item %NN).
• Move Original Text: Type “*” to keep the original anywhere in the new name (e.g., Option * icon).
• Add Width and Height: Type “%w” or “%h” to add the width or height of the layer (e.g., Icon %w x %h).

Keywords:

• %n Ascending numbered sequence
• %N Descending numbered sequence
• %A Alphabet sequence

Pro-Tip:

• %nn This will output 01, 02, 03 and so on
• %a Lowercase alphabet sequence

6. Find and replace

This plugin finds text in selected layer(s) and all layers contained within – and replaces it with different text. Now updated to do partial, case sensitive, and full-document matching.

Find and replace plugins are generally a way for replacing the previously fed data in the database by your own data and also it helps in the database backup and we can also restore that data if necessary.

This top sketch Plug-ins also have features like time-based search and replace support. Replacing content without making changes to the WordPress database, rule management like system export-import rules, and much more. It can also support HTML search and replace within the content of our site pages.

It is used in 3 ways-

• You can access it from the menu Plugins -> Find And Replace -> Find and Replace
• On the other hand, you can use a keyboard shortcut key cmd + shift + f.
•  If you have an extremely complex document and set the scope to the entire document, it might take a few seconds longer to process it all. Don’t panic if you get a beach ball, it hasn’t crashed Sketch, it just has to go through every layer in every artboard in every page and do a comparison.

7. ImageOptim

Imageoptim automatically compresses images exported from sketch. The main function of this plug-in is the image optimization in a sketch. It is a free and open-source plugin and it requires only the Imageoptim app to be installed.

Any designer who needs to loading times and image optimization they can add this Imageoptim feature to their toolbox. Since a few years, the Imageoptim has been contributing an ultimate courtesy as a Sketch plugin.

This top sketch plug-in uses two methods for asset compression.

• Automatically, whenever you export an asset from Sketch using the File › Export… menu option or the Export button in the toolbar.

• When you choose the Plugins › ImageOptim › Export and Optimize All Assets… menu option. You’ll be asked for a path where your assets will be exported, and then the plugin will export every exportable layer from your document, and run the assets through ImageOptim.

Please note that both methods won’t block Sketch’s UI when running, so you’ll be able to keep on working while the compressors run. Compression will be done in a separate ImageOptim app. You can switch to the ImageOptim app to see progress and compression results.

We hope you find these top sketch plug-ins list useful !