Designers and Code: Why the Command Line Matters

"Should designers code?" is a question with no single correct answer. For many working designers, particularly those who have started online courses only to find the material difficult to apply in practice, the more useful question is: what specific coding skills can be learned quickly and used immediately? This article covers two foundational tools that open the door to practical coding: the command line and text editors.

Encouraging designers to pick up coding skills often meets with resistance — usually framed around the idea that design education was not meant to produce developers. It is a fair concern, but it conflates two distinct skill sets. The distinction is an important one. Software engineering involves a broad understanding of the scientific field of computing, from operating systems to algorithms to human-computer interaction. Coding, on the other hand, simply means becoming comfortable enough with a language to get a task done.

"The purpose of a Computer Science degree is to give students an overview of the scientific field of computing. While this includes some programming, programming is done primarily for the purpose of learning about other areas (e.g., operating systems, algorithms, machine learning, human-computer interaction). A CS degree is a good first step into the academic field of computer science."

— Kyle Thayer, PhD candidate at the University of Washington

Forking a repository or reusing a Stack Overflow snippet does not make anyone an engineer — but it may well increase the value that designer brings to a product team. And while design is not about producing beautiful mockups but about delivering an intuitive, functional experience, that delivery is impossible without understanding the materials from which the final product is built. A designer unfamiliar with the underlying code will struggle to judge what is possible, what is too expensive, or whether the intended behavior can actually be implemented.

The Role of Low-Code Tools

With tools like Webflow, Modulz, FramerX, and UXPin, it seems plausible that designers can rely entirely on drag-and-drop interfaces and never write code at all. That approach genuinely works for many applications. But there is a ceiling: without understanding the technical principles underneath a low-code platform, the value you can deliver with it is capped. Moreover, enterprise-scale applications still sit outside the reach of most low-code systems.

Logos and screenshots showing the code behind tools developed by companies like Modulz, Studio.Design, FramerX, and others.
Modulz, Studio.Design, FramerX, and other apps — there’s still a lot of code in there... (Large preview)

Working designers must operate in the environment that exists today, not one that may arrive later. A pragmatic blend of skills is always unique to the individual, and coding ability should be encouraged rather than made a job requirement.

Starting With the Command Line

For designers who want to learn to code, the terminal is a better starting point than a specific language or framework. The command-line interface (CLI) lets you interact with your computer's file system through typed commands instead of clicking through Finder or Explorer. Building a mental model of how files and folders are organized at this level is foundational for working with code.

The examples here focus on macOS and other *nix systems, but most concepts carry over to Windows PowerShell. A few key differences are noted where relevant.

Core Commands to Know

A handful of commands cover most day-to-day navigation and file operations:

  • cd — "Change Directory": followed by a path to navigate to a folder. Typing a folder name works if it's inside the current directory.
  • ls — Lists files and folders in the current directory.
  • pwd — "Print Working Directory": shows your current location in the file system.
  • mkdir — Followed by a name, creates a new folder in the working directory.
  • cd .. — Moves one level up. Stacking them (cd ../..) moves up multiple levels.
  • Tab — Autocompletes file and folder paths as you type.

On Windows, cmd supports cd, cd .., mkdir, and Tab autocomplete, but not ls or pwd. Windows PowerShell supports all of the above; Microsoft's "Using Familiar Command Names" help page lists the full set of available commands.

Regular Expressions

Regular expressions (regex) are a pattern-matching feature available in the CLI. Think of them as advanced boolean search operations: they let you define a pattern within a string of text and then act on any output that matches. Two practical uses:

  1. Normalizing a list of phone numbers written in different formats into a consistent output like (###) ###-####.
  2. Renaming groups of files from one naming convention, such as kebab-case, to another, such as CamelCase.

Managing Files in Bulk

The terminal excels at batch operations that would be tedious in a GUI:

  1. Create multiple years of folders with subfolders for each month in one command using mkdir -p with brace expansion, e.g. {list-of-years}/{list-of-months}.
  2. Move all files matching a pattern, such as mv Screen\ Shot* Screenshots, to tidy up a cluttered desktop.

These specific commands are *nix-oriented, but the same principles apply in PowerShell with its own syntax.

Scripting the Routine

Combining commands and regex into scripts unlocks bigger wins. Mike G's file renamer is a commonly used example, letting you specify a search scope (criteria), a pattern to match (re_match), and the replacement text (replace) before executing the rename. Batch resizing images via bash scripts is another way to save significant time.

Scripting also makes system maintenance far less painful. After backing up and wiping your OS, command-line tools can reinstall applications and fonts in minutes: Homebrew on Mac and Linux, or Chocolatey on Windows. Public setup guides exist for both platforms, covering everything from app installation to configuring a development environment.

For extending the terminal itself, a recommended stack includes Oh My ZSH for shell customization, zsh-autosuggestions for command history hints, zsh-syntax-highlighting for visual feedback, and z-jump-around for fast directory navigation.

Choosing a Text Editor

Sublime Text and VS Code (Visual Studio Code) are two editors with strong track records. Sublime was the front-end developer standard for years: lightweight, fast, with multiple cursors, a package manager, and highly customizable shortcuts. VS Code arrived around 2015 and gradually won over users from Atom and Sublime with a built-in terminal, tight Git integration, and a rich extension ecosystem. Both editors remain useful for non-developers too.

Editing With Multiple Cursors

Text editors offer one capability that word processors don't: multiple cursors in the same document. Whatever you type appears at every cursor position simultaneously. This is a genuine productivity tool for everyday design work.

Consider a list of names that needs to become lowercase, alphabetized email addresses. After pasting the list, Cmd + Shift + P opens the Command Palette — a searchable menu for nearly any text manipulation. Sorting and case conversion happen in seconds. Then Ctrl + Shift + arrow keys adds cursors to each line, and typing once inserts the domain across the whole list.

Spreadsheets can do this with formulas, but a text editor is often quicker for one-off transformations, with no formula syntax to remember and no mouse-driven selection.

Which Editor Fits?

The honest answer is that it depends on your context:

  • New to these tools — Sublime's free trial is a solid entry point. It's lightweight, doesn't strain system resources, and supports custom key bindings and plugins for extending functionality.
  • Coming from Sublime, Atom, or another editor — VS Code is worth evaluating. The Microsoft team has built a powerful but approachable editor.

Both have a place. Sublime excels at speed: it opens in a fraction of a second, which is ideal for quick text manipulation. For more substantial work, VS Code's all-in-one package is hard to beat — its plugin ecosystem, command palette, and customizable interface make it an environment you can truly make your own. Microsoft's ongoing investment in developer productivity keeps the editor on a steady improvement track.

Where This Leaves You

By now, you should have a working grasp of the terminal, a few shortcuts that make daily work less tedious, and a clear sense of which editor fits your workflow. That is the foundation you need before moving on to version control, HTML and CSS, and core engineering habits, which we will cover in the next part.

Making Corrections

If any part of this walkthrough felt unclear, outdated, or just plain wrong, that is worth fixing. Leave a comment below, send a direct message, or tag the author on Twitter so the guide can be improved for the next reader.

Smashing Editorial