Sketch App Universe — Tools, Plugins, Services, and Resources that saves your time
In the beginning, there was darkness, then came Sketch app and revolutionized the way we create apps and websites. If we would compare the designer’s toolkit to the Solar System, Sketch will be the Sun — central point of our work that binds other services and resources together. Let’s discover all of the “planets and satellites,” so we will be able to explore the Universe of Digital Design.
Why to use additional plugins and resources?
This may sound not so obvious because Sketch is an excellent tool by itself, but you can boost your workflow with resources prepared by the community.
When I decided to build Prime Design System Kit I knew that the project is big and it will take quite a long time. Then I reminded the Abraham Lincoln quote: “Give me six hours to chop down a tree, and I will spend the first four sharpening the axe.” I decided to find the additional tools that will help me achieve the goal.
I searched and discovered many handy Sketch plugins and services. Many of them speed up the design process a lot. Now I would like to share with you my findings and show you how they may improve design workflow.
”Give me six hours to chop down a tree, and I will spend the first four sharpening the axe.”
— Abraham Lincoln
Let’s begin with some useful services!
💻 Services:
1. Zero Height — This service helps to build Design System Documentation. You can start using it for free, but for more advanced options there are Team and Company plans.
2. Abstract — The next a handy tool for Sketch. It is a version control system for design files. Very useful! Forget about “my_design_v3_final_09.sketch” naming convention — with Abstract you can manage versions of all sketch files like a real pro.
3. Plant — The next version control for Designers.
has got a free plan. The tool is very simple to use, and the file management is intuitive.
4. Specify — The upcoming solution. It has got GORGEOUS website illustrations made in 3D. This may be a the thing for Design Systems. Specify will contain Dynamic libraries for styles and assets, continuous delivery system and an atomic hand-off focused on components.
5. Zeplin — In a few words — Design Handoff. Very useful for everyone involved in product development. You Export artboards — Developers, get specification with design assets immediately. You can also collaborate and comment designs directly in
.
6. Sympli — thanks to this workflow and collaboration platform you can make life of designers and developers easier. Sympli includes version control, design handoff and team collaboration modules. What is interesting it integrates with software development tools like Xcode or Android Studio.
🔌 Plugins
1. Rename It — This is the plugin that helps you keep your Sketch files organized, batch rename layers and artboards. You can find and replace the layer or artboard names. You may also use advanced options to add layer width, height, order them alphabetically or create a numeric sequence. What is more, you can convert names to title case, lower case and many more things.
2. Symbol Organizer — The plugin helps you organize Symbols page. Symbol Organizer groups symbols based on their names into vertical and horizontal lists. The basic configuration is easy and has got multiple more advanced options that enable you to prepare a convenient and readable symbol list.
3. Sketch Runner — Runner is one of the most popular plugins for Sketch, and it has to be mentioned here. It simply speeds up your Sketch workflow. You can run plugin, action or even find and insert symbols with it.
4. Style Master — You can rename all or parts of your Shared Styles at once. Style Master lets you also use the regular expressions to change the architecture of your Shared Styles.
5. Unused Style Remover — It simply removes unused text and layer styles. Sounds like a tiny thing, but makes a lot of changes in the project!
Note: If you use something like Design System Kit remember to set up the library first. Premium Library Kits allows you to configure your UI Component Library quickly thanks to multiple predefined styles inside them, so do not remove them too early.
6. Sketch Symbols Manager — Helps to move and rename symbols in a very friendly way. You manage symbols like files and folders in Finder.
7. Sketch Text Styles Manager — This one is similar to the previously mentioned plugin. It helps to move and rename Text Styles with the user-friendly interface.
8. Sketch Layer Styles Manager — Sketch Layer Styles Manager is also similar to the two previously mentioned plugins. Helps to move and rename Layer Styles.
9. Sketch Palette — Tiny but clever one. Thanks to the plugin you can save or upload colors and gradients into the Sketch.
10. Anima Toolkit — This is a very popular and advanced plugin.
Toolkit is has got many features — like Layout management, prototyping or collaboration features like design specs. It may really change the way you design in Sketch.
11. Sketch Measure — Prepare design handoff directly in Sketch. Very convenient tool to make design specs and export them into an HTML file.
12. InVision Craft + DSM — Craft includes lots of additional features. For example, it helps to generate prototypes, design handoff to
services. It is combined with a service “Design System Manager” that helps to build living Design System documentation.
13. Move to Library — The plugin moves symbols (all or selected ones) to the library. At first, you may think that it is the plugin that may not be used so often. But, if you accidentally created a symbol in your Sketch file. It will help you move the element to the Design System UI Library within a few clicks.
14. Sketch Automate — This is a self-describing name. Automate has got so many features that automate the design process… you have to try it by yourself!
15. Envato Elements — Plugin let’s you browse content from Envato website and import them directly to your Sketch file. If you use UI kits in your projects this is a real time saver!
🎨 Design Resources
There are thousands of great resources. The most comprehensive directory for them is Sketch App Sources. Lots of them are a great source of inspiration the other has got useful components. I want to focus on the ones who help to save hours of work during the design process.
Note: To keep things clear — some of the mentioned resources I use (Prime, SQUID, and UI Motion Specs Template) are also the ones I made.
1. Prime Design System Kit — This UI Framework for Sketch is the set of Libraries that contains not only hundreds UI Elements but also things like charts, vector device templates and for the first time in this category of product — Illustration System. Prime helps you to configure your own UI Library for Design System efficiently. It contains UI Kit with over 40 elements that may be used to create mobile or web design within minutes. For more details see Quick Start Guide.
2. SQUID User Flow Template — Thanks to this design resource you will quickly create User Flows directly in Sketch to present process or the idea. If you combine the usage with Sketch Runner, this is probably the most efficient method of User Flows creation. To see SQUID in action read this article.
3. UI Motion Specs Template — Sketch file that allows you to describe motion in a way that is understandable for developers. This can save some hours of iteration during motion implementation. Read more about the idea.
4. Angle — The Resource from
founder of DesignCode.io. If you need more advanced device mockups, this is the best choice. You can customize them because all collection is made as vector shapes.
5. Streamline — Great set of icons made by
. It is one of the most comprehensive collection of icons. Symbols are available for multiple formats. There are the outline and filled icon options.
6. Frrames — The finest mockups need great presentation. If you create web or desktop apps, this is the kit for you. The wide choice of mockups: browsers like Chrome, Safari, Firefox, tools like Sketch. There are also templates for Mobile. This may save a few hours of work when you prepare the design showcase.
To conclude
Plugins, Services and Design Resources give Sketch extra Superpowers. The community around the Sketch has built the Universe of tools that help to save many work hours.
Please let me know if you use these tools? Maybe you have other ones to speed up Sketch workflow? Let me know in comments!
By the way…
If you plan to start a new project soon or to organize your UI Library — do not waste your time creating everything from scratch. Feel free to use the Prime — Design System Kit. See Prime in action.
To make it easier there is a gift 🎁 Use MEDIUM10 offer code to get 10% Off.
You can also Create User Flows faster in Sketch — With SQUID you can create User Flows directly in Sketch the sketch file with your artboards. Everything may be done within a couple of clicks. See how it works.
👉 Join Newsletter @ UXMisfit.com (and get some discounts for mentioned UX resources)
This Story is an extension to my article published on UXMisfit.com.
