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.
October 21, 2014
- Added "Goto Page"
- Added "Goto Artboard"
- Added "Increase/Decrease Font Size"
- Added "Group and Rename"
- Updated "Smart Align" to toggle between relative and absolute alignment
- Added "Birds Eye View"
September 30, 2014
- Added "Remove Artboard"
- Added "Replace Layer"
- Added "Select Parent Group"
- Added "Select Group Layers"
- Added "Smart Align"
- Added "Smart Move"
- Color Inventory will also display RGB values
- Support for gradients and image fills in Color Selection Plugins
- Select Artboard will now select and collapse all Artboards when an Artboard was already selected
- Set Line Height works as expected with multiple selections
- Added Sketch Select, a simple selector engine for Sketch plugin developers
- Improved performance of color selection
- Duplicate Artboard
shift+⌘+D - Fit Artboard
- Fit Artboard Height
ctrl+shift+A - Remove Artboard
shift+⌘+⌫ - Sort Artboards
- Generate/Color Inventory
experimentalctrl+⌘+⌥+C - Generate/Text Styles Inventory
experimentalctrl+⌘+⌥+T - Rename Selected Layers
- Replace Layer
⌘+⌥+R
- Select Artboard(s)
shift+⌘+A - Select Group Layers
ctrl+⌘+G - Select Parent Group
⌘+⌥+G - by Color/Select Layers by Color
shift+ctrl+⌘+C - by Color/Select Layers by Color on Artboard
ctrl+⌘+C - by Color/Select Next/Previous Layer by Color
- by Name/Select Layers by Name
shift+ctrl+⌘+N - 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+T
- Smart Align Horizontally
⌘+⌥+, - Smart Align Vertically
⌘+⌥+. - Smart Align Bottom
⌘+⌥+↓ - Smart Align Left
⌘+⌥+← - Smart Align Top
⌘+⌥+↑ - Smart Align Right
⌘+⌥+→ - Distribute Horizontally
control+⌘+⌥+, - Distribute Vertically
control+⌘+⌥+. - Space Horizontal
- Space Vertical
- Delete and Pull Up
⌘+⌫ - Pull Left
shift+⌘+⌥+← - Pull Up
shift+⌘+⌥+↑ - Push Down
shift+⌘+⌥+↓ - Push Right
shift+⌘+⌥+→ - Set Increments
shift+⌘+⌥+I
- 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 selected 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
This improves the built in behavior of artboard removal in Sketch. If the selected artboard is in the middle of other artboards, all artboards on the right side will be shifted to the left after the artboard has been removed. Requires any layer of an artboard to be selected.
Shortcut: shift + ⌘ + ⌫
Resizes the artboard to fit its layers.
Resizes the artboard to fit the height of its layers.
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. Supports multiple selections.
Shortcut: ⌘ + L
Zooms out to show all artboards and centers on the currently selected layer.
Shortcut: ⌘ + 9
Make the selection as wide as the parent group or the width of the artboard.
Shortcut: ⌘ + E
Shows a list of artboards.
Shortcut: ⌥ + ⌘ + P
Shows a list of pages.
Shortcut: ⌘ + P
Replaces the selected layer with the content in the clipboard. Basically this plugin does paste in place while removing the original selection.
Shortcut: ⌥ + cmd + R
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.
Calls the menu command "Distribute Horizontally". Just for shortcut purposes.
Shortcut: ctrl + ⌘ + ⌥ + ,
Calls the menu command "Distribute Vertically". Just for shortcut purposes.
Shortcut: ctrl + ⌘ + ⌥ + .
experimental Aligns the selected layer relative to its parent group.
Shortcut: ⌘ + ⌥ + ,
experimental Aligns the selected layer relative to its parent group.
Shortcut: ⌘ + ⌥ + .
Distributes the selected elements horizontally, with the same distante beetween them. If only one layer is selected, the layer will be moved by the spacing that has been input.
Distributes the selected elements vertically, with the same distante beetween them. If only one layer is selected, the layer will be moved by the spacing that has been input.
Deletes a layer and pulls all other layer up.
experimental Allows you to pull or push layers in relation to the selected layer.
- Pull Left
shift+⌘+⌥+← - Pull Up
shift+⌘+⌥+↑ - Push Down
shift+⌘+⌥+↓ - Push Right
shift+⌘+⌥+→
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.
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 on the current page. You can rename the layer group of a color swatch to make it a "defined" color. The next time the color inventory is generated, the plugin will take care of it. You can also group colors by naming them like "Primary > Blue".
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.