{"id":14736,"date":"2018-05-01T10:44:53","date_gmt":"2018-05-01T09:44:53","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=14736"},"modified":"2018-06-16T14:52:06","modified_gmt":"2018-06-16T13:52:06","slug":"make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar\/","title":{"rendered":"How to Make a Progress Bar Symbol in Sketch That Actually Lets You Resize the Progress\u00a0Bar"},"content":{"rendered":"<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Tiny Techniques<\/h2>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Or, \u201cWhy did it take me so long to figure this\u00a0out?\u201d<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">Tiny Techniques are bitesized design tricks to make you a better, faster designer in Sketch. Sometimes you\u2019ll already be doing it\u2026sometimes we\u2019ll blow your mind.<\/span><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The Problem<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Symbols are great because they\u2019re reusable elements that you can insert throughout your document, and any time you update them, those changes cascade to each instance.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Unfortunately, you\u2019re limited by what you can edit with overrides: Text, Colors, and Nested Symbols. <em>That\u2019s about it.<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Sure, you can always create multiple progress bar symbols of varying widths and use them as overrides, but <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>what\u2019s the fun in that<\/em><\/strong>?!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I figured out a way to create a single progress bar symbol that lets you have complete control over the width of the progress bar.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">PRAISE TO THE MOST HIGH.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The Solution<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To be honest, this is a really dumb hack, but it works perfectly.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Requirements:<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>The <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/github.com\/AnimaApp\/Auto-Layout\">Auto Layout<\/a> plugin by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@AnimaApp\">Anima App<\/a>\n<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The sleight-of-hand trick driving this entire solution is pinning. When you pin something on a single edge (left\/right\/top\/bottom), that layer\/group\/stack will remain fixed at that edge and grow in the opposite direction:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/04\/1YDREYpM8ybw_ztf9kX1Aig.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/04\/1YDREYpM8ybw_ztf9kX1Aig.gif\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The black dots are in a horizontal stack with 8px margins. First, I pin the stack to the right. When I duplicate the dots inside, they will grow to the left since I pinned it on the right\u00a0side.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We can take advantage of this behavior in our progress bar symbol.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/04\/1nx86GkfwsTqStS6RHEWhVg.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/04\/1nx86GkfwsTqStS6RHEWhVg.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">The Layers<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Slider: <\/strong>Create a horizontal stack with 0px margin that contains a text layer at 0% opacity set to <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Auto<\/strong> width <em>(not fixed!)<\/em>, and your progress bar fill. I\u2019m using a nested color symbol so I can swap the bar color, but you can just use a plain old rectangle with a fill. This stack is pinned on the left edge.<\/li>\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Bar Mask: <\/strong>This will mask the bar as it slides into the progress container. Think of it like a subway train arriving at the platform. You can\u2019t see it until it appears in the opening.<\/li>\n<li>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Container:<\/strong> This forms the container of your progress bar. It can be a solid fill or a border (whatever floats your ??).<\/li>\n<\/ul>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Now here\u2019s the\u00a0trick:<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Move the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Slider<\/strong> stack layer off of the symbol artboard canvas. <em>Make sure it\u2019s still inside of the artboard and not floating in the document.<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/04\/19AXg59Sl-a9Mi6tADK9zAQ.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/04\/19AXg59Sl-a9Mi6tADK9zAQ.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Since you\u2019ve pinned the left edge of this stack and your text layer is set to Auto width, when you override the text layer, it\u2019s going to push the bar to the right\u2026and into the progress bar artboard.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/04\/1-o_uBbawn3Ryumn18Bqo6w.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/04\/1-o_uBbawn3Ryumn18Bqo6w.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You now have complete control over the length of the bar. You can even get fancy with how your progress bar looks\u2026like how about some cool dots?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/04\/18pB2H_zqSA98oLycxTktzA.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/04\/18pB2H_zqSA98oLycxTktzA.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/04\/1Dxe2yFmHnidVziOdVQGGVw.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/04\/1Dxe2yFmHnidVziOdVQGGVw.gif\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Download it for\u00a0free!*<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Visit <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/ux-power-tools\/how-to-make-a-progress-bar-symbol-in-sketch-that-actually-lets-you-resize-the-progress-bar-c155b04eda1e\">my Medium post<\/a> to download these progress bar symbols for free or leave a little tip for some ????\u2019s (that\u2019s a donut)<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/04\/Progress_20Bars.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/04\/Progress_20Bars.png\" alt=\"\" width=\"1005\" height=\"492\" class=\"alignnone size-full wp-image-14753\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/04\/Progress_20Bars.png 1005w, https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/04\/Progress_20Bars-600x294.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/04\/Progress_20Bars-768x376.png 768w\" sizes=\"auto, (max-width: 1005px) 100vw, 1005px\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>When I\u2019m not spending WAY too much time perfecting ONE stupid little symbol, I\u2019m working on Sketch design tools at <\/em><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.uxpower.tools\/\"><em>UX Power Tools<\/em><\/a><em> to make you a better, more efficient designer.<\/em><\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.uxpower.tools\/\" title=\"https:\/\/www.uxpower.tools\/\" (https:\/\/www.uxpower.tools\/\" title=\"https:\/\/www.uxpower.tools\/) class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">UX Power Tools: A Design System Starter Kit for Sketch<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">UX Power Tools is a sophisticated design system of common components for crafting world-class app and products in Sketch.<\/span><\/span><\/span><\/a><\/section>\n","protected":false},"excerpt":{"rendered":"<p>Tiny Techniques Or, \u201cWhy did it take me so long to figure this\u00a0out?\u201d Tiny Techniques are bitesized design tricks to make you a better, faster designer in Sketch. Sometimes you\u2019ll already be doing it\u2026sometimes we\u2019ll blow your mind. The Problem Symbols are great because they\u2019re reusable elements that you can insert throughout your document, and any time you update them,&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":220,"featured_media":14759,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-14736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Bitesized design tricks to make you a better, faster designer in Sketch. Sometimes you\u2019ll already be doing it\u2026sometimes we\u2019ll blow your mind.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make a Progress Bar Symbol in Sketch That Actually Lets You Resize the Progress\u00a0Bar | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Bitesized design tricks to make you a better, faster designer in Sketch. Sometimes you\u2019ll already be doing it\u2026sometimes we\u2019ll blow your mind.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-01T09:44:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-06-16T13:52:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/04\/progress-bar.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/04\/progress-bar.png\",\"width\":1600,\"height\":700},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar\/\",\"name\":\"How to Make a Progress Bar Symbol in Sketch That Actually Lets You Resize the Progress\\u00a0Bar | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar\/#primaryimage\"},\"datePublished\":\"2018-05-01T09:44:53+00:00\",\"dateModified\":\"2018-06-16T13:52:06+00:00\",\"description\":\"Bitesized design tricks to make you a better, faster designer in Sketch. Sometimes you\\u2019ll already be doing it\\u2026sometimes we\\u2019ll blow your mind.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/402cbab3c7fb0312cfe6fd593b9b2231\"},\"headline\":\"How to Make a Progress Bar Symbol in Sketch That Actually Lets You Resize the Progress\\u00a0Bar\",\"datePublished\":\"2018-05-01T09:44:53+00:00\",\"dateModified\":\"2018-06-16T13:52:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/make-progress-bar-symbol-sketch-actually-lets-resize-progress-bar\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/402cbab3c7fb0312cfe6fd593b9b2231\",\"name\":\"Jon Moore\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/775dfe78ed8987b6f1e239c4293d852a712b9c2e6ada1616a010d88bb6a74f2c?s=96&d=mm&r=g\",\"caption\":\"Jon Moore\"},\"description\":\"Jon is the lead designer at Innovatemap and co-founder of UX Power Tools.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/14736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/220"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=14736"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/14736\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/14759"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=14736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=14736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=14736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}