{"id":23964,"date":"2021-04-30T23:19:04","date_gmt":"2021-04-30T15:19:04","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23964"},"modified":"2021-04-30T20:11:21","modified_gmt":"2021-04-30T12:11:21","slug":"sketch-plugins","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/","title":{"rendered":"10 Free Sketch Plugins for Web Developers"},"content":{"rendered":"<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.sketch.com\/\">Sketch<\/a> is getting a lot of traction among web designers and developers. This is probably because it is <strong>intuitive, easy to learn<\/strong> and comes with many features that makes it a lot easier to <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/prototype-designing-apps\/\" rel=\"noopener\">create a website prototype<\/a>. It may also be because this application is extensible i.e. you can add new features to the application easily with the help of plugins.<\/p>\n<p>Here are 10 plugins that can help you to <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/how-to-boost-productivity\/\" rel=\"noopener\">boost your productivity<\/a> when working with Sketch. There are diverse, ranging from content generators, color palette selector, and they can help you to display layer measurements or automatically add padding to a layer.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/sketch-app-sources-freebies-tutorials\/\" class=\"ref-block__link\" title=\"Read More: Sketch App Sources: Your Final Stop for Sketch Freebies & Tutorials\" rel=\"bookmark\"><span class=\"screen-reader-text\">Sketch App Sources: Your Final Stop for Sketch Freebies & Tutorials<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/sketch-app-sources-freebies-tutorials.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-37716 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/sketch-app-sources-freebies-tutorials.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Sketch App Sources: Your Final Stop for Sketch Freebies & Tutorials<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tThere's no denying that Sketch has caught on like wildfire. It's a lot cheaper than all the Adobe...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>1. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/jodyheavener\/CSS-Buddy\">CSS Buddy<\/a><\/h2>\n<p><strong>CSS Buddy<\/strong> 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.<\/p>\n<p>With this plugin installed, just select a layer then select <em>Apply to Selected<\/em> from the plugin menu. A dialog will prompt you to enter your stylesheet. Add the CSS content without the CSS class and watch your layer take shape.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-cssbuddy.jpg\" alt=\"CSS Buddy\" width=\"700\" height=\"420\"><\/figure>\n<h2>2. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/t32k\/material-design-color-palette\">Material Design Color Palette<\/a><\/h2>\n<p>If you follow the trend of Material Design, a prominent thing you will notice is the use of distinctive colors. Material Design has an awesome color palette. Now you can bring that to your workspace with <strong>Material Design Color Palette Plugin<\/strong>.<\/p>\n<p>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.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-materialcolors.jpg\" alt=\"Material Design Color Palette\" width=\"700\" height=\"420\"><\/figure>\n<h2>3. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/owl.tools\/notebook-sketch-plugin\">Sketch Notebook<\/a><\/h2>\n<p>Sometimes we need to show what we do in a comment or <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/why-documentation-essential\/\" rel=\"noopener\">via documentation<\/a>. If you are working on projects with other designers or a client\u2019s involvement, this is also necessary so you can ensure that the outcome is what the everybody was aiming for.<\/p>\n<p><strong>Sketch Notebook<\/strong> is a plugin for documenting your design in Sketch with ease. 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.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-notebook.jpg\" alt=\"Sketch Notebook\" width=\"700\" height=\"390\"><\/figure>\n<h2>4. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/tylergaw\/day-player\">Day Player<\/a><\/h2>\n<p>Before using real images in a design, we often use placeholder images to speed up the design process. For Sketch, you can use<strong> Day Player<\/strong> to add customized placeholders to any layer on your Sketch workspace from 6 placeholder image services including Placehold.it, LoremPixel and Unsplash. Once activated, you can set the image\u2019s width, height, and other information.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-dayplayer.jpg\" alt=\"Day Player\" width=\"700\" height=\"390\"><\/figure>\n<h2>5. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/timuric\/Content-generator-sketch-plugin\">Content Generator<\/a><\/h2>\n<p>We already have a plugin to insert placeholder images, how about one for general content? <strong>Content Generator<\/strong> helps you add dummy data such as avatars, names, geolocation data and more. Works great for mockup designs and for reducing headaches from trying to figure out how to generate data on the spot.<\/p>\n<p>To add the dummy data, just select a layer, then select <strong>Plugin &gt; Generator<\/strong>, and choose <strong>Geo<\/strong>, <strong>Persona <\/strong>or<strong> Photos.<\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-contentgenerator.jpg\" alt=\"Content Generator\" width=\"700\" height=\"390\"><\/figure>\n<h2>6. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/utom\/sketch-measure\">Sketch Measure<\/a><\/h2>\n<p><strong>Sketch Measure<\/strong> is a measurement tool for Sketch. It measures the length or size of a layer (or layers) in your design. You also get the padding and margin of a layer as well as the distance between two layers. Sketch Measure can also print the layer properties, such as color, border, and opacity. All measurements can be brought up via keyboard shortcuts.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-measure.jpg\" alt=\"Sketch Measure\" width=\"700\" height=\"390\"><\/figure>\n<h2>7. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/ddwht\/sketch-dynamic-button\">Dynamic Button<\/a><\/h2>\n<p><strong>Dynamic Button<\/strong> helps you create button with fixed paddings easily. It will automatically adjust the padding based on the value you give, no matter the length of your text. With the plugin installed, a text can be converted into a structure with the shortcut <span class=\"key\">Command<\/span>+<span class=\"key\">J<\/span>. The amount of padding required can then be punched in to the (0:0:0:0) text layer (under flex button group).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-button.jpg\" alt=\"Dynamic Button\" width=\"700\" height=\"390\"><\/figure>\n<h2>8. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/automat\/sketch-plugin-typographic-scale\">Typographic Scale<\/a><\/h2>\n<p>Typographic Scale is a plugin to turn selected text layer into typographic scale. To use this plugin, just select text layer (single or multiple), or mixed layer that contains at least one text layer, then select <code>Plugin &gt; Typographic Scale<\/code> and adjust the value on the dialog. The result is a set of scaled text that follows the rules of typographic scale.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-typescale.jpg\" alt=\"Typographic Scale\" width=\"700\" height=\"390\"><\/figure>\n<h2>9. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/falkeyn\/modulizer\">Modulizer<\/a><\/h2>\n<p>With <strong>Modulizer<\/strong> you can control the paddings for button, module, or areas on your design with the keyboard shortcut <span class=\"key\">Shift<\/span> + <span class=\"key\">Command<\/span> + M. You can combine all your layers, group it then use the shortcut to automatically adjust your padding based on the padding value you need. Watch the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=7ZHsr-dmHHM&amp\">video demo<\/a> to see this in action.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-padding.jpg\" alt=\"Modulizer\" width=\"700\" height=\"390\"><\/figure>\n<h2>10. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/sskyy\/blade\">Blade<\/a><\/h2>\n<p>Have you ever thought about converting your design from sketch to HTML? If so, you probably should get <strong>Blade,<\/strong> a Sketch plugin that automatically generates HTML files from your design. It will convert group into <code>div<\/code>, text into <code>p<\/code> and so on.<\/p>\n<p>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[text] so Blade knows what it should do. Check out this video <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vimeo.com\/97899465\">demo<\/a> for an inside look.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-html.jpg\" alt=\"Blade\" width=\"700\" height=\"390\"><\/figure>\n<h2>Now Read:\n  <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/wordpress-tools-for-development\/\" onclick=\"_gaq.push(['_trackEvent', 'readmore', 'internal', 'sketch-plugins']);\" rel=\"noopener\">12 Useful Plugins for WordPress Developers<\/a><\/h2>\n<figure><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/wordpress-tools-for-development\/\" onclick=\"_gaq.push(['_trackEvent', 'readmore', 'internal', 'sketch-plugins']);\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/wordpress-tools-for-development\/query-monitor.png\" width=\"500\" height=\"320\"><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>Sketch is getting a lot of traction among web designers and developers. This is probably because it is intuitive, easy to learn and comes with many features that makes it a lot easier to create a website prototype. It may also be because this application is extensible i.e. you can add new features to the&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1050],"tags":[1214,3519,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>10 Free Sketch Plugins for Web Developers - Hongkiat<\/title>\n<meta name=\"description\" content=\"Sketch is getting a lot of traction among web designers and developers. This is probably because it is intuitive, easy to learn and comes with many\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Free Sketch Plugins for Web Developers\" \/>\n<meta property=\"og:description\" content=\"Sketch is getting a lot of traction among web designers and developers. This is probably because it is intuitive, easy to learn and comes with many\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-30T15:19:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-cssbuddy.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-plugins\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-plugins\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"10 Free Sketch Plugins for Web Developers\",\"datePublished\":\"2021-04-30T15:19:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-plugins\\\/\"},\"wordCount\":825,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-plugins\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sketch-plugins\\\/sketch-cssbuddy.jpg\",\"keywords\":[\"sketch\",\"sketch plugins\",\"Web Developers\"],\"articleSection\":[\"Graphics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-plugins\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-plugins\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-plugins\\\/\",\"name\":\"10 Free Sketch Plugins for Web Developers - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-plugins\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-plugins\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sketch-plugins\\\/sketch-cssbuddy.jpg\",\"datePublished\":\"2021-04-30T15:19:04+00:00\",\"description\":\"Sketch is getting a lot of traction among web designers and developers. This is probably because it is intuitive, easy to learn and comes with many\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-plugins\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-plugins\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-plugins\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sketch-plugins\\\/sketch-cssbuddy.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sketch-plugins\\\/sketch-cssbuddy.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketch-plugins\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Free Sketch Plugins for Web Developers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Free Sketch Plugins for Web Developers - Hongkiat","description":"Sketch is getting a lot of traction among web designers and developers. This is probably because it is intuitive, easy to learn and comes with many","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/","og_locale":"en_US","og_type":"article","og_title":"10 Free Sketch Plugins for Web Developers","og_description":"Sketch is getting a lot of traction among web designers and developers. This is probably because it is intuitive, easy to learn and comes with many","og_url":"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-04-30T15:19:04+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-cssbuddy.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"10 Free Sketch Plugins for Web Developers","datePublished":"2021-04-30T15:19:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/"},"wordCount":825,"commentCount":10,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-cssbuddy.jpg","keywords":["sketch","sketch plugins","Web Developers"],"articleSection":["Graphics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/","url":"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/","name":"10 Free Sketch Plugins for Web Developers - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-cssbuddy.jpg","datePublished":"2021-04-30T15:19:04+00:00","description":"Sketch is getting a lot of traction among web designers and developers. This is probably because it is intuitive, easy to learn and comes with many","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-cssbuddy.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/sketch-plugins\/sketch-cssbuddy.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/sketch-plugins\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 Free Sketch Plugins for Web Developers"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6ew","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23964"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23964\/revisions"}],"predecessor-version":[{"id":54773,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23964\/revisions\/54773"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23964"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}