├── font-size.gif ├── perfecter.png ├── line-height.gif ├── README.md └── perfecter.sketchplugin └── Contents └── Sketch ├── manifest.json └── perfecter.js /font-size.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Volorf/Perfecter/HEAD/font-size.gif -------------------------------------------------------------------------------- /perfecter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Volorf/Perfecter/HEAD/perfecter.png -------------------------------------------------------------------------------- /line-height.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Volorf/Perfecter/HEAD/line-height.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Perfecter 2 | 3 | ## Make great typography! 4 | 5 | ![Perfecter logo](/perfecter.png) 6 | 7 | ## The plugin helps you: 8 | 9 | ### 1. Perfect Line Height for your text 10 | 11 | ![A perfect line height](/line-height.gif) 12 | 13 | ### 2. Perfect Font Size for your text 14 | 15 | ![Perfect Font Size](/font-size.gif) 16 | 17 | ## Proportions 18 | Here you can see such a perfect ratio like: 19 | * Golden ratio 💪; 20 | * Silver ratio 😎; 21 | * Pi 😍; 22 | * and more. 23 | 24 | ## How to install this treasure 25 | 1. [Download the zip file with the Perfecter](https://github.com/Volorf/Perfecter/archive/master.zip). 26 | 2. Double click on `perfecter.sketchplugin`. 27 | 28 | ## Links 29 | [Linkedin](https://www.linkedin.com/in/oleg-frolov-6a6a4752/) | [Dribbble](https://dribbble.com/Volorf) | [Facebook](https://www.facebook.com/volorf) 30 | -------------------------------------------------------------------------------- /perfecter.sketchplugin/Contents/Sketch/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Perfecter", 3 | "description": "Perfect your typography", 4 | "author": "Oleg Frolov", 5 | "authorEmail": "frolololeg@gmail.com", 6 | "homepage": "https://github.com/Volorf/Perfecter", 7 | "version": 1.0, 8 | "identifier": "com.example.sketch.perfecter", 9 | "compatibleVersion": 1, 10 | "bundleVersion": 1, 11 | "commands": [ 12 | { 13 | "name": "Perfect a Line Height", 14 | "identifier": "perfectLineHeight", 15 | "shortcut": "ctrl shift l", 16 | "script": "perfecter.js", 17 | "handler": "perfectLineHeightFunc" 18 | }, 19 | { 20 | "name": "Perfect a Font Size", 21 | "identifier": "perfectFontSize", 22 | "shortcut": "ctrl shift f", 23 | "script": "perfecter.js", 24 | "handler": "perfectFontSizeFunc" 25 | } 26 | ], 27 | "menu": { 28 | "items": [ 29 | "perfectLineHeight", 30 | "perfectFontSize" 31 | ] 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /perfecter.sketchplugin/Contents/Sketch/perfecter.js: -------------------------------------------------------------------------------- 1 | function perfectLineHeightFunc(context) { 2 | superMainFunc(context, "perfectLineHeight") 3 | } 4 | 5 | function perfectFontSizeFunc(context) { 6 | superMainFunc(context, "perfectFontSize") 7 | } 8 | 9 | function superMainFunc (context, whatWeDo) { 10 | 11 | var doc = context.document, 12 | selection = context.selection, 13 | layer = selection.firstObject(), 14 | fontSizeSelectedTextLayer = 0, 15 | sketch = context.api(), 16 | 17 | // Main array. Here you can add a new ratio. 18 | arrayRatio = [ 19 | ["Golden ratio — 1.618", 1.618], 20 | ["Silver ratio - 2.214", 2.214], 21 | ["Default ratio — 1.2", 1.2], 22 | ["√2 — 1.414", 1.414], 23 | ["√3 — 1.732", 1.732], 24 | ["√5 — 2.236", 2.236], 25 | ["π — 3.142", 3.142] 26 | ], 27 | 28 | // Array for .getSelectionFromUser 29 | arrayRatioWords = [], 30 | 31 | // Array for calculation 32 | arrayRatioNumbers = [], 33 | 34 | // Fill arrays for .gerSelectionFromUser and calculation 35 | countArrayRatio = arrayRatio.length; 36 | 37 | for (i = 0; i < countArrayRatio; i++) { 38 | arrayRatioWords.push(arrayRatio[i][0]) 39 | arrayRatioNumbers.push(arrayRatio[i][1]) 40 | } 41 | 42 | // Launch a main function 43 | perfectSelectedLayer() 44 | 45 | function perfectSelectedLayer () { 46 | if (selection.length == 0) { 47 | doc.showMessage("You should select at least one text layer"); 48 | } else if (selection.length == 1){ 49 | if (layer.className() == "MSTextLayer") { 50 | fontSizeSelectedTextLayer = layer.fontSize(); 51 | lineHeightSelectedTextLayer = layer.lineHeight(); 52 | if (whatWeDo == "perfectFontSize") { 53 | setPerfectRatioFontSizeForSelectedTextLayer(); 54 | } else if (whatWeDo == "perfectLineHeight") { 55 | setPerfectRatioLineHeightForSelectedTextLayer(); 56 | } 57 | } else { 58 | doc.showMessage("You should select a text layer only"); 59 | } 60 | } else { 61 | doc.showMessage("You should select an one layer only"); 62 | } 63 | } 64 | 65 | // Set perfect ratio for lineHeight 66 | function setPerfectRatioLineHeightForSelectedTextLayer () { 67 | var getChoosedRatioFromUser = sketch.getSelectionFromUser("Choose ratio for Line Height", arrayRatioWords), 68 | indexForArrayRatioNumbers = getChoosedRatioFromUser[1]; 69 | layer.setLineHeight(fontSizeSelectedTextLayer * arrayRatioNumbers[indexForArrayRatioNumbers]); 70 | } 71 | 72 | // Set perfect ratio for fontSize 73 | function setPerfectRatioFontSizeForSelectedTextLayer () { 74 | var getChoosedRatioFromUser = sketch.getSelectionFromUser("Choose ratio for Font Size", arrayRatioWords), 75 | indexForArrayRatioNumbers = getChoosedRatioFromUser[1]; 76 | layer.setFontSize(lineHeightSelectedTextLayer / arrayRatioNumbers[indexForArrayRatioNumbers]) 77 | } 78 | } 79 | --------------------------------------------------------------------------------