Skip to content

Instantly share code, notes, and snippets.

@spjpgrd
Last active August 6, 2018 21:09
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save spjpgrd/0c411174692b093bb888 to your computer and use it in GitHub Desktop.
Save spjpgrd/0c411174692b093bb888 to your computer and use it in GitHub Desktop.
These are the plugins I can count on to get the job done. Now, since there is such a huge variety, don't feel like you have to take my word and download every single one. Even I don't have every one of these installed on my machine right now πŸ™ƒ

Quick List: My Sketch Plugins

My Sketch Plugins

First, download Sketch Runner to help you install these plugins easier. It's like Spotlight (or Alfred) for Sketch.

These are the plugins I can count on to get the job done. Now, since there is such a huge variety, don't feel like you have to take my word and download every single one. Even I don't have every one of these installed on my machine right now πŸ™ƒ

This was compiled for the attendees of "A Really Good Beginner Sketch Workshop for Designers" for the Columbus Web Group, but why not share the love?

Alrighty, on the with the show πŸŽ‰

1. AEIconizer πŸ†’

After creating icon in any square sized artboard, select any layer (or nothing if that's the only artboard on page), then run this plugin to generate all of the needed sizes for iOS, watchOS and macOS.

2. Alembic βš—οΈ

Extracts a color palette from any layer that contains bitmap data.

3. Angle β˜‘οΈ

A free Sketch Plugin that allows you to place your screen into perspective mockups. Download 50 free mockups and try the plugin.

4. Arrowfy β†ͺ️

Add a simple arrowhead to either end of slected paths. Matches color and weight.

5. Artboard Tools πŸ”’

Arrange artboards and navigate between artboards with ease.

6. Auto Layout by Anima ↔️

I use this primarily for the Stacked Groups feature, which gives you Flexbox control within Sketch. No more redoing gutters and spacing for the 157th time.

Does what it says 🀘

Calculates the color contrast of two layers and evaluates it against the WCAG. If only a single layer is selected, than it will calculate with its artboard background color. The test may pass AAA, AA or fail because of a lack of contrast.

9. Content Generator 🎲

Content generator allows you quickly create dummy data such as avatars, names, geo location data etc.

10. Copy Color βœ‚οΈ

Provides a shortcut for copying a layer's fill color Shift + Command + F or border's fill color Shift + Command + B to clipboard.

11. Craft by inVision πŸ‘

This has to be downloaded and installed from the Craft website. A suite of plugins to let you design with real data in mind.

12. Diverse UI πŸ‘©πŸΌπŸ‘¨πŸΎπŸ‘΄πŸΌπŸ‘΅πŸΎπŸ‘³πŸ»β€β™‚οΈπŸ‘§πŸ½πŸ§”πŸΏ

A free set of user images that can be used in personal or commercial projects.

13. DuplicatorπŸ––πŸ––

For duplicating selected layers or artboards in a specified direction.

14. Export Base64 png ⌨️

Export layers for CSS or HTML in base64 format. No more random image-to-Base64 websites for you.

15. Fitter πŸ‘ 

Fits layers to parent artboard width, height or both, with the optional ability to add a margin.

16. Flatten πŸ“·

Flatten and mirror layers without destructing and update them like a boss.

17. Font Packer πŸ“¦

Creates a folder with the same name as the Sketch file. Inside the folder, there will be both a copy of the .sketch file along with a fonts folder containing all the font files you used in your document.

18. GammaCorrection 🌈

Only necessary for some people. Fixes an issue where bitmap images that are exported and re-imported into Sketch are appearing incorrectly and appearing washed out. Download it from Sketch's website.

19. Golden_Line_Height πŸ₯‡

Optimize your typography with ease β€” based on Pearsonified's Golden Ratio Typography Calculator.

20. IconFlower 🌻

Arrange icons, images and shapes in Phyllotaxis (leaf arrangement) patterns.

21. Image Average Color ⚑️

Allows you to get the average color of an image to save it or use it to fill any layer.

22. Logodrop 🌐

Get brand logos right within Sketch. My second place is World Vector Logo. The third being Wikipedia. SVGs for days πŸ•Ί

23. Looper πŸ”

Build beautiful patterns and illustrations.

24. Map Generator πŸ“

Design beautiful map interfaces, mobile applications and more in less time with Map Generator 2.0. Now powered by Google and Mapbox.

25. Midnight πŸŒ™

Dark theme for Sketch UI.

26. Paddy πŸ€

Automated padding, spacing and alignment for your Sketch layers

27. Pages to Folders πŸ“‚

Exports all the artboards of a Sketch file into folders, which are based on the pages of the Sketch file.

28. PDF Export πŸ“‘

Export artboards to a PDF document the easy way by all pages, current page, or selected artboards. Plus more.

29. Perfecter πŸ“

Helps you find pixel imperfect layers in your documents.

30. Random Opacity πŸ€Ήβ€β™‚οΈ

Randomly change the opacity of selected objects in Sketch.

31. Random Size 🍱

Randomly resize selected elements

32. Randomcolorv1.1 πŸ”€

Apply random colors to a selection of objects.

33. Rename-It 🏷

Batch rename layers and artboards.

34. Scale all in place βš–οΈ

Scale all selected layers, in place, from center.

35. Segmented Circles ⭕️

Creates circular graphics for diagrams, instrumentation and analytics.

36. Skatter 🎱

Assistance with creating randomized patterns out of pre-determined shapes.

37. Sketch Data Populator ℹ️

Populate your documents with meaningful data with JSON.

Pro tip: Use Mockaroo to generate data for you if you don't have any.

Compresses your bitmap assets on export, to keep file size to a minimum.

39. Sketch Measure πŸ“

Make it a fun to create spec for developers and teammates.

40. sketch-hyphenator ↔️

Auto-hyphenates text.

41. Sketch2PDF 2️⃣

One-click Export, Merge and Optimization of PDF files.

42. Sketch Palettes 🎨

Export and import fill presets. It supports colors, gradients, and pattern fills.

A plugin for managing all plugin shortcuts.

44. Sort Me πŸ”’

Sort artboards and layers by name.

45. Spellcheck All Layers πŸ”€

Recommended by Nick Holmer β€” Run spell check on all text layers in the page. Displays a basic panel that allows users to replace the misspelled word or add it to the dictionary, or ignore it. Uses macOS's built-in spelling features and dictionary to do this.

46. Stark πŸ”²

Ensure your design is accessible and high contrast for every type of color blindness.

47. SVGO Compressor πŸ—œ

compresses SVG assets using SVGO, right when you export them.

48. Symbol Instance Locator ♻️

Locate all instances of a selected symbol or instance.

49. Symbol Instance Renamer ⚑️

Rename symbol instances to the name of their master.

50. Symbol Organizer πŸ—‚

Organize your symbols page alphabetically (including layer list) and into groupings determined by your symbol names.

51. Syntax Highlighter ✍️

Automatically highlight the syntax of any code snippet, right within Sketch.

Set the height of a selected text layer or all text layers in a selected group to it's content's height.


You made it to the end of this! Rock on.

If you have any comments or suggestions, I'd love it if you reached out to me on Twitter: @spjpgrd

Cheers 🍻
Sean "Ringo" Doran

@nholmer7
Copy link

@cfsanderson
Copy link

Great list, thanks!

@spjpgrd
Copy link
Author

spjpgrd commented Aug 6, 2018

@cfsanderson β€” Thank ya!

@spjpgrd
Copy link
Author

spjpgrd commented Aug 6, 2018

@nholmer7 β€” party dance

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment