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
When I say no coding, I really mean it! I have never written a line of code before, and I always work with Figma. The whole interface is nicely done, so it's basically drag-and-dropping images, forms, or icons around.
It helps a lot if you have some experience with a graphical tool, such as Canva, Photoshop, or any other Adobe Creative Cloud software.
Clickable prototypes look nice
Paper and Pen are great, but sometimes you just want a fancy prototype ✨
With Figma, making a clickable prototype is easy since you just drag where clicking on a form or picture will lead to.
Full access with your student license
If you sign up with your student mail address and verify that you are a student, you will get full access to everything
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
Basically, everything that includes graphs, flows, or processes is great because FigJam lets you visualize them pretty easily.
I've used Figma, for example, to map out a growth and content strategy when working for an EdTech startup. We used a lot of arrows to see dependencies, but also commented on stuff, and of course, emojis to support each other 😇
Presenting your projects
If you want to up your presentation game, use Figma. You can send the link to your audience, and they can "walk" around on your FigJam board, leaving emojis, comments, or stamps.
At my old company, we used it all the time, especially because it's a great way to add more detailed info that you won't present but make available for other teammates.
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
You can also use it to make your paper prototypes clickable. Just take pictures, add them to the frames, and then add some transparent boxes that you make interactive.
Use this when you want to test out a quick idea with learners or users.
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
You will probably use Figma a lot when you opt to do more design-related courses. For example the courses Prototyping in Interaction Design (DIT176) or Graphical Interface Design (DIT493) include Figma-related tasks a lot.
Structuring a research paper
If you only use FigJam to visualize your ideas, you can basically use it for every course. For example, I often use it to structure my ideas for writing a research paper or show links. Once visualized, I feel a lot better and can really focus on my writing instead of thinking about where what goes.
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
Sometimes, you might work with an existing product, focusing only on one tiny feature. In that case, you might already work with an existing Figma file and add your ideas and designs.
Presenting a new product, flow, or user research
Especially as a product manager, consultant, or freelancer, you often need to present your product idea to various stakeholders. Some of them have no clue about design processes, interface design, or even prototyping. Therefore, some might struggle if you just explain your idea. Presenting a prototype, user research, or an information flow with Figma might make it easier to communicate your idea.
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!
I am almost ashamed of how many parts I just grouped and copied instead of creating components. Components are essentially grouped elements like a text and square, but once put down as a component you can easily drag and drop them from the side menu into your design. If your design has repeating elements, such as buttons, create components to save yourself time and mental load.
You do not need to create icons or basic elements—someone has already done that work for you. Just look for a library that fits your style and add it to your file. The library usually consists of buttons, windows, icons, and the most standard elements needed for an interface design.
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!
Comments