How to Use and Customize the Terminal, for Designers

November 01, 2018 • 10 min read

Jason WalkerSr. Design Technologist

Anything related to the terminal is likely to induce anxiety for designers who are unfamiliar with it.

These days, it’s common for designers to want to set up a local copy of the products their teams are working on. And, more often than not, setting up a local environment for your product requires some basic familiarity with the terminal.

Anything related to the terminal is likely to induce anxiety for designers who are unfamiliar with it. Not to worry though, while learning and using the command line can be intimidating, there are some great tools out there to help improve your experience with the terminal.

Let’s walk through some basic setup for getting our terminal in proper order.

Using common terminal commands

Install Homebrew, Node.js, and Yarn

Upgrade your terminal with Oh My Zsh

Edit Hyper’s preferences

Add plugins and themes

Before starting

The SendGrid design team exclusively uses macOS, so all directions from here on out assume you’re following along on a Mac. I’ve done my best to include apps and tools that are cross-platform and will work regardless of your OS preference.

Common terminal commands

Let’s first start with some basics you’ll want to know in order to navigate your local filesystem to set up and manage your projects.

The home directory

When opening a new instance of your terminal, you’ll start in the home directory of your user account. On macOS, this is typically:

/Users/your-username

Print working directory

This one is pretty self-explanatory, but can be helpful if you’ve navigated around your system and aren’t sure where you’re at. Let’s try it by typing:

pwd

You should see your terminal print the path you’re currently in. If you just opened a new terminal, this is most likely your home directory:

/Users/your-username

Making a directory

We’ll need a folder to put our projects in, so let’s learn how to create one from the command line. Let’s create a folder named “Projects” using the make directory command:

mkdir Projects

Changing directories

Now that we’ve created a new directory to store all of our projects, let’s navigate into it using the change directory command:

cd Projects

We also don’t have to move between our folders one command at a time either, we could just as easily jump into a specific project within that folder by typing:

cd Projects/sendgrid-design

Or a specific folder within that project:

cd Projects/sendgrid-design/src/css

You can also move backward if you need:

cd..

And finally, if you need to return to your home directory at any time:

cd ~

Listing files and folders

It’s common that you won’t know the exact structure of every project. This is where the list command is helpful. Let’s list all of the folders in our home directory:

ls ~

It’s a little easier to read our files and folders if we show them on one line using the long flag:

ls -l

And finally, for most of our development projects, we’ll want to see any hidden files too by adding the all flag:

ls -la

Clear your screen

After typing a bunch of commands and navigating around, your terminal window can get a bit cluttered. We can use the clear command to clean up our workspace:

clear

Using clear won’t destroy your history either, you can always scroll up to see everything we’ve done so far.

Installing Homebrew, Node.js, and Yarn

We’re going to install Homebrew so we can easily install some other helpful tools. I prefer installing Node.js and other software through brew because they are installed locally to your user account, so you avoid needing to run things as an admin and repeatedly typing your password over and over. Homebrew is also super easy to install:

Installing common package managers

Now that we have the brew command available, we’re going to install a couple of the most common package managers. These will help us install development dependencies that you’ll likely need to get your projects up and running. You’ll often see in README.md or INSTALL.md how to install your project dependencies, typically:

npminstall

Install npm via Node.js

brew install node

Install Yarn

brew install yarn

Upgrade your terminal with Oh My Zsh

Our terminal is set up with some great tools for installing apps, but it’s still lacking in the style department. We’re going to install Oh My Zsh, a community-driven framework for Zsh.

The thing I love about Oh My Zsh is that it instantly improves the default shell provided by macOS. It’ll color files and folders, give you information about your git repository, and with over 200 plugins available, it’s easy to continue to add functionality.

You’ll likely need to enter your admin password for Oh My Zsh to complete its install. Afterward, you should have an updated style in your terminal window. We can quickly check to see it is working by using the ls command to see a list of folders that should now be colored.

Installing a better terminal app

