Sketch Plugins for your UI Library (Design Systems)
Since Sketch release Sketch Libraries is being a life-changing for a lot of designers that works towards creating a design system for their products.
It is really easy to focus on Sketch and call this process Design Systems but as Nathan Curtis define Design Systems:
“ A design System offers a library of visual style and components documented and released as reusable code for developers and/or tools for designers. ”
So this article only intend to talk about one part of the design systems, so for my sanity, I will call it UI Library.
Our challenge is to find a way to quickly and effectively edit components and make amends eliminating the feeling of being tedious in order to have a consistent UI Library maintenance in Sketch. So for all these reasons, I decided to list the best plugins that help us to built the UI Library.
So if you feel identify with the follow titles, we have the perfect plugin for you!
My symbols are a mess.
If you also had that feeling of spending endless time organising your symbols manually, try Symbol Organizer. It is a timesaver! It allows you to structure your symbols in any order and name you decide. Download:
symbol-organizer - Organize your symbols page alphabetically (including layer list) and into groupings determined by…github.com
Time-consuming to find my Brand Colours every time I start a sketch file.
Sounds familiar? Just try Sketch Palettes. It allows you to export your brand colours and import to any file Sketch for you and your team. Download:
sketch-palettes - A Sketch plugin for exporting and importing fill presets. It supports colors, gradients, and pattern…github.com
Easy to forget what Text Styles we are using for our product
We are not perfect so neither our memory. How cool is to have a plugin that allows you to import or export your text styles? The answer is Shared Text Style. Download:
shared-text-styles - A Sketch plugin to import & export text styles.github.com
I need to remember to Design with Accessibility in mind
More and more designers nowadays care about this important part of Design. This plugin, Stark, makes it even easier so you can check contrast and even you can check with the color-blind simulator before you hand-off your designs to developers. Download:
stark-sketch-plugin - Ensure your design is accessible and high contrast for every type of color blindnessgithub.com
A quick way to find and use your symbols
Happy days, Runner plugin is here. It allows you quickly search through all available plugins and Sketch menu commands, meaning: no more dropdown menus! Download:
We are a white label company, we need to handle a lot of different brands.
Just let Plugin Craft from Invision do their magic. If you already have your brand colours just swap the colours for the new brands and Voilà. This plugin can do other amazing stuff though, just check the website. Download:
Easy way to resize your components for different screens & devices.
Solution? Try Auto Layout. It takes a little bit of time to get your head around, but when you understand the mechanism you would want to use it for every component. Download:
These plugins are our MUST. They make our UI Library maintenance much easier and efficient. There are tons of plugins for Sketch out there, but I only attached the ones that made a positive change in our process.
Did I forget any lifesaver plugin? Just let me know :)