Tools for designing digital products

Amy Steyaert
Open Working & Reuse
2 min readMar 29, 2024
DIY tools vs. design tools - Photoshop, InVision, Sketch and Figma logos

I have recently undertaken another house renovation project with my husband. Second time around, we already have quite a collection of DIY tools we can rely on. It has made me realise how important it is to have the right tool for the job. Buy the electric sander. It will save you so much time.

Having worked as a designer for over 10 years, the same applies. I have cycled through several different design tools. It’s always daunting learning something new. But with every new tool, there has been progression enabling me to do my job better.

Adobe Photoshop

At my first role as a junior designer back in 2012, I spent 8 hours a day using Photoshop. I’m not sure what version it would have been back then, but it was offline. Now I am so used to collaborating online, it’s hard to imagine using an offline tool. I was working on email templates, social media assets and web pages. A lot of time was wasted:

- Labelling spacing and fonts

- Writing out colour codes

- Exporting different versions of files

- Sending files back and forth to developers over email

Sketch and InVision

When I started designing full digital products, I worked in Sketch. The design process went something like this:

  1. Design web pages in Sketch
  2. Export as separate files
  3. Upload files to InVision
  4. Link up files in InVision to create a clickable prototype
  5. Share link for feedback

At the time this worked well. It allowed developers in my team to feedback straight on the designs. Having a clickable prototype allowed us to present ideas and progress to stakeholders . A shiny working prototype — what more could you want!

However, the process was slow. Time was wasted every time an update was made. It meant having to resave the file and re-upload to InVision. Comments were lost, and version control became confusing.

Figma

Enter Figma! My main design tool right now is Figma. Any design changes are made straight into the design, which in turn updates the prototype.

As well as many other features, Figma allows me to:

  • Chat to colleagues
  • Create reusable components
  • Prepare designs for developers in ‘dev mode’
  • Make updates quickly

Above all it saves time. It allows me to collaborate effectively. This leaves me time to solve the real problem and create designs that meet user needs.

I’m looking forward to embracing new design tools in the future and adding them to my tool box!

--

--