How to use math operations in the Sketch Inspector

In Sketch, you can use math operations to manipulate the properties of your designs in different ways. Whether you’re simply resizing layers, or you want to create a radial graph using pi, this guide will help you master mathematical design.

Get started with basic functions

Any numerical field in Sketch‘s Inspector supports mathematical calculations — from layer size to Canvas alignment. To turn a numerical field into a mathematical expression, simply add a basic math operator: +,-,/,* or ^. There are a few other operators that perform specific functions, which we’ll explore later in this post:

• The percent operator: % (only applicable in some fields)
• Alignment resize shortcuts: L, R, T, B, C, and M
• The round function: round()
• The math constant: pi (π)

Calculator 101

Before we go into what you can actually do with these calculations, let‘s run through how the calculator behaves. Like any standard calculator, Sketch’s mathematical operations follow the PEMDAS rule. Parenthesis () are always calculated first and can be nested (() + () - () ...) for specific ordering. Following that, Sketch will calculate your exponential operator ^ and then your standard multiplication * and division /, before addition + and subtraction -.

Resizing and realigning

The main use case for mathematical operations will be manipulating different Sketch elements in your design. Want to move your icon exactly 4px to the right? Make your Artboard exactly 2x bigger? No more guesswork, nervous mouse movements, or mental math. All you need is some simple math operations:

Move your layer horizontally (currently positioned at 100px) by 50 px

In the Inspector, change the layer’s X field to 100+50. This will automatically set the value to 150.

Create a new Text Style that is 50% larger than your body text (20pt)

In the Inspector for your text layer, change the Text Size field to 20*1.5. This will automatically set the value to 30.

Go further with advanced functions

Now that we have the basics down, let’s go through what else you can do with your calculations. As we mentioned before, there are other exceptions and specific functions that can help you do more with your mathematical operations. And combining them together will create even more opportunities.

Adjust layers based on their parent with %

The percent sign % is one of the more powerful operators in Sketch. Unlike the other operators, it changes properties based on the percentage of the direct parent container (in other words, the Artboard or group that it’s in).

You can use the % to make your layer a certain percentage of the parent‘s width. So if you want your navigation bar to be the full width of your Artboard, just type 100% in your width field and you’re done. You can also combine this with some other calculations to obtain more precise positioning:

To align the center of your layer horizontally (100px width) in the middle of its container (375px width)

In the X field: 50%-100/2 will automatically set the value to 138

Resize smarter with alignment shortcuts

When you resize an element in Sketch, it will always keep the top-left point as an anchor by default and resize accordingly. So if you add 10px to a square’s height, for example, Sketch will automatically add them to the bottom. You can, however, add shortcuts that let you take control of this behavior and work more efficiently.

The available options for alignment are:

• L resize from the Left (default) [Width field only]
• R resize from the Right [Width field only]
• T resize from the Top (default) [Height field only]
• B resize from the Bottom [Height field only]
• C or M resize from the Center or Middle (you can use these interchangeably)

You can add any of these shortcuts to the end of your value or calculation to tell Sketch where to start the resize.

For example, to resize your shape to be 200px wide while maintaining your right alignment

Width field: 200R will automatically set the width of your shape to 200 but keep the right edge of your layer where it is.

To resize your shape (335px wide) from the center to be 50% of its container (375px)

Width field: 50%c or 50%M will automatically set the width of your shape to 188 and maintain the alignment to the center.

Round your calculations easily with round()

Most designers will want to keep their designs as clean as possible. The round() function automatically rounds your value to the nearest integer. This is useful for any calculation that could potentially result in undesired decimal values that would tip your layer over pixel bounds.

For example, to generate the next shape in a sequence based on the golden ratio multiplier (1.618) in both its width and height (which are both 100px)

First, duplicate the object. Then, in its width and height fields enter round(100*1.618). This will round up the actual result of the calculation (161.8) to the nearest whole pixel — 162.

This is especially useful if you want to create naturally inspired scaling for your designs. You can even get creative and generate your own typographical scale by manipulating text fields and creating new Text Styles.

Utilize the power of pi

pi is a shortcut to the mathematical constant π. As you may remember, if you want to know the circumference of a circle, you multiply its diameter by pi. A great use case for pi in Sketch is to make radial progress bars — similar to the Activity rings on Apple Watch.

Joseph from LearnSketch.com shows us how to make perfect radial bars with a combination of things we’ve learned so far:

Coloring and shading

Resizing and moving aren‘t the only ways to manipulate elements with mathematical operations. Sketch’s color picker also supports mathematical calculations, so you can change colors, alpha or opacity.

A good example of how you can use this is to scale similar objects in varying degrees of exact luminosity. So, from inside the color picker, you can select HSL as your color management setting. Then go to the luminosity field and modify it as needed.

For example, if your color has 42 set in its luminosity field, you can create brighter and darker shades of the color in 20% increments

Duplicate the default color and rename it. Then set the Luminosity field to 42*0.8, which will create your new color with a luminosity of 34.

And for the darker increment

Duplicate the default color and rename it. Then set the Luminosity field to 42*1.2, which will create your new color with a luminosity of 50.

Control multiple elements with batch operations

Why should we settle for changing only one element? Saving the best for last, you can perform batch operations with a multi-selection of elements in Sketch. This is useful if you want to move, resize, or change anything while maintaining the original offset of the selected elements.

All you need to do is select the elements you want to change and do the same mathematical formulas in their fields. The main difference will be that, as multiple objects might have different values, some fields may show the value Multi. Don’t worry — you can still perform operations in these fields. Let’s take a look at some examples:

To move all the selected Artboards to the left by 120px, select all the Artboards that you wish to move.

In the X field: -120 will automatically shift all the Artboards by 120px to the left

To increase the height of layers by 10px, select all the layers that you wish to resize.

In the Height field: +10 will automatically increase the height of each layer by 10px more than its original size

We’ve only scratched the surface of what’s possible with math operators in this post. Have you created something amazing using math? Share it with us on social using the hashtag #MadeWithSketch — we’d love to share it.