Skip to content
On this page

Prototyping software

Pen, paper and other lo-fi prototyping techniques are good to sketch ideas and get the project going. But once you move forward, you'll need more sofisticated tools. And there are plenty to choose from. Each month new tools are popping up here and there and the choice between them may be quite confusing. So let's point out just a few of them:

  • Figma
  • Adobe XD
  • InVision
  • UX...

... actually there's no point to list all of them here. There's a great site Uxtools, that has a database of the most important design and prototyping tools on the industry.

Furtermore, they have a ubercool annual DesignTools Survey, which may be interesting to check out too.

Every design school or team has their own stack of tools, so it is hard to tell, which one to prefer. Actually, it doesn't matter, once you know the principles how they work, it's not that hard to

For now we concentrate on Figma, because it is good, popular and has a free educational plan🙌! Oh... and community with tons of resources and plugins! ...not to mention FigJam!

So... Figma

Let's start with a video from DesignCourse Youtube channel. This should give you an overview, what you can accomplish in Figma (at the beginning of 2022).

Of course, there is a ton of other materials, courses, videos etc. But the thing is, that Figma (and most of the other UI/UX design and prototyping tools) are developing so rapidly, that some of it may be obsolete after a few months or a year. So you should constantly keep looking for newer content, if you need help with the tools.

The main concepts or keywords with Figma are:

  • frames
    • constraints
    • grid
    • auto layout
  • components
    • variants
  • styles
    • color styles
    • text styles
  • assets
    • reusing and sharing
    • export your assets
  • community
    • plugins
    • files
    • widgets
  • prototyping
    • creating interactivity
      • views
      • overlays
    • animations / transitions
    • sharing views
    • sharing code (mostly CSS)

📌Here is a free Figma course from Freecodecamp to get you going!