Create an “App” to auto-arrange your screens on a Mac

My daily driver for all things design and code is my MacBook Pro. Pre-pandemic, I would take this to and from work with me, plugging it into my external monitors when I’m at a desk. For whatever reason, however, Macs don’t appear to remember the arrangement of my monitors (is it just my monitors?), and so randomly I’d have to open up settings, select “Displays”, and fix them.

Now, I have this cool little “App” on my dock that I can click which will automatically arrange my monitors straight away. I say “App” in quotes because it’s more of a shortcut that simply runs an Automator script.

For this tutorial, I’ll go through how to install the relevant utilities, create the Automator script, and then create an app icon for it to look great in your dock.

Step 1: Getting set up

Before we can write the script, we need a few things set up.

Heads up! This tutorial may look complicated with the terminal commands and shell scripts, but if you’re following along with me, it really is just a copy/paste exercise. If you have any questions, then ping me a message over on my contact page.

Let’s get started. Go ahead and open up a new Terminal window.

We’re going to be using Jake Hilborn’s displayplacer utility, which first requires us to install Homebrew. So, in the terminal, paste the following:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

You’ll need to enter your password and then press RETURN to confirm the installation of Homebrew.

The installation may take a bit of time, especially if like me, you hadn’t installed the Xcode Command Line Tools first. (I’m writing this post just after re-formatting my Mac, so I’m still finding things I haven’t installed yet).

Next up, we need to install Jake’s utility. Once again, this is as simple as pasting the following into your Terminal window:

brew tap jakehilborn/jakehilborn && brew install displayplacer

With that complete, you should be able to type the following into your Terminal to get a nice displayplacer command that includes your current arrangement:

displayplacer list

This is how mine looked:

Copy and paste the generated displayplacer line as you’re going to need this later. For clarity, this is the line I’m saving from the above screenshot:

displayplacer "id:A350CF77-4C6E-A435-6B49-AE1A7CDF462B res:2560x1440 hz:60 color_depth:8 scaling:off origin:(0,0) degree:0" "id:FBCEACBD-D079-3B15-E8C7-8857E94B8A24 res:2560x1440 hz:60 color_depth:8 scaling:off origin:(2560,0) degree:0" 

Important! Don’t use my line above, it won’t work. These are the settings for my specific monitor setup, you’ll need your own.

OK, now we’re all set up to start making our Automator script – onto Step 2…

Step 2: Creating the Automator script

Let’s make the “App” now. Go ahead and open Automator.

We’re going to be creating an “Application” so click that and click “Choose”.

We want to execute the displayplacer command which is a Shell script. So start searching for “Run Shell Script” and drag the action into the main window.

Paste your displayplacer script into the text area:

Go ahead and hit “Run”. You’ll notice that it won’t actually work just yet 😰…

This is because we need to tell Automator where our script should be run from. This stumped me for a while when I was first figuring this out, but this reply from Jordan Jennings provided the solution.

Firstly, we need to change our Shell to “/bin/bash“.

Then, we need to prefix our script with the location of displayplacer. If you’ve been following along with me, this will be “/usr/local/bin/“.

Heads up! It looks like if you’re trying to do this on an Apple Silicon Mac, the location has changed to /opt/homebrew instead of /usr/local. Thanks for pointing this out to me, Zach! 🙌

Once you’ve done that, hit “Run” again and hopefully, if everything’s working, your screens will flicker and after a short time Automator will show “Workflow completed”. 🎉

At this stage, the app is technically done. You could go ahead and hit save right now, close this tab, and go make a cuppa. But let’s add a little bit of polish.

Search for the “Display Notification” action and add it to your app under the current one we have there. Fill in the Title and Message with whatever you want.

Now when you hit run, after it has completed the Shell Script, it’ll ping you a notification.

Go ahead and save your newly created app – give it a nice name.

Now, if you go to where you saved your app, you can double click it to run it, and you can also drag it to your dock!

And there we have it!

You’ve successfully made an app that will automatically adjust your screens. Once again, at this point, you can close this tab and be on your merry way with your new app added to your dock.

🤔 Although… wouldn’t it be nice if it had a snazzy custom icon?

Step 3: Making and assigning a custom icon to your new Automator app

I’ve literally just upgraded my Mac to Big Sur, so I’m going to be using this awesome macOS Big Sur icon Figma template by Martin David to start building my icon.

Go ahead and hit that “Duplicate” button, and start designing!

I started my design by copying the Safari icon, and went down the route of a monitor icon with arrows ‘switching’. Adding lots of shadows and gradients, I ended up with the following:

Now before we can use this icon as an app icon, we need to first convert it to an icon. To do this, you can use CloudConvert’s PNG to ICNS converter.

Start by selecting your icons artboard (remember to turn off the backgrounds first as you want it to be transparent!) and then export it at 1x PNG if you’re using Martin David’s template (it can’t be bigger than 1024x1024px).

Next, head over to the CloudConvert converter, and upload your PNG icon.

If you’d like, you can download my icns file by clicking the button below.

Download icon

All that’s left to do now is assign this icon to our app! Start by navigating to the app you created. Right-click it, and select “Get Info”.

Simply drag your shiny new .icns file to the little app icon in the Get Info window.

Summary

And there we have it. Your app is complete. Drag it to your dock and you can click it whenever your monitors load the wrong way around.

I hope you enjoyed this little tutorial, it’s my first one so if you have any feedback or questions, hit me up over on Twitter or using my contact form.