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.
GIFski ð The best free gif app
UI Design
Figma ð Never had looked back. Currently the best digital design tool out there.
Sketch My ex-digital design tool from 2016 - 2018.
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.
Digital Whiteboarding
FigJam ð
This whiteboarding tool has definitely matured, and using it in Figma saves a lot of subscription costs & app switching.
Miro ð It's still a top tool for brainstorming & workshopping.
Did you know before Miro, it was previously called RealtimeBoard?
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
Google Drive
Confluence
3D
Blender A 3d tool for the pros
Spline A design tool for animating 3D
Icon Managers
Iconset ð A simple icon manager
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
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
ImageOptim Image compression tools
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.
Font Managers
RightFont 8
Typeface App
FontBase
Last updated