How to Make a Progress Bar Symbol in Sketch That Actually Lets You Resize the Progress Bar

Posted 5 months ago by Jon Moore

Tiny Techniques

Or, “Why did it take me so long to figure this out?”

Tiny Techniques are bitesized design tricks to make you a better, faster designer in Sketch. Sometimes you’ll already be doing it…sometimes we’ll blow your mind.

The Problem

Symbols are great because they’re reusable elements that you can insert throughout your document, and any time you update them, those changes cascade to each instance.

Unfortunately, you’re limited by what you can edit with overrides: Text, Colors, and Nested Symbols. That’s about it.

Sure, you can always create multiple progress bar symbols of varying widths and use them as overrides, but what’s the fun in that?!

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.

PRAISE TO THE MOST HIGH.

The Solution

To be honest, this is a really dumb hack, but it works perfectly.

Requirements:

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:

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 side.

We can take advantage of this behavior in our progress bar symbol.

The Layers

Now here’s the trick:

Move the Slider stack layer off of the symbol artboard canvas. Make sure it’s still inside of the artboard and not floating in the document.

Since you’ve pinned the left edge of this stack and your text layer is set to Auto width, when you override the text layer, it’s going to push the bar to the right…and into the progress bar artboard.

You now have complete control over the length of the bar. You can even get fancy with how your progress bar looks…like how about some cool dots?

Download it for free!*

Visit my Medium post to download these progress bar symbols for free or leave a little tip for some 🍩’s (that’s a donut)

When I’m not spending WAY too much time perfecting ONE stupid little symbol, I’m working on Sketch design tools at UX Power Tools to make you a better, more efficient designer.

UX Power Tools: A Design System Starter Kit for SketchUX Power Tools is a sophisticated design system of common components for crafting world-class app and products in Sketch.
Get started with Marvel Enterprise

Get started with Marvel Enterprise

Some of the worlds most creative companies use Marvel to scale design across their organisation.

Get started with Enterprise

Jon is the lead designer at Innovatemap and co-founder of UX Power Tools.

Related Posts

At times, it seems like eCommerce is a never ending search for conversions; for a strategy that leads to sale after sale. But, as you’ve undoubtedly realized by now, that’s sadly not possible. Sure, you can do something here and something there that will help you out—to a certain extent—but nothing remotely close to an eCommerce holy grail that makes… Read More →

There are lots of great tools for drawing wireframes today. However, I still prefer my good ol’ paper wireframing kit. In this post I’ll tell you why and explain how paper wireframing will make you a better designer. In 2012 I was planning on taking my wireframing skills to the next level. I had gotten the excellent app Paper by… Read More →

Your portfolio is a story about you and your work — your expression of growth through all the obstacles, surprises, successes and failures. This is your epic. Illuminate the arc of your career and why you matter. For the audience, your portfolio showcases your problem-solving superpowers, hard and soft skills, and your ability to reflect upon your successes and failures…. Read More →