Figma
- Sonja
- Nov 28, 2024
- 7 min read
Figma is a cloud-based design and prototyping tool that enables teams to collaboratively create, test, and refine user interfaces, wireframes, and interactive prototypes in real-time.
"I would recommend Figma"
"Figma is a must-know nowadays"
"I use Figma all the time"
If you are interested in design, and even if you aren't, you have probably heard about Figma. Nowadays, it is used whenever there is a need to design interface sketches. Especially, User Experience Designers, Design-based Researchers, and Product Managers often need Figma Skills. During the Master's, you will probably use it in your first semester during the design course.
However, Figma has a lot more to offer, which might seem overwhelming... at least, that's what it feels like for me. Don't worry - we will figure it out together!
There are a million tutorials on learning Figma so we won't go into the details. If you are just here to find great tutorials, skip forward to the end of this post ⏭️
This post will specifically tell you why, where, when, and how to use it in an IT and Learning context.
Let's dive into it:
Why Figma?
First of all, it is just the standard tool nowadays, but lucky for us, it's a great and intuitive tool!
The main benefits are the following:
Amazing for collaboration
Since group work is soooo oooo oooo essential in Sweden, having a tool to work together on just makes sense. Just share a link or invite your team mates, and get going.
No coding needed
Clickable prototypes look nice
Full access with your student license
What is Figma?
Figma has two main areas: FigJam, an open whiteboard tool, and the original prototyping area.
FigJam
Let's start with FigJam since I think it's a less intimidating first step to getting to know Figma.
It's basically a whiteboard that lets you insert sticky notes, forms, text, areas (kind of like a sub-whiteboard), tables, stamps (those are fun), emojis, videos, pictures—basically everything you can think of.
When you collaborate on the board, you see the others moving around, see their reactions or their live-time changes.
When to use FigJam?
There are probably a thousand use cases, but here are the most common:
Brainstorming to collect ideas
Since everyone can easily add their sticky notes, it's great to get ideas on a "digital paper." It's often used that way during classes and in design teams. You can also add resources from great articles or even a quick drawing of a learning solution.
Storyboarding, user journey, processes for learning solutions
Presenting your projects
Figma Prototype
The Figma Prototype is also a whiteboard, but the main feature is that you can insert frames (kind of a screen template) for different phones, computers, watches, tablets, etc. You can add squares or other elements to create an interface on the frame. You can also set standard designs like a font, color scheme, or spacing so your interfaces are consistent. Once you are satisfied with your design, you can add interactions that connect different screens (e.g., I click on a button, and it jumps to another screen). There might be some terms and functions you don't know, but try figma out, you'll see it's not that difficult!
When to use Figma Prototype?
Visualize your learning technology as a clickable interface design
This is the most obvious - use Figma to design a clickable interface. Often, learning technology has special features. Use Figma to visualize possible interface designs to clarify your team's vision or present them, for example, in your design course end presentation
Clickable Paper-Prototypes for quick user testing
Where to Use Figma?
Basically, you can use it whenever you design something, but let's break it down. Here are the most common scenarios on when you will probably use Figma:
IT & Learning Master
Design course (TIA132)
You will design a feature for a learning technology here. What you will create exactly changes each year, but the main point of the course is to learn more about design. Using a design software like Figma just really makes sense.
Design electives
Structuring a research paper
Work
Developing a (learning) product
When developing a learning product from scratch, you might have many iterations to define its appearance. This can include paper sketches and digital clickable ones, for which Figma is a common choice.
Developing a feature
Presenting a new product, flow, or user research
How to Get Started with Figma
Let's start with a bit of a reality check:
Figma is great! It has a million functions that are great, but you probably only need the most basic ones.
Obviously, if you want to get into interface design, you might need to understand Figma more deeply. But if you want to design experiences, communicate an idea, or visualize a concept, the basics will probably do just fine!
Learning Resources
Let's dive into some great resources to learn more:
Figma has a vast resource library, and it's amazing to learn the basics of FigJam and Figma Prototype. Check out their Design Principles course to learn the basics of graphical design. Or take a look at their Prototyping course to see how to create a prototype easily
Figma has its own learning area, and it's really great! Just get started with the Getting started topics.
This is a really cool free course that leads you through Figma's main functions in Figma. This way, you can already familiarize yourself with the software while learning 💡
Self-Exploration
If you ask me how I got started, I just started. Personally, my patience for instructional videos is extremely low (yes, I see the paradox, because I worked as a Learning Experience Designer creating a ton of them 😅). So I just got started, tried out different stuff, and explored Figma. I had already worked with FigJam, which is essentially just a cool PPT with a whiteboard instead of slides, so starting prototyping seemed like an easy switch.
Don't get me wrong—starting with tutorials, a course, or other instructional material is probably a way better thing to do! Just in case you are as impatient as me, trying it out on your own is also a legitimate way, and honestly, probably enough for the design course in this Master's program.
However, here are some more advanced features that I really wish I would have known earlier:
This will save you loads of time since it standardizes your layout options. Often, when working with an existing project, this might already be predefined, but if you start from scratch, set it up and use it!
Your Turn!
Have you used Figma in your work? What’s your favorite feature, or do you have a go-to resource?
If you’re just starting, try creating a simple wireframe for a learning app prototype or share your design course project.
Need inspiration? Drop us a comment or message—we’d love to explore Figma with you!
留言