The tools I use for design

tools i use for design

I keep experimenting with a lot of tools and techniques which help me in my design process. Many come and go. Some stay. So I thought of sharing my workflow of design and the tools that aid me today.

Brainstorming

Nothing works like sketching on paper and discussing ideas on the whiteboard. I use a grid notebook which makes life a little easier (truth is, I still find drawing straight lines a challenge). A mind-map works best for letting everyone know about the big picture and context. For deliverables, I use Whimsical. It’s an easier way to share information and captures almost all the key points of the idea being developed either as a flow chart or a mindmap.  I also use their sticky notes option to record pain points and pain relievers for different user persona types. Most inspirations that I like are added to Figma in a separate page, which helps for quick reference and context while working on the problem. If you need a tool to capture inspirations check out Inboard. It is clean simple interface which allows me to add tags which I can search easily in the future.

Wireframes and workflows

So every idea starts with a sketch, be it a website or a mobile app. After the first round of brainstorming and getting a sense of the overall flow of things, I use Figma for wireframing (and for pretty much everything related to product design). They have a great collection of templates for both web and mobile to kickstart the thought process. It’s a just such a breeze to use. Figma plugins are at a different level too. I use the Autoflow plugin to connect artboards – which builds a nice narrative/flow of the user journey. 

Interface design & interaction design

Interface design also happens on Figma. I usually have separate pages for the moodboard, wireframes, style guide / design system, UI design, random ideas and archives. No design thought process is deleted, it always goes to the archives which helps me to trace back how the idea evolved. For managing all my icons I use IconJar which helps to add, manage and search across different icon styles. 

Interface design on Figma is powered by a bunch of amazing plugins which makes life so much easier for a designer.

For interface design

Content reel – Helps you easily pull text strings, avatars and icons into your designs which helps to make the interface design look authentic. No more lorem ipsum.

Charts – Allows you to generate charts that can be added and edited within your Figma document. Choose from Line, Area, Pie, Doughnut, Scatter and Bar charts. Each chart comes with its own set of configurations such as number of points, max and min values

SkewDat – Live skew any shape with simple non-destructive controls – for those isometric layouts

Roto – extrudes and rotates shapes in 3D. 

Arc – Curve your text upward, downward or into a circle. Adjust the slider and preview the result.

Mapsicle – adding maps easily to a viewport can be painful. Mapsicle allows you to quickly and seamlessly place maps in your mockups/designs so that we never take a screenshot of a map again! 

For colours and accessibility 

Image palette – Extracts a colour palette of 5 different colours from the selected images.

Stark – Contrast checker, colorblind simulator, education and more. All based on WCAG guidelines. 

Able – Similar to stark, Able allows the ability to check color contrast and color blindness to your workflow with as little effort as possible. Just open Able and you will be able to automatically compare the contrast between two layers you select

For interaction design

With Figma’s magic move – basic animation and interaction design is a breeze but for more nuanced (keyframe based) controls you can check out Figmotion

Figmotion – is an animation tool built right in Figma. This makes the entry into animation easier and more convenient as there is no need to switch to a completely separate motion tool such as Principle, Haiku or After Effects. 

For keeping it tidy

Autocrop – Automatically crop the extra space surrounding an image.

Remove BG – Remove the background of images automatically with just a single click – using the remove.bg API.

Split Shape – Split your shapes, text layers, groups and frames into multiple instances. It’s useful for when you need to generate columns and/or rows in a specific container without having to calculate the size manually. 

Super Tidy – A Figma plugin to easily align, rename and reorder your frames based in their canvas position.

Other nice little plugins

Todo – Simple todo list plugin to check off your tasks inside Figma! 

DeepFocus – Listen to your favourite playlists easily

Gifs – Because gifs make everything feel good :) 

Design handoff

All questions/feedback are handled via Figma comments. All assets are ready to be exported so that the dev team can pick them up easily. We also use Zeplin which is one of the best design to dev handoff tools.

What are other tools, services and plugins you use to make your design process better?