I’ve always loved reading about what gear photographers use in their work. That glimmer of inspiration that you get when you imagine the creativity you could channel if only you had that lens. I figured I’d take a similar approach by documenting what tools I’m using today as a product designer. Long gone are the days of Flash and Dreamweaver, but who’s to say that my current stack won’t drastically change in the next 10 years?

The software

Let’s start with the software. Generally, my philosophy is to keep things as light and “default” as possible. There was a time where I was a customization fiend, but these days, I find that I just don’t have the time to tweak and tune every little thing.

Figma

For UI and UX design, I live pretty much solely in Figma (and FigJam). It took a little more than a nudge to switch from Sketch so many years ago, but I’ve been using it religiously ever since. There are definitely some things I don’t like, but it’s become the industry standard and I don’t see that changing any time soon.

Affinity Suite

I try to steer clear of Adobe products primarily due to their predatory pricing. Affinity’s suite of product has been a godsend with Designer, Photo, and Publisher being great replacements for Illustrator, Photoshop, and InDesign respectively. There is definitely some re-learning required, but for my limited usage, Affinity’s offerings are more than enough. They also have some great iPad companion apps and it’s cross platform on Windows too. And the kicker? It’s a one time payment — no subscription!

Affinity recently got acquired by Canva, so let’s hope this doesn’t get mucked up. 🤞

iTerm2

I use the terminal a lot. I recently wrote about some of the stuff I do with the terminal too. iTerm is a fantastic terminal emulator that brings a bunch of improvements to the existing Terminal application that ships with macOS.

NeoVim

I just recently switched from VSCode to NeoVim. There isn’t necessarily anything wrong with VSCode — it’s a fantastic editor and I still hop into it from time to time. However, I found myself spending a lot more time hopping between macOS and Windows/WSL2 and the muscle memory between each OS was killing my productivity. I wanted to standardize the keybindings I was using in my editor and leveraging Vim (and thus Vim motions) seemed like a good approach and that’s where I landed.

I actually initially started with using the vscode-neovim extension which enables Vim mode for VSCode, but eventually found myself configuring NeoVim enough to use standalone. You can check out my config on GitHub.

Chrome

I’m still using Google Chrome as my daily driver web browser. Web is the primary platform that I design for and Chrome is still leading in market share so I don’t see a reason to switch until something egregious happens.

Notion

I use Notion as my jack of all trades knowledge base. Notes, to do lists, writing. It does pretty much everything and it’s good at it. I do get a sense that they’re adding more and more features which is great, but at the same time worrisome. I’m not in the audience of making them tons of money so I feel like there’s some misalignment in terms of endgame goals for the business. Luckily most of my usage is just text so I feel comfortable with how portable everything is.

Alfred

I don’t know what I’d do without Alfred. It’s much more than an application launcher for me. There are so many workflows that I use constantly. I’ve even written and open sourced a few of them myself. For instance, searching devdocs.io by typing docs or generating lorem ipsum dummy text in various lengths by typing lipsum.

1Password

If you aren’t already using a password manager, do yourself a favor and get one today. It’s super important to maintain good password hygiene and a password manager like 1Password just makes that easy. Especially today where so much software SaaS; one compromised account could cascade into a world of headache. I love their macOS and iOS apps — the Windows version is getting better, but overall, I’m glad that it exists.

Kap

I find myself clipping short screen caps quite often which is where Kap, a screen recorder, comes in handy. Sharing a video recording of a UI bug or some work in progress that amounts to less than a megabyte is so much more impactful than a static screenshot.

Tailscale

Tailscale is essentially a private VPN service. It allows you to network devices with nearly zero configuration. They have a very generous free tier that meets all my needs and the software is absolutely no fuss. I use this mostly for previewing local development environments on my phone or other devices.

Rectangle

Rectangle is a window manager for macOS. I don’t use a dual monitor setup (unless you count the laptop screen as a second monitor) so most of the time I have two splits up at a time. It’s really great to be able to move windows across screens with the tap of a hotkey.

Windows has its own built-in window manager which is good enough, but sometimes I wish it was as configurable as Rectangle.

ItsyCal

ItsyCal is a small app that adds a calendar to your macOS menu bar. It’s a really convenient way to get a glance at what your upcoming schedule looks like. There are also some really nice convenience features like being able to press ⌘J to join the video call that’s linked in a calendar invite. Originally, I installed ItsyCal because it provided a lot more customization in the date/time format of the system clock, but its other features have proven itself as invaluable to my calendar-related productivity tasks.

The tech stack

I figured it would be worthwhile to call out what technologies I’m working with these days to give a glimpse of what tools I use to build things. I’m almost entirely working in JavaScript/TypeScript these days so that naturally means working with node.js. I’m mostly developing small prototypes on the frontend, but occasionally I’ll spin up a small backend API to bridge a gap.

TypeScript

I was originally introduced to TypeScript when the company I was at switched from Angular.js to Angular 2. At the time, I didn’t appreciate the utility that TypeScript provided and felt that it was a hinderance to authoring the JavaScript that I loved. It took me a few years to fully appreciate the typesafety and assurances that the language provides and now it just feels natural to author JavaScript this way.

React

React is my frontend library of choice. It’s easy (enough) to use, popular, and is what we use at work so switching contexts between external prototypes and the codebase is easy.

vanilla-extract

I’ve tried a few CSS-in-JS solutions and vanilla-extract is the one that feels the best so far. It has all the benefits of authoring CSS-in-JS with none of the performance tradeoffs. If I’m not using vanilla-extract, it’s typically because I’m building something small in which case I’ll just use plain old CSS or CSS modules if I really need selector scoping.

Vite

Vite has made frontend tooling and absolute breeze since it debuted. It’s fast, easy to use, and configurable. Spinning up a new JS/TS project has never been easier.

Fastify

A vast majority of my work is on the frontend, but sometimes I’ll dip my toes into backend land and that’s where Fastify comes in. Not much more to say about it to be honest. I haven’t used enough of these JS backend frameworks to form a personal opinion, but it seems like Fastify is picking up where Express left off.

Kysely

Similarly, since I don’t work on the backend much, there typically isn’t a need for me to interface with a database. But when I do, Kysely is what I reach for. It’s really just a query builder, but the typesafety and SQL-like ergonomics make it a joy to work with. I much prefer using something like Kysely over a full fledged ORM like Prisma — even for larger projects.

The hardware

My hardware stack is pretty simple as well. I have an M1 Macbook Pro 14” and an old custom built desktop PC (i5 4690k with a GTX 1070 circa 2014 😱) running Windows with Ubuntu on WSL2.

I use a wireless Logitech G703 (I prefer these “gamer mice” from my days playing competitive shooters) and a Tada68 mechanical keyboard in a low profile aluminum case with Gateron Brown switches. I’m running a set of Oblique XDA keycaps for that retro Macintosh look.

I have a single Dell S2721DGF monitor for that sweet 165hz refresh rate. I use a USB switcher as a poor man’s KVM to switch my peripherals between the Macbook Pro and PC.

---

And that’s pretty much it. You really don’t need much to be a productive product designer these days. A lot of the tooling of yesteryear has condensed itself into just a few applications. I’m usually not one to early adopt new products, but I am curious on what my stack might look like in the next 5-10 years. Will Figma still reign supreme? Will there be (yet) another frontend JavaScript library (probably)? I’m excited to see what’s next (and also to upgrade my PC 😅)!