The default terminal app is pretty basic, so let’s install a 3rd party terminal that allows us to easily customize it to our preferences. Hyper is an Electron-based terminal that has a growing list of packages, themes, and resources you can use to extend your terminal. It’s lightweight, fast, and available for macOS, Windows, and Linux.

When you first open Hyper, you may notice that it doesn’t automatically work with Oh My Zsh. We need to edit Hyper’s preference file in order to adjust the shell it’s using (it defaults to bash). Before we do that, let’s connect our terminal with a code editor like VSCode, and install a better font so we can edit and read our files with ease.

Installing an editor command

When working from the command line, it is helpful to launch your code editor to edit a file or even the contents of a specific directory. We’re going to use VSCode, but most other editors like Atom and Sublime support this.

Install the code command

Open the VSCode command palette:

Command + Shift + P

Type Shell and look for the following option:

Shell Command: Install 'code' command in PATH

Selecting this will install the the shell command code so we can use that to open VSCode from our terminal for a specific file, or directory.

Open a specific folder:

code Projects/sendgrid-design

Open a specific file:

code Projects/sendgrid-design/src/css/styles.css

Open the current working directory:

code .

Installing a better font

Most terminals ship using a monospaced font by default, as they should. The problem is that most pre-installed monospace fonts don’t have the character support for all the symbols we use within modern programming. Insert Fira Code, an extension of the Fira Mono font containing a set of ligatures for common programming multi-character combinations.

Editing Hyper’s preferences

After you’ve installed the font locally on your OS, let’s edit Hyper’s preference file to adjust the font-family and font-size using VSCode. For reference, Hyper’s preference file is located in your home folder as .hyper.js.

Open .hyper.js in VSCode:

code ~/.hyper.js

Updating the font size and family

You’ll see options for fontSize and fontFamily on lines 12 and lines 15. Adjust the size to your desired preference, I’m using 12 for font size, and then setting the family to just ‘Fira Code’. I decided against fallbacks because I have the font installed and don’t plan on using this preference file anywhere but my local computer.

Updating the shell

We’ll want to use Oh My Zsh with Hyper too, not just the standard terminal app. You can find this setting on line 100, and we just need to update it to use zsh for the shell.

shell:'zsh',

Save this file and reboot the Hyper app to see your changes. There are also a lot of other settings you can adjust in Hyper, and most are well commented so you know what to expect when editing them.

Adding plugins and themes

Now that we’ve got a pretty sweet setup, there isn’t much left to do except for adding some plugins and themes. Let’s walk through adding one of each so you’re familiar with the process and can then experiment with your own combinations to find your ideal setup.

Installing the Auto Suggestions plugin

The auto suggestions plugin is one of my favorites, suggesting commands and paths as you type. It’s based on your history so it’ll need to learn some of the more common commands you run on a day-to-day basis, but once it’s installed, it’ll save you a ton of extra typing.

We’ll install it by cloning the plugin into our oh-my-zsh custom plugins folder:

Updating the Zsh preferences file

Now that we’ve got a plugin and a theme installed, we’re ready to update our Zsh preferences file so we can start using them.

First, we can change the theme on line 10:

ZSH_THEME="spaceship"

And the plugins can be added on line 54:

plugins=(git autosuggestions)

After saving, reboot Hyper or the terminal app, and you’re in business!

Closing Thoughts

We’ve gone through quite a bit in this article and I hope it was helpful for learning how you can use and customize your terminal. There is an endless amount of customization you can do and now that you’re a bit more familiar with the process, experiment with different plugins and themes to find what works best for you. If you have any further questions about this setup, I encourage you to explore the Github repositories for all the software I’ve used above. Happy command lining!

Jason WalkerSr. Design Technologist

As Sr. Design Technologist, Jason's focus is on building consistent user interfaces across SendGrid's products. When he's not pushing pixels, Jason enjoys riding his Ducati on curvy mountain roads, snowboarding with friends, and visiting local whiskey distilleries.