Why the Terminal

Getting Started

Opening Terminal

Press Cmd + Space, type Terminal, and hit Enter. Or find it in Applications > Utilities > Terminal.

Anatomy of a Command

command  -flag  argument
Part What it does Example
Command The program you’re running ls
Flag Modifies behavior -l
Argument What you’re acting on ~/Desktop

So ls -l ~/Desktop means: list the contents of my Desktop in long format.

Essential Commands

Command What it does Example
pwd Print where you are pwd
ls List files here ls
ls -la List all files with details ls -la
cd Change directory cd ~/Projects
cd .. Go up one level cd ..
cd ~ Go to home directory cd ~

Drag a folder from Finder into Terminal to paste its path automatically.

Working with Files and Folders

Command What it does Example
mkdir Create a folder mkdir new-project
touch Create an empty file touch index.html
cp Copy a file cp logo.png backup.png
cp -r Copy a folder cp -r assets/ backup/
mv Move or rename mv old.sketch new.sketch
rm Delete a file rm unused.png
rm -r Delete a folder rm -r old-project/
open Open in default app open mockup.fig
open . Open folder in Finder open .

rm does not move files to the Trash. They are permanently deleted. Double-check before running it.

Workflows for Designers

Batch Rename Files

Rename every .jpeg to .jpg in the current folder:

for f in *.jpeg; do mv "$f" "${f%.jpeg}.jpg"; done

Resize Images with sips

Built into macOS. Resize all PNGs to a max width of 1200px:

sips --resampleWidth 1200 *.png

Convert HEIC to JPG

for f in *.HEIC; do sips -s format jpeg "$f" --out "${f%.HEIC}.jpg"; done

Optimize Images

If you have ImageOptim installed:

open -a ImageOptim *.png

Generate a File Tree

Useful for documentation or project overviews:

find . -not -path '*/.*' | head -50

Git for Designers

Git tracks changes to files so you can collaborate, undo mistakes, and keep a complete history of your work.

First-Time Setup

git config --global user.name "Your Name"
git config --global user.email "you@example.com"

Daily Workflow

git status
git add .
git commit -m "Update hero section layout"
git push

Common Scenarios

I want to… Command
Clone a project git clone <url>
Create a branch git checkout -b feature/new-icons
Switch branches git checkout main
Pull latest changes git pull
See commit history git log --oneline
Undo changes git checkout -- filename

Installing Tools

Homebrew

The Mac package manager. Install it once:

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

Then install tools:

brew install node        # Build tools and scripts
brew install ffmpeg      # Video and audio conversion
brew install imagemagick # Advanced image processing

Node.js and npm

Many design tools and static site generators run on Node:

npm install -g live-server

Customizing Your Terminal

Oh My Zsh

Makes your terminal more readable and pleasant to use:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Aliases

Add shortcuts to your ~/.zshrc file:

alias ll="ls -la"
alias proj="cd ~/Projects"
alias gs="git status"
alias gp="git push"

After editing, reload with source ~/.zshrc.

Quick Reference

Action Command
Where am I? pwd
List files ls -la
Go to folder cd folder-name
Go up cd ..
Create folder mkdir name
Create file touch name
Open in Finder open .
Open file open file.png
Copy cp source dest
Move / rename mv source dest
Delete file rm file
Git status git status
Git commit git commit -m "msg"
Git push git push
Clear screen clear
Cancel command Ctrl + C