Sketch Tutorials
Sketch Tools for Managing a Design System 2
List of useful tricks to overcome software limitations and better operate your favorite assets.
This article is dedicated to techniques whom I discovered in the process of creating new products for Buninux.com.
Plugins have become an integral part of the designer’s workflow allowing to close numerous gaps by combining multiple plugins into a single workflow for managing libraries and assets.
New extensions come out very often, so I would like to consider the few that deserve attention and will complement your toolkit with solutions to original use-cases. 🧐
Mass Symbol Import
When you in a rush and need to sketch a prototype super fast, it’s a good idea to squeeze some juice out of a UI kit you have downloaded a while ago.
And any time you are using a UI kit, you mostly end up copying and pasting numerous artboards from one active window to another, losing a lot of precious time switching between context.
Instead, you can single-time import all mobile/web screens you need, and use them as Symbol blocks for your prototyping session.
To make it happen, use the following combination of plugins:
- Open the UI kit file. Select all artboards you wanna use for the prototype.
- Run the Rename it plugin to setup proper menu structure for items you want to import ex.
UI KIT / %*
3. Use Batch Create Symbols to convert selected artboards into symbols.
4. Save and add the document as a Library.
5. Switch to the new file, ex. Prototype.
6. Import converted screens using Symbols menu, Runner plugin or by simply overriding Symbol instances.
Shared Libraries Copy/Paste Symbols
If you copy any contents from a Library and paste it to a new file, you will notice that pasted symbols are not synced with the primary library and have duplicated instances appeared on the Symbols page.
This may be very frustrating, especially when constantly working with multiple libraries, thanks to Library Symbol Replacer you can solve it and direct all pasted symbols to the original source.
1. Copy cmd+c the desired components, from a Library file,
2. Open a new file, and paste itcmv+v.
3. Run the plugin to locate your Library file through a choose dialog.
4. Link symbols, and give permission to remove the duplicated instances.
Relinking Symbols to a New Library
If you are like me and prefer to keep Symbols in a separate library for assembling your projects, you can face the fact that new ideas do not always come on the first approach, and you need to constantly rework, and iterate this file.
So sometimes, you may want to duplicate it, make changes to a specific component or style, and then relink your active documents to a newer version of your library. To run this process smoothly, you need to:
1. Duplicate your library file.
2. Make a new name for it, ex. New library , and add the file as a Library.
3. Make changes and Save.
4. Open the document you want to relink, run Automate plugin, and select Library/Imported Symbols Link Manage command.
5. Select Symbols you want to relink to the new Library. And press Close.
6. You will see an “Update Available” notification, to guide you through all the changes made.
Note: If you use same names for your libraries it will cause the Library ID conflict. Fortunately, you can fix it with Automate→Library→Fix Library ID Conflict command.
Design System Theming
A good UI design — is adaptable design. The one you can fit into a wider range of brands and wisely customize to target a specific audience.
Therefore to be able to quickly create multiple variations for your assets, you can use a very handy plugin called Camilo, it will help you to quickly transition from one color theme to another.
The best way to properly use it is to keep Shared Styles in a separate library, that will stay in sync with the rest of UI kit. Yet it can be used with any library you have.
1. Duplicate the Styles Library, make a new name for it, ex. New library.
2. Make changes to Layer or Text styles.
3. Add duplicated file as a library, and Save.
4. Open the document that is synced with the primary library, and run the plugin.
5. Select the desired library from the list, and it’s done.
Memorable mentions
This set of tools solves less complex tasks, yet stands out due to user experience amongst other competitors and support for the latest Sketch releases.
Find and Replace Text
This plugin allows you to search/replace text throughout the document and its individual entities, such as pages, artboards, or individual layers, and help quickly bring all text placeholders to a consistent look.
Download:
https://github.com/chriswetterman/sketch-find-and-replace-text
Auto Arrange
Finally, a plugin to sort the left menu based on the X, Y position of artboards on the page. Comes really helpful when arranging a large design system or sorting numerous artboards at the end of a long day.
Download:
https://github.com/srbsingh3/autoarrange
Connection Flow Arrows
A great plugin to create/remove connection arrows, extremely useful when designing user flows or sitemaps has great support, and provide settings to customize arrows style.
Download:
https://github.com/faridsabitov/Sketch-Connection-Flow-Arrows
Conclusion
In the process of creating your perfect library, you may encounter various obstacles. But, among other design tools, Sketch app still provides the best experience for managing and organizing your assets.
The best way to understand all the subtleties is a good example, accompanied by a set of design rules/decisions, that you can change and Inherit to build better products. 👇
Discover awesome UI examples that are used by thousands of designers and developers worldwide, visit — Buninux.com to give them a shot.
