Create typesettings once and use them anywhere. Set character spacing and line height of text layers based on the font family, font weight, font size, and letter casing. Better yet, let the plugin do it for you automatically when you allow it to from the plugin preferences.
Below you'll find typsettings that are already included with the plugin.
Get the TypesettingsStarter.sketch file to get going easily.
You can install the plugin with Sketch Runner or by downloading it from the latest release.
cmd + shift + right arrow
Sets the character spacing of any selected text layer based on the font and text size. You can enable automatic character spacing in the plugin preferences.
cmd + shift + down arrow
Sets the line height of any selected text layer based on the font and text size. You can enable automatic line height in the plugin preferences.
ctrl + alt + cmd + return
To register typesettings, you'll want to do the following:
- Create your text layers using any size, weight, and letter casing permutation
- Set the character spacing and line height for each
- Select all text layers
- Go to
Plugins>Typesettings>Register Typesettings
Letter Casing
You can create typesettings for uppercase, lowercase (if that's a thing?), and no casing.
In order to properly save the typesettings for a given letter casing, you'll need to make sure that the text layers has the desired Text Transform option when registering the typesettings.
For example:
- Create two text layers using the same font family, font size, and weight
- Select one of the text layers and set the
Text Transformoption toUppercaseusing the Text Inspector - Set the character spacing and line height of each text layer to whatever you want
- Select both layers and Register them
ctrl + alt + cmd + t
Local Registry
When registering your typesettings, the <font_family_name>.json file will save to your Desktop by default. You can change the directory (for instance, to a shared folder) from the plugin preferences.
Automatic Typesetting
Enable Automatic Character Spacing: Automatically sets character spacing—if the typesetting is registered —when deselecting text layers. This is turned off by default.Enable Automatic Line Height: Automatically sets line height—if the typesetting is registered —when deselecting text layers. This is turned off by default.
Ignoring Text Layers
When automatic character spacing and/or automatic line height are enabled, you can ignoring any text layer by adding the prefix ^ or the suffix ^ to text layer name. Note that if you manually typeset the text layers they will not be ignored.
You can change both the prefix and suffix in the plugin preferences.
The following typefaces have been registered and automatically included with the plugin. If you'd like to add more, put the typesettings in the directory folder and open a pull request.
- SF Pro Display from iOS resource guidelines
- SF Pro Text from iOS resource guidelines
- SF Compact from watchOS resource guidelines
This plugin was created using skpm. For a detailed explanation on how things work, checkout the skpm Readme.