• Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

Code Geekz

    • Most Popular

      All time

    • 30 Best Tools for Data Visualization

      37 Comments

    • Best PHP Frameworks for Developers

      33 Comments

    • Latest Stories

      What is new?

    • Building Product Teams That Scale: The Case for Remote .NET Developers

      May 21, 2025

    • Choosing a WooCommerce Theme? Here’s What Most Store Owners Get Wrong

      May 9, 2025

    • Comments

      Most Recent

    • B. Frances on:

      Best WordPress Wedding Themes

    • Ultimate Content Locker Pro on:

      Best WordPress Social Content Locker Plugins for 2017

  • Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

15 Best Sketch Plugins for Developers

0
  • by Gavin
  • In DEVELOPMENT · RESOURCES
  • — 22 May, 2015

Before any tangible designs are made, any experienced designer should know that the first thing you do before any sort of web development project is map out a rough sketch first. Although most sketching is done on blank paper, many developers have now started using sketch templates for their web applications. This is definitely the most productive and organized way to start probably one of the most important phase of the application design process.

For this roundup I have gathered 15 Best Sketch Plugins for Developers, this list includes myriad of applications ranging from content generators, color palette selector, and they can help you to display layer measurements or automatically add padding to a layer. Let’s explore the list.

1. Sketch Notebook

sketch notebook plugin
Sketch Notebooks is a handy plugin that lets you create skech for your design, it will add an additional sidebar to your workspace, which contains comments you add to any element on your design. You can reorder comment, realign, delete and toggle comment visibility.

2. CSS Buddy

css buddy
CSS Buddy allows you to add the CSS to your layer in the Sketch workspace. Basically, you can apply width, height, opacity, box-shadow, border, and background to the layer using CSS.

3. Day Player

day player
It allows you to insert a customized placeholder image into any Sketch document from a number of different placeholder image services. Once activated, you can set the image’s width, height, and other information.

4. Material Design Colour Palette Sketch Plugin

material design color palette
This plugin will generate color palettes in seconds without you having to close your workspace. Choose Hue, Value, or Swatch to generate a color palette that is suitable for your project.

5. Content Generator Sketch Plugin

content generator sketch plugin
Sketch generator allows you quickly create dummy data such as avatars, names, geo location data etc. To add the dummy data, just select a layer, then select Plugin – Generator, and choose Geo, Persona or Photos.

6. Blade

blade
Blade, a Sketch plugin that automatically generates HTML files from your design. It will convert group into div, text into p and so on. When using Blade, you can tell the plugin what DOM element to generate by adding a special name to the layer, such as [btn] or input so Blade knows what it should do.

7. Modulizer

modulizer
Modulizer plug-in for Sketch.app allows you easy control paddings for buttons, modules and areas. If your module has background your can set fixed paddings and easy restore it for any content changes.
https://github.com/falkeyn/modulizer

8. Typographic Scale

typographic plugin
This plugin generates a typographic scale from selected text layers. The produced scales are meant to serve as general starting points for building your own scales. Select a textlayer, multiple textlayers, mixed layers containing at least one textlayer or groups (only root will be processed), hit the plugin.

9. Dynamic Button

dynamic button
Dynamic button plug-in for Sketch.app allows to create buttons with fixed paddings no matter what text you add. With the plugin installed, a text can be converted into a structure with the shortcut Command+J. The amount of padding required can then be punched in to the (0:0:0:0) text layer (under flex button group).

10. Sketch Measure

sketch measure
A measure tool for measurements & design specs, Sketch 3.0.2+ support, Sketch Measure can also print the layer properties, such as color, border, and opacity. All measurements can be brought up via keyboard shortcuts.

11. Sketch Framer

sketch framer
A plugin to export Sketch.app documents into FramerJS to make interactive prototypes. You can customize the exported files (index.html, app.js) by tweaking sketch-framer-config.js. The most common thing you might want to do is import a library file and include it in all your projects.

12. Sketch.js

sketchjs
Sketch.js is an easy-to-use jQuery plugin that allows you to create canvases upon which visitors can draw.

13. Sketch DevTools

sketch dev tool
Sketch DevTools is a set of tools & utilities that help in development of Sketch App plugins. The Sketch App itself provides a very limited number of tools for plugins developers. The most annoying things are the lack of convenient debugging tools and lack of documentation of available APIs. The aim of this project is to solve these two problems and provide newbie developers with comprehensive information on plugins development for Sketch App.

14.Sketch Preview

sketch preview
This Sketch plugin provides a preview command (⌘P) that will export the currently selected Artboard at a configurable preview size (⌘⌥P) and open the resulting image file in Skala Preview.

15. Sketch Data Parser

sketch data parser
A sketch plugin to parse your data and populate your design, download the sketch-data-parser.sketch plugin file and double click it to have Sketch install it in the right place.

Share

Tags: best sketch pluginsdummy datafree sketch pluginssketch appsketch jssketch pluginsketch pluginstop sketch pluginswidth height

— Gavin

A Web addicted Geek stuck inside Tron.

  • Previous story Best Cross Browser Testing Tools
  • Next story 12 Best Image Compression Tools

You may also like...

  • 12 Best Ruby Frameworks for Accelerated Development
  • 7 Website Trends Everyone Should Avoid at All Costs
  • 12 PHP Debugging Tools for Developers
  • Bitdefender Antivrus : Most Reliable Solution for Windows Users

Enter your em@il & get our posts delivered.





  • Enter your em@il & get our posts delivered.

  • Codegeekz
    • Home
    • DEVELOPMENT
    • 15 Best Sketch Plugins for Developers
    • Home
    • WORDPRESS
      • PLUGINS
      • PHP
      • Themes
      • DEVELOPMENT
        • Javascript
        • JQuery
        • Mootools
    • WEB DESIGN
      • DESIGN
      • CSS
      • HTML
    • TYPOGRAPHY
      • FONTS
    • RESOURCES
      • TUTORIALS
      • THEMES
      • SLIDERS
      • TECHNOLOGY
    • ARCHIVES
    • CONTACT
    • Advertise

    CODEGEEKZ.COM