Swipe CSS text styles from a page directly into Sketch.
➤ In order for Klepto to work as intended, please download the companion Sketch plugin here: https://github.com/blakedq/csSketch ➤ Default Shortcut: Cmd + Right _____________________________________________________ ★ INTRO Klepto is a Chrome extension with a companion Sketch plugin that allows designers to copy CSS font styles from live websites and paste them directly into Sketch as Sketch styles. ★ HOW TO USE 1. Go to a webpage you would like to copy font styles from. 2. Toggle the Klepto icon in Chrome. The inactive state is gray, the active state is pink. 3. Select the text on the page, press your desired shortcut (default: Cmd+Right) 4. Open Sketch, have a text layer with some sample text ready. 5. Select the text layer and press your desired shortcut for pasting into Sketch (default: Ctrl+Opt+V). Alternatively, you can use the Plugins menu in Sketch and press the shortcut through the Klepto context menu. ★ FEATURES • Copy text styles to clipboard • Paste CSS styles from clipboard into Sketch • Clipboard history of styles • Per-domain extension toggling/history • Chrome sync storage for history (8192 bytes per item!) • Draggable UI • Rounding up decimal values for font-size, line-height and letter-spacing. • Levenshtein distance algorithm standardizes font-family names to match what you have available on your machine. • Copy from Inspect Element • Customizable keyboard shortcuts • Modify options to copy any arbitrary computed style ★ CLIPBOARD HISTORY Klepto features a running clipboard history which shows the fonts that you have copied. In order to copy a style you have copied in the past that is no longer in your clipboard, click on the style in the clipboard history. It will copy the styles back to your clipboard and allow you to paste it into Sketch. ★ STYLES AVAILABLE Klepto is capable of copying the following styles from CSS into Sketch: • font-size • color • line-height • font-weight • text-decoration • font-family • font-style • letter-spacing • text-transform • font-variant • text-shadow
- (2019-08-09) Erin Pfiffner: Super efficient way to copy CSS into Sketch - beautifully minimal interface. Love the clipboard history stays present per domain or subdomain!
- (2019-08-09) Hannah Mussi: Very cool and efficient plugin, makes it easy to identify and copy text styles from chrome straight to Sketch!
- (2019-08-09) Yana Gevorgyan: PRETTY GOOD.