Important note: These plugins are still in development and may not work as expected. Keep an eye for the experimental flag ;)
Design requires free, sometimes chaotic exploration. But design also means organisation and structure. Sketch can be good in both aspects, but moving from exploration to structured layouts with text styles and unified colors is hard. Either you start clean files from scratch, or you use what you have and try to tidy it up. The Style Inventory is meant to help you with that. It gives you an overview of all your used styles and helps you to merge styles of similar layers into one. This repositiory also contains a few other helpful plugins.
- Duplicate Artboard
shift+⌘+D - Fit Artboard Height
ctrl+shift+A - Sort Artboards
- Export/Symbols to PNG
- Export/Text Styles to CSS
- Generate/Color Inventory
experimental - Generate/Style Inventory
experimental - Rename Selected Layers
- Select Artboard(s)
shift+⌘+A - Select Group Layers
ctrl+⌘+G - by Color/Select Layers by Color
- by Color/Select Layers by Color on Artboard
ctrl+⌘+C - by Color/Select Next/Previous Layer by Color
- by Name/Select Layers by Name
- by Name/Select Layers by Name on Artboard
ctrl+⌘+N - by Text Style/Choose Similar Text Layer
- by Text Style/Select Similar Text Layers
- by Text Style/Select Similar Text Layers on Artboard
⌘+control+NT
- Sort Layers
ctrl+⌘+⌥+S - Reverse Positions
- Reverse Layer Order
Set Line Height ⌘ + L
To install all plugins, download them all first, unzip the archive, and place the folder contents in your Sketch Plugins folder by navigating to Sketch > Plugins > Reveal Plugins Folder…
To install only a selection of plugins, you will first need to place the library file inventory.js in the root of your Sketch Plugins directory. This is very important as all plugins rely on its functionality.
You can then install selected plugins by double-clicking the file, or alternatively, drag and drop the file onto the Sketch app icon. This will automatically copy the plugin to your Sketch Plugins folder.
Most plugins have a pre-defined keyboard shortcut. You can always change it by editing the shortcut written in parenthesis at the end of the first line of a plugin.
For example, the first line of Duplicate Artboard.sketchplugin:
// Duplicates the current artboard right next to it. (shift command d)
You can use modifier keys such as option, command, control, shift
This improves the built in behavior of artboard duplication in Sketch. If the current artboard is in the middle of other artboards, all artboards on the right side will be shifted to the right before the artboard is duplicated. Requires any layer of an artboard to be selected.
Shortcut: shift + ⌘ + D
Resizes the artboard to fit the height of its layers. Useful when designing lists.
Shortcut: shift + ctrl + A
Sorts selected artboard layers by their horizontal position. Useful when your layer list does not reflect the artboard arrangement on your canvas.
Plugin that allows you to set the line height of a text layer as a multiple of the font size. It’s like using em in CSS.
Shortcut: ⌘ + L
A set of plugins that select layers based on color, name & text style.
Depending whether the selection is a layer or an artboard, this plugin will select the current artboard or all artboards of the current page.
Shortcut: shift + ⌘ + A
Based on a selected layer, all layers on the current artboard that match the fill or text color will be selected.
Shortcut: ctrl + ⌘ + C
experimental Based on a selected layer, all document layers that match the fill or text color will be selected.
Based on a selected layer, all layers that match the name of the reference layer will be selected. This will also include layers that have appended numbers from duplication (e.g. Rectangle 1, Rectangle 2, …)
Shortcut: ctrl + ⌘ + N
Selects the layers of a group.
Shortcut: ctrl + ⌘ + G
experimental Based on a selection, the next layer with the same fill color will be selected.
experimental Based on a selection, the next layer with the same text style will be selected.
There are also plugins to reverse the order of the layers in the layer list and a plugin that reverses the position of the selected layers on the artboard.
Options: Text (A->Z), Text (Z->A), Layer Name (A->Z), Layer Name (Z->A), Top, Left, Random
Shortcut: ctrl + ⌘ + ⌥ + S
Generate a visual style sheet with all colors and text styles that you are using. This will help you to get an overview of your used styles so you can merge styles that are very close together. This will also export a CSS file with text styles.
experimental Exports symbols on the current page as PNG to the project folder. In a future release, this plugin may export all symbols from the document.
This plugin generates an overview of all your text styles and exports it as CSS. Watch the demo This is more proof of concept and only the foundation of a set of helpful plugins that will follow soon.
To do: export opacity, remove attributes that have the default value
Generates an artboard with all colors that are used in the document.
Generates both, the color and text style inventory.
Generates an artboard with all text styles that are used in the document.
experimental A simple wizard that will guide you through your styles that are missing variable names. This will be used to to provide more information for SASS and JSON export.