Sketch Styles Generator
Generate hundreds of Shared Styles in a matter of seconds
Sketch Styles Generator is a plugin made for Sketch. It helps designers who want to generate Shared Styles for a Design System, without relying on pre-made guidelines provided by other (useful) tools like Craft.
Follow me @lucaorio_ for updates, help and other stuff!
Why this Plugin?
- Sketch doesn't allow to generate multiple Shared Styles (text, shapes or both of them) at once
- Sketch appends a
Stylesuffix to the name of every style you try to create
- Craft and other tools generate guidelines that may not fit your app styling
If you experienced at least one of the problems above, you know how painful the bootstrap of a design system can be. The manual creation, renaming and double-check of every Shared Style is a slow process. And time is a precious resource (aka we got a lot of shit to do).
Sketch Styles Generator allows you to select any amount of layers (text, shapes, or all of them at once), and generate multiple Shared Styles named exactly like the layer itself. Have a look at the usage section to know more about how to use it.
- Download the repo as a zip by clicking the Clone or download button
- Uncompress the
- Navigate to the
Sketch Styles Generator.sketchpluginto install it
From the Terminal
Clone the Github repo
$ git clone https://github.com/lucaorio/sketch-style-generator
Move to the plugin directory
$ cd sketch-styles-generator/plugin
Open the plugin to install it in Sketch
$ open Sketch\ Styles\ Generator.sketchplugin
- Rename the layers you want to generate your Shared Styles from. The speed of this boring process can be dramatically improved by using plugins like Find-And-Replace and RenameIt.
- Select all of them, it doesn't matter if they are Shape or Text entities
- Run the plugin by clicking
Plugins->Styles Generator->Generate Shared Styles, or by using the
- A little log on the bottom of the window will show you how many Styles were generated, and how many were skipped.
Sketch Styles Generator is now fully integrated with Sketch Runner, the ultimate tool to speed up your Sketch workflow. You can trigger the plugin by simply typing its first letters, in pure Spotlight style!
What does skipped mean?
If there are multiple layers with the same name, the Style generation is triggered just on the first one. After using the plugin on a daily basis, I found it more useful than a Shared Style deleting/updating/duplicating. I'm open to iterate on the plugin and change the behavior, if needed. Ping me @lucaorio_ if you have other ideas!
What happens if in my multiple selection there are some Symbols?
Sketch Styles Generator will detect the kind of layer you selected, and automatically skip Symbols and other entities that can't be converted into a Text/Shared Style.