July 15, 2024

Quick Tip: Mathematical Operations in Sketch

Whoever told you that you’d need math later on in life might be wrong in this case, because Sketch App takes care of all that math for you.

If you’ve ever used a computer calculator then you already know how to speed up your workflow in Sketch by specifying values with formulas. Let’s look at an example.

Open up Sketch App. Press “R” to create a Rectangle and in The Inspector choose ”194” for the Width and “277” for the Height; any other values are completely up to you.

Create a Rectangle in Sketch

Now let’s create another rectangle(or duplicate this one – command+d) that is 150% bigger than this rectangle. For the Width, lets try “1942”, and “2772” for the Height.

Sketch rectangle with maths

Easy right?

Now let’s try something more complex; undo(command+z) those last two steps and we’ll add different values.

For the Width, try “(1941.5)-10” and for the Height “(2771.5)-20”. Basically this means the same thing as before, only we’ve trimmed 10px and 20px from the shape.

If you didn’t undo the last two steps just click one of the larger rectangles, hold option, and then hover over the other rectangle. Sketch will tell you exactly how much space exists between the two layers – just for comparison.

Sketch App complex math operators

Hope you enjoyed this quick tip! Be sure to put it to good use and share your thoughts in the comments below.

Daniel Schwarz is a full-time design writer and digital nomad. When he’s not writing about design and code he’s actually doing it(sometimes) at Airwalk Studios, a creative studio of which he's the founder. 24 years of age, originally from London.

Leave a Reply

Your email address will not be published. Required fields are marked *