{"id":441,"date":"2019-07-14T01:14:11","date_gmt":"2019-07-14T01:14:11","guid":{"rendered":"https:\/\/www.nleby.com\/longform\/?p=441"},"modified":"2019-09-06T19:34:24","modified_gmt":"2019-09-06T19:34:24","slug":"sketch-plugin","status":"publish","type":"post","link":"https:\/\/www.nleby.com\/longform\/2019\/07\/14\/sketch-plugin\/","title":{"rendered":"Sketch plugin to automatically update image layers using JavaScript"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">One day a few of my peers on the creative team came to me with a request\/challenge \u2013 could I build a Sketch plugin that streamlines keeping image assets up-to-date in their comps? After a few iterations, I believe I settled on a solution for them, see the [narrated] video below for details.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>assign local\/remote URLs to image layers<\/li><li>data is saved at the document level and persists (see <a href=\"https:\/\/developer.sketch.com\/file-format\/\">sketch file format<\/a> for more info about this)<\/li><li>upon menu item click, or document open, grab layer object via saved layer ids and update image data with associated URL<\/li><li>no need to iterate through layer hierarchies (slow\/wasteful), no need to rename layers,  no need to keep directories in a specific structure<\/li><li><a href=\"https:\/\/developer.sketch.com\/reference\/api\/#settings\">Document Settings<\/a> &#8211; for saving data<\/li><li><a href=\"https:\/\/developer.sketch.com\/plugins\/actions\">Actions<\/a> &#8211; for listening for document open, etc.<\/li><li><a href=\"https:\/\/developer.sketch.com\/reference\/api\/#fromnative\">From Native<\/a> &#8211; for getting document from action context<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Sketch plugin to automatically update layer images\" width=\"800\" height=\"600\" src=\"https:\/\/www.youtube.com\/embed\/CMZDcH1mne4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you have any further questions about this, please reach out!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">More info &#8211; <a href=\"https:\/\/developer.sketch.com\">https:\/\/developer.sketch.com<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Another plug-in:<\/h4>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Sketch Plugin 2\" width=\"800\" height=\"600\" src=\"https:\/\/www.youtube.com\/embed\/hMwtY0hKtgs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>One day a few of my peers on the creative team came to me with a request\/challenge \u2013 could I build a Sketch plugin that streamlines keeping image assets up-to-date&hellip;<\/p>\n<p> <a class=\"more-link\" href=\"https:\/\/www.nleby.com\/longform\/2019\/07\/14\/sketch-plugin\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[27,69,34,33],"class_list":["post-441","post","type-post","status-publish","format-standard","category-ulta","tag-javascript","tag-plugin","tag-sketch","tag-website"],"_links":{"self":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts\/441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/comments?post=441"}],"version-history":[{"count":9,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts\/441\/revisions"}],"predecessor-version":[{"id":571,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts\/441\/revisions\/571"}],"wp:attachment":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/media?parent=441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/categories?post=441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/tags?post=441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}