Figma

What is Figma?

LinkedIn Learning

LinkedIn Learning, formerly Lynda.com, is a member’s only database of high-quality video tutorials. Normally, you have to pay a hefty fee to have access to LinkedIn Learning/Lynda’s video content. However, as UGA students, you have full access for FREE. It’s glorious. 

In this class, we’ll be using this awesome resource to learn all about Figma!

Figma

What is Figma? 

A vector graphics editor and prototyping tool which is primarily web-based.

Let’s break this down, in case you’re a new to some of these phrases!

Vector graphics consist of points, lines, and curves that are based upon mathematical equations, rather than solid colored square pixels. This means that no matter how large or small or how close you zoom in on the image, the lines, curves, and points remain smooth. In other words, vectors are great for scaling up, down, and all around!

Raster vs. Vector: What’s the Difference and When to Use Which

Figma is a prototyping tool, one of many. Prototypes are an early sample, or representation, of a real product. Some prototypes have very little detail (low-fidelity) and some are super realistic (high-fidelity). For the record, Figma is just one of many prototyping tools. We’re using it in this class because:

  1. The starter plan is free!
  2. The learning curve is small.
  3. It’s advantageous in terms of file-sharing and cross-team collaboration.
  4. It’s becoming the industry standard in UX.

Additionally, Figma is web-based, meaning, it utilizes cloud storage rather than local storage. In other words, you don’t have to worry about saving files to your desktop, then emailing it to your group members, and so on and so forth. Think Google Drive and OneDrive, for comparison.

Other popular prototype tools include but are certainly not limited to:

  • Marvel (my introduction to prototyping back in the day!)
  • Adobe XD (which is what I use/teach with the most, especially in NMIX 4111/6111e: New Media Design)
  • Sketch
  • InVision
  • And so many more!

Sign Up for Figma

Open Figma: figma.com

Select “Pricing:” figma.com/pricing/

Select “Choose Starter,” the free plan.

Create an account using whatever credentials YOU can remember. I can’t remember these for you. I recommend using Google to signup if that’s the best way for you to remember your login info.

Now, you’re good to go!

The professional plan is free for students and educators. While you are welcome (and encouraged) to use this plan, I don’t recommend it until the end of this class. It has more capabilities, and therefore, can be a little more confusing and overwhelming at first!

Learning Figma

Learning new software is not an easy feat. However, I strongly feel that watching tutorials are the best way to become accustomed to a new interface, new possibilities, and new constraints.

Complete the entire “Figma for UX Design” course on LinkedIn Learning! Be sure to watch all the videos, and use the exercise files (located under the video) to follow along.

To the tutorials

Once you open up the course, you’ll see it’s broken down into five parts, plus an introduction and conclusion. I have a few details I want to share on a few of the parts:

1. Set Up a Figma Project

When you sign up for Figma (using the free Starter plan) and take a tour, you may notice a few elements in the navigation have changed slightly since these tutorials were filmed.

For example, note the hamburger button is now a F-shaped button, and many settings have shifted from the top right to the top left. Either way, it’s pretty easy to find what you’re thinking for, as these changes are rather minimal. Be curious! Explore!

⚠️ In this section, you can skip “Setting Up Local Fonts,” and “Import From Sketch.”

2. Adding Content

Download the Exercise Files on LinkedIn Learning. These files will likely download in a zip folder (.zip). You have to click (double-click on PC) to unzip them.

Drag the file you want to use into the homepage of Figma (the screen that displays all your files).

4. Teams

You don’t have to walk through these with the instructor. There is no need to follow along. Just listen and watch. If you would like to upgrade your plan, it is free for educational use.

Lastly, to show proof of completion, select “Certificate” under “Related to this Course,” near the exercise files. Download as PDF.