Uses
A somewhat comprehensive list of tools, apps, hardware, and more that I use on a daily basis to design and code things. And yeah, that is a Johnny Mnemonic GIF in the background.
Design
- Figma is my primary tool for UI design these days, and it has become an essential part of my workflow. The ability to collaborate in real-time with teams, create responsive designs, and maintain a consistent design system makes it incredibly versatile. Its intuitive interface and extensive plugin ecosystem also allow me to rapidly prototype and iterate on design ideas. Whether I’m building wireframes, designing high-fidelity interfaces, or preparing assets for development handoff, Figma offers everything I need to streamline the design process.
Development
- I use Visual Studio Code as my text editor, with the Atom One Dark theme and Operator Mono as my typeface of choice.
- Firefox is my main browser for both development and general use.
- React is my front end Javascript library of choice. The component-centric mental model is the first thing that truly made sense to me as a designer.
- For 3D effects and image shaders I use three.js. It has a bit of a learning curve but you can do some really powerful stuff with it.
- For CSS, I’ve experimented with various pre-processors and CSS-in-JS solutions like styled-components, but lately, I’ve been using Tailwind CSS. Its utility-first approach allows me to rapidly build responsive, modern designs without writing custom CSS.Tailwind's flexibility and ability to customize via configuration files make it easy to maintain design consistency across projects. Plus, with features like Just-In-Time (JIT) mode, I can ensure my CSS stays lightweight and optimized for performance
- For Javascript animations I use Framer Motion, it’s a great way to add spring animations to React and three.js.