Introduction to Figma

Estimated Time: 90 minutes

So far we’ve covered typography, color and basic principles of UI design. With these in mind, it’s time to get your hands dirty and start designing user interfaces (UI’s). There are quite a few interface design tools out there - Adobe XD, Sketch, Figma and Invision Studio just to name a few. For the purpose of this course though, we’ll be using Figma. Figma is currently the most powerful, versatile and collaborative UI design tool in the market. It allows designers to; design, prototype, collaborate on live documents, leave design reviews as comments, create and maintain design systems and so much more. To top these all off, it has a strong community which shares free files and resources, all within Figma.

Figma for UI Design

By now you should be slightly familiar with Figma from our live class in Week 2. We used Figjam to create and process ideas for a problem. Figjam is just one of the many ways Figma can be used to ideate, design and collaborate with team members. In this lesson we’ll be using Figma for UI design which is another major function of Figma. You should already have a Figma account but if for some reason you don't have one please sign up (it’s free).

Some helpful tips on using Figma are:

  • You can design directly in your browser or download the Figma desktop app.
  • Figma is a cloud based design tool meaning that it requires an internet connection to save your work (it autosaves after every edit you make).
  • Best practice is to download the app so that even if you don’t have an internet connection you can still design and save your work on your PC.
  • You can design using the Figma desktop app without an internet connection. Figma will save your work once your internet connection is restored.
  • If you design without an internet connection on the desktop app, make sure you don’t close Figma until you’ve connected to the internet and your work has been saved.
  • The desktop app is available for both Windows and Mac.

Creating your First Design in Figma

Now that you have your Figma set up, the next thing is to familiarize yourself with the interface, tools and features. What better way to do this than to jump straight into designing. The video below will show you how to navigate the interface and use the basic tools and features required to create designs in Figma. By the end of the video you’ll be able to:

  • Start a Figma project
  • Navigate the interface
  • Create frames (artboards)
  • Create and edit basic shapes such as circles and rectangles
  • Add and edit text
  • Use color
  • Re-order, align and group layers
  • Import and edit images

Take your time walking through the video and make sure you understand everything that's shared. This will be the foundation of the rest of the work we do in Figma during this course. Once you’ve finished creating the design in the video, share the link to your design in the "My First Figma Design" channel on Discord.