App Lab logo

A design tutorial using Figma

A few days ago, with the help of my TA, Srihari Pratapa, I gave a tutorial on using Figma for UI design to my COMP 523 class.

For people with an idea for a web app or mobile app (or people trying to implement somebody else’s idea), the first thing I recommend is to create a design of what the screens of the app will look like when it’s finished. This accomplishes a few things:

I mentioned the term “clickable prototype”. Figma makes it easy not only to create the designs for the screens, but also to connect them together so that clicking on an element in one screen (e.g. a button) switches to another screen that you designed. In that way, it actually feels much like you’re interacting with a full blown app, even though it’s a constrained and canned experience. The tutorial includes a clickable prototype.

When I gave this tutorial to my class, most people finished it, without help, in about 30–45 minutes. That includes getting started with Figma, which is a free web app that requires no installation of software. By the end, you’ll have a clickable prototype of a simple calculator app.

Here’s the tutorial again. Enjoy!

If you’re wanting to build a web app or mobile app and need help creating a design, feel free to swing by the App Lab when it’s open.