For designers
Run a real design workflow from the terminal.
You ship pixels for a living, but the work between Figma and a production build still depends on the command line. Most of it is small — renaming a folder of exports, converting PNGs to WebP, syncing assets, checking a thing into git. learn-terminal teaches you those moves in your browser, against real practice files, so you can stop pinging engineers for help that takes ninety seconds once you know the shape of it.
Why the terminal is worth an afternoon
Design tools have caught up everywhere except the moment your file leaves Figma. The export pipeline, the asset folder, the icon set, the marketing image batch — these all live as files on disk, and a few terminal commands move them faster than any GUI ever will. Renaming twenty exports is a coffee break in Finder. It's one line in the shell, and the line works the same way the next time you need it.
You won't be writing scripts. You'll learn to read a command, know what it touches before it runs, and reuse the small handful that pay for themselves every week. That makes you faster — and it makes you readable to the engineers you hand files to. A designer who can commit a folder of assets and write a sensible commit message is the designer the platform team stops dreading on release day.
What you can do by the end
Strip @2x suffixes from a folder of exports
tty/example · designers $ ls icon-home@2x.png icon-search@2x.png icon-settings@2x.png $ for f in *@2x.png; do mv "$f" "${f/@2x/}"; done $ ls icon-home.png icon-search.png icon-settings.pngA short loop with a single substitution. The forty-rename ritual in Finder collapses into one line you will reuse every time Figma exports for the wrong density.
Convert a folder of PNGs to WebP
tty/example · designers $ ls hero.png hero@2x.png product-shot.png $ for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done $ ls *.webp hero.webp hero@2x.webp product-shot.webpcwebp ships with the WebP tools package. Same loop pattern, different conversion. The quality flag (-q) trades file size for fidelity, and the build team gets the format the bundler actually wants.
See what changed between two export folders
tty/example · designers $ diff -rq old-exports/ new-exports/ Only in new-exports/: icon-archive.svg Files old-exports/hero.png and new-exports/hero.png differ
Recursive diff (-r) showing only names (-q). You see what was added, removed, or changed without opening anything — useful when a designer hands you a refreshed export drop the morning of a launch.
Find every reference to a renamed asset
tty/example · designers $ grep -rl "logo-old.svg" src/ src/components/Header.tsx src/components/Footer.tsx
Recursive grep with -l prints only filenames. When you rename a brand asset, this is how you confirm nothing still points at the old name before you push the change.
Commit your work alongside engineering
tty/example · designers $ git add design/icons/ $ git commit -m "add archive and trash icons" $ git push
Three commands, one workflow. The version of every file is recoverable, and your work shows up in the same history engineering already watches. No more 'final-final-v3' folders.
What you'll be able to do
By the time you finish the course, you will be able to:
- Batch-rename, resize, or convert hundreds of exports in one line.
- See exactly what changed between two folders without opening a single file.
- Read git output well enough to follow what engineering is doing day to day.
- Find every reference to an asset before you rename it.
- Skip the engineer ping for any of the above.
Lessons designers tend to start with
Start with lesson 1
The first lesson takes about five minutes and runs entirely in your browser. No install, no signup, nothing to break. You will close the tab knowing where you are, what a command looks like, and what to read next.