Design Tools

At the end of the day, tools are just tools. But great tools do make the work easier for the craftsman. Feel free to explore what works for your workflow.

You might want to check the 2022 Design Tools Survey to see what the industry is using.

Essentials

Adobe Creative Cloud 🏆

Creative Cloud is basically a launcher for you to download Adobe apps. Installing it via cask is buggy, so I recommend installing it from the web.

https://creativecloud.adobe.com/apps/download/creative-cloud

You can install whatever you need. What I only need tho is:

• Adobe Photoshop CC 2023

• Adobe Illustrator CC 2023

SIP A better Color Picker for your Mac.

brew install --cask sip

GIFski 🏆 The best free gif app

https://gif.ski

UI Design

Figma 🏆 Never had looked back. Currently the best digital design tool out there.

brew install --cask figma

Sketch My ex-digital design tool from 2016 - 2018.

brew install --cask sketch

Adobe XD For those loyal to the Adobe ecosystem. It can only be installed through the Adobe Creative Cloud launcher. Unfortunately. they will be sun-setting the app. Now, that Adobe have acquired Figma.

Adobe XD | Fast & Powerful UI/UX Design & Collaboration ToolAdobe

🪦 Honorable Mentions

Abstract Its version control for Sketch

brew install --cask abstract

I work mostly with Figma - and it has version control baked in already.

Zeplin Design to developer handoff

brew install --cask zeplin

My favorite developer handoff tool that integrates nicely with Slack. A bit redundant if you use the Invision + Sketch combo. And very redundant if you're using Figma.

Craft Excellent plugin for Sketch from Invision

brew install --cask craftmanager

Digital Whiteboarding

FigJam 🏆

This whiteboarding tool has definitely matured, and using it in Figma saves a lot of subscription costs & app switching.

brew install --cask figma

Miro 🏆 It's still a top tool for brainstorming & workshopping.

brew install --cask miro

Did you know before Miro, it was previously called RealtimeBoard?

🪦 Honorable Mentions

Mural Haven't used this in ages. But it's a whiteboarding tool similar to Miro.

Design Systems

Tools to manage your design systems.

Figma 🏆

Storybook - https://storybook.js.org/

zeroheight - https://zeroheight.com/

User Testing + Recruitment

Tools used for user testing

Maze - https://maze.co

Lyssna (Previously UsabilityHub) - https://www.lyssna.com

Usertesting - https://www.usertesting.com

UserInterviews - https://www.userinterviews.com

Research Repository

Dovetail - https://dovetail.com/

Notion

brew install --cask notion

Google Drive

Confluence

3D

Blender A 3d tool for the pros

brew install --cask blender 

Spline A design tool for animating 3D

brew install --cask spline 

Icon Managers

Iconset 🏆 A simple icon manager

brew install --cask iconset

🪦 Honorable Mentions

Iconjar An icon Manager

brew install --cask iconjar

Nucleo An icon Manager

brew install --cask nucleo

I used to be a fan of using icon fonts for design & development because of the ease of use. However, I realized loading a font file is a another http request and might be render-blocking (if you happen to have it on the top fold of the page) Since the dawn of svg, its actually much more lighter Also, I find myself lately relying more on icon pack libraries in Figma, rather than these apps. But it doesn't hurt to have one just incase you need to open it from other apps aside from Figma.

Webfont Generator

Fontplop 🏆 A Fast, Simple, & Free Open Source Webfont Converter

brew install --cask fontplop

Converting OTF / TTF font files to @font-face used to be a drag and drop thing I usually do at FontSquirrel and other online webfont generators. But having a drag-n-drop native app like this really speeds up my workflow. Previously I used FontPrep but was discontinued.

Image Optimizers

Optimage 🏆 Image compression tools

brew install --cask optimage

ImageOptim Image compression tools

brew install --cask imageoptim

Optimizing images should be already baked in your frontend tooling (by running image optimizing npm packages using gulp, react, grunt, ect.) But just incase you need to do it manually, here are some good ones. ImageOptim is free, but the paid alternative Optimage might be better. But most frontend tooling, utilizes image compression packages already - you decide.

Prototyping Tools

Each of these prototyping tools has its own set of pros and cons. Use each one that fits according to the type of fidelity you need. Most of the time, Figma should be enough.

ProtoPie 🏆

This is number one based on the 2022 Design Tools Survey for advaned prototyping.

brew install --cask protopie

🪦 Deprecated

Principle

brew install --cask principle

Flinto

Framer

brew install --cask framer

Origami Studio

brew install --cask origami-studio

Font Managers

RightFont 8

brew install --cask rightfont

Typeface App

brew install --cask typeface

FontBase

brew install --cask fontbase