19

As a Product Designer, what are your essential tools?

almost 4 years ago from

There are countless lists and roundup articles about the "Top XX UI/UX Design Tools" and while Product Design can often encompass other roles such as UX design, I'd love to hear specifically from fellow Product Designers about the tools and apps you use in your day to day.

EDIT: Thanks for all of the submissions. Everyone has posted a ton of great new tools to discover. It's inspired me to write up an article of my top picks.

24 comments

  • Richard SisonRichard Sison, almost 4 years ago

    Design

    • Sketch. There could be a separate list of the plugins, but the two essential ones are Runner Pro and Automate Sketch.
    • Abstract. If you're using Sketch (even if you're the only designer), you should be using this.
    • Marvel. Or Invision. I've been trialling Marvel as a replacement though. I just feel you get more out of Marvel than you do with Invision. Seems to work better with Sketch too. Though the features and experience in the Invision web tool still edges out Marvel.
    • Maze.design. This is crazy good service for user research (especially with the "multiple paths" feature they just released a few weeks ago).

    Research

    • Userbit. It's a bit rough around the edges, but this is a fantastic user research tool for designers. The price-point is very attractive for smaller teams. Tools like Dovetail or Aurelius are more polished and fully-featured, but they're expensive and more suited towards dedicated research teams. Userbit gives you a lot for what you pay for and is part of my standard tools now.
    • Whimsical. Another workhorse of a tool which is well worth the pricetag. I really only use the flowchart tool and the sticky notes tool. The product works really well and is very intuitive — the best thing about it is that it's a tool that lives online so you don't need to send constant revisions as PDFs etc.

    Writing

    • Bear. A great alternative to Evernote. Evernote still wins here but can't justify the cost.
    • Agenda (trialling this for quick notes instead of something like Bear)
    • iA Writer. My long-form writing tool of choice.

    Productivity Tools (which I use for work)

    • Pastebot. A clipboard manager is freaking awesome once you've started using one… Pastebot in particular has this feature called Sequential Paste which sets it apart (even though the app "Paste" I feel is better at everything else).
    • Things. Long time Things user. It's expensive but worth every penny.
    • Dropmark (or Raindrop). Saving inspiration is something I do constantly (and have been for years). I've been burned far too many times with Mac tools like Ember (discontinued) and Pixave (even though I've paid for it). It's likely due to issues with iCloud not the product itself, but I've given up on a native tool for this now. I much prefer to use a service like Dropmark or Raindrop to push my inspiration into an online service. I spent $5 a month and it's a no-brainer for me.
    13 points
    • Ben Grace, almost 4 years ago

      Thanks for the thorough response. I have two questions on pricing of Maze.design and if you have any experience with Framer X.

      Maze.design looks really cool with some great build-in features. Do you usually bring your own testers or pay for theirs? How much is it to pay for testers. I didn't find that on their website.

      Also, I'm curious, have you ever tried Framer X. I also use Sketch as my main app. I've been interested in trying Framer X though, but I haven't seen anybody mention it in this thread. I'm curious if there are barriers in using it - such as handoff or working in teams?

      0 points
      • Richard SisonRichard Sison, almost 4 years ago

        No worries! Here are my responses on both Maze and Framer

        Maze

        • Testers.
          • For the projects I work on, I'd prefer to recruit myself. My products are usually pretty industry-specific so leaving it to a recruitment tool that doesn't provide that level of granularity isn't ideal.
          • You're probably interested in the demographics they offer. Here's what they say: >"All test participants are English-speaking and mostly US-based. You can filter responses based on sex (all, male, female) and age (18-70) when you place an order."
        • Pricing for testers. I didn't realise they hid this. Here's a screenshot of the credit packages they offer currently.
        • Pricing. You get a lot for free honestly. I often work on one project at a time (or at the very least, the phase where I'm doing my quantitative tests rarely overlap) so the free tier is perfect as I can cycle the "active project" (by archiving and unarchiving). I haven't had to yet, but apparently that's possible.

        Framer

        • I'm learning Framer now actually. Meng To (designcode.io) always puts together great tutorials. He's got a few for Framer (I'm doing this one at the moment and it's really good so far and it's free).
        • As I'm only learning it now, I'm still forming my opinion around it. On paper it is a monster tool that is targetted at a huge gap in the design tooling. The ability to produce very realistic prototypes using code (and leveraging off existing code from design system), is a game-changer.
        • The approach Framer takes is completely different to Sketch and Figma (in my opinion) and complements either tool really well. Where I'm hoping to bring Framer into my workflow is after the fundamental design decisions are made and we need to get the design into the next phase. I'll probably still reach for Sketch for wireframes, quick prototypes and starting off the visual design. I see Framer carrying things on when things like interactions, microinteractions, transitions, animations, states need to be worked out.
        • Barrier to entry. Yep. Currently the barrier to entry is huge. I'm fairly comfortable with HTML and CSS but not with JS (and definitely not with React). So understanding how to use Framer (specifically the code aspects which is where Framer's power comes from) is a huge learning curve for me.
        • I think the barriers are definitely more in the learning curve for designers. While developers will need to be aware of the tool, and as a team you'll need to work out your workflow, the promise Framer has for product teams is a pretty big deal in my opinion. As far as handover is concerned, it bridges a huge gap that's otherwise left open to interpretation or potentially lots of conversations (which isn't necessarily a bad workflow by the way).

        Hope that helps!

        3 points
  • Philip A, almost 4 years ago

    FIGMA HTML CSS PEN/PAPER

    That's basically it. There are other 'tools' that are used just to help support this workflow (Preview and Photos app on macOS, Git) but really, it's those 4 things. It's amazing just how far those few tools can take almost any web design.

    7 points
  • Li ChaiLi Chai, almost 4 years ago

    Because I'm using a PC, I have to find some alternatives other than the common tools.

    • Figma: core design tool. really helpful for collaboration and it has version control as well.
    • Protopie: prototyping tool, similar to Principle for Mac. Can export screen recording as mp4 and support import from Figma
    • Eagle: to organize images. Can organize images through tags and folders. They have a chrome extension as well to quickly add images to the app.
    2 points
  • Oliver Swig, almost 4 years ago

    There are countless lists and roundup articles about the "Top XX UI/UX Design Tools"

    Let's start another thread about it.

    2 points
  • Vlad ShapochnikovVlad Shapochnikov, almost 4 years ago

    The only thing that is consistently essential for me is a keyboard and a mouse. Everything else (software) is interchangeable.

    2 points
  • Fernando Lins, almost 4 years ago
    • Figma
    • Microsoft To-Do
    • GMail
    • GDocs (the whole suite)
    • Axure
    • Graph paper
    • Notebook
    • Notebook computer (laptop)
    • Mechanical pencil
    • Zoom H1n Digital Recorder
    • Wacom pen tablet
    2 points
  • Daniel Klopper, almost 4 years ago
    • Sketch
    • iA Writer
    • Principle
    • Alfredapp
    • Paper 53
    • Pixave
    2 points
  • Bruno Garcia, almost 4 years ago

    Main tools:

    • Sketch + Craft
    • Invision (our team might switch to Marvel or another alternative, any suggestions?)
    • Notion
    • Adobe Suite
    • - PS/AI for assets
    • - AE for animations exported as a "lottie" file
    • G Suite
    • Protopie for high fidelity prototypes
    • Dropbox
    • Skitch + Jumpshare for annotations and screenshots
    • HR (mac app) for time tracking + Clockify
    • Slack
    • Eagle
    • Gitlab (for issues and specs for our front-end team)

    Other utilities (mac):

    • ColorSlurp
    • SkyFonts
    • Lingo
    • Balsamiq Mockups (rarely used)
    • MacDown (Markdown editor)
    • iTerm
    • VScode
    • Image Optim
    • Alfred
    • Better Touch Tool
    • Little Ipsum
    1 point
  • Dexter W, almost 4 years ago
    • Sketch - UI, wireframes
    • Abstract - staging, handoff
    • UX Pin - prototyping
    • Framer X - prototyping
    • Paper - ideas
    • Bear notes - ideas
    • Eagle - UI patterns
    • Air Table - research
    1 point
  • Diego LafuenteDiego Lafuente, almost 4 years ago
    • Sketch
    • IA/Writer
    • A browser
    1 point
  • Frank Lagendijk, almost 4 years ago
    • Sketch
    • Invision (quick prototyping)
    • Lookback (user testing)
    • Dropbox Paper
    • Bear (note-taking)
    • Airtable
    • Notebook (quick notes for calls/interviews)
    1 point
  • Alex HoffmanAlex Hoffman, almost 4 years ago
    • Pencil and Paper
    • Sketch
    • Abstract
    • Axure
    • Adobe XD
    • InVision (not much anymore tho)
    • AirTable
    • Google docs
    • Trello
    • Notes (I kinda hate it tho)
    1 point
  • Ryan Parag, almost 4 years ago
    • Figma/Sketch
    • VSCode
    • Notion
    • Hyper
    • Slack
    • Jira/Confluence
    • Abstract
    1 point
  • Jahit JJahit J, over 3 years ago

    • Adobe XD: Very easy for me to switch back and forth between macOS and Windows, allows me to prototype within application instead of relying on Invision and others.

    • Fusion 360: Great tool for designing mechanical parts ready for printing and designing 3D objects for concept design.

    • Paper: Noting and sketching ideas down

    • Sticky Notes: Use them for planning sessions when I'm conducting research

    • Google Drive: For all my writing, research and planning needs - great for collaborating with team members.

    • Slack or Teams: Both are great, I use Slack personally for my side projects and Teams for my workplace to communicate with my manager and other people in the company.

    • InDesign: Creating print ready documentation, I use this mostly for presentations (if I have the time to create beautiful decks)

    • Trello: Project management (its free)

    0 points
  • Design for Humans, over 3 years ago

    Sketch, zeplin

    0 points