Figma in the classroom

Teaching UX with Figma in a conventional classroom

This is not the usual story on how you can integrate Figma within your company or why Figma is better than Sketch. This is about how I used Figma as a tool to engage 62 students in a very conventional classroom.

I want to tell you more about why and how Figma is good for the classroom. I will try to cover my student’s view of the product, my personal observations and also my experience as a teacher.

I was approached by a friend of mine who works at a prestigious business schools in Paris, asking me to lead an 8 hour UX workshop.

I structured the course by asking myself “What can my students learn from this course in only 8 hours?”. My personal experience, as a UX designer, has thought me that communication and teamwork is key for succesfull product results. And that’s what I was going to teach them — how to communicate effectively and work collaboratively.

To be able to do that however, I needed the support of a good desing tool that covers all my needs – luckily Figma was the perfect fit.

Course structure

62 students attended the course interested to hear what UX is about. Each student required a grade that will be assessing their UX skills. That could either happen through final presentation or an exam. I thought presentation of the project would be a good place to assess their skills. (In fact, further down you will see how I’ve changed the format of the presentations itself.)

For the course structure to work and my goal accomplished, I divided the students into groups of 4 (2 groups of 5). Every group had to deliver a prototype of either an online shop or dog sitting website.

The students had to deliver: personas, user flows and 5 pages prototype of a desktop website. They’ve only used Photoshop once and they had no idea what a prototype meant.

You can read more about my UX teaching methods here.

Besides my UX methods, Figma was a big help for managing to deliver everything in 6 hours. Here is how:

1. Figma is FREE for one project with multiple editors

This is a big selling point for me as a teacher. Students were working on their personal laptops. There was no Adobe or Sketch licence for them to use on their personal laptops. (The course was stretching over 4 Mondays, so Sketch trial wouldn’t have lasted enough.) With Figma however, everyone was ready to go online and start using it as soon as they create an account within 1min.

2. Figma is browser-based software

Amazing! That meant, that we save time for students to download and install the actual software, it also meant consistent experience on both Mac and Windows users. For me as a teacher that was a lot of added value, as it saved time going around individually explaining how to install and launch. (10–15mins for account creation / inviting editors and setting up the pages within Figma )

3. Figma offers a centralised place to store your project

No version control issues! That meant that it was less prompt to an error. Everyone was working on the latest edits of their group projects.

4. Figma allows multiple editors simultaneously

When my students first heard they need to design a website as a group, they were horrified. Based on their previous experiences working on collaborative projects using Photoshop or Indesign, some raised their concerns that group projects involve 1 person dedicating time to designing everything — but that was not the case with Figma.

5. Figma allows self-expression

The collaborative work setup on Figma allowed my students to collaborate easier with their team members. During class, each student contributed differently to the final project that allowed them to deliver a prototype within 6 hours.

6. Figma is 2 in 1

• Design
• Prototype

Figma saved me good amount of time onboarding students on a new design tool, instead we focused on understanding and crafting user experiences. The steps you need to take with other tools, going through design and then prototyping takes a learning curve that we could not afford due to time limitations.

6. Figma’s wireframe kits are handy

To save my students some time (since they were not designers), I shared with them Figma Wireframing Kit. The kit consist of components such as header, footer, navigation, and CTAs.

7. Figma allows for autonomy

I was able to be part of all my students projects as an editor. When you have 62 students and timeline of 8 hours, it is very hard to bond with them and gain their trust for collaboration. For me it was important every individual felt that they were getting the support they need, but I didn’t want to intimidate them by standing over their shoulder and observing what they are working on.

8. Figma is great for user testing

After the students prototyped their websites, it was time for the usability testing. Based on my experience working with junior designers, I knew that the best way to teach them was to let them observe external people experience what they’ve designed.

I asked students from other groups to usability check the products of their peers. That was the “presentation day”. The group of students start their prototypes on the projector without introduction. Then ideally a target user (from the other groups) eg. someone who owns a pet for the dog sitting website, would sit down and try to book a dog sitter through their prototypes.

Students who worked on the website would clearly realise missing gaps in their experience and write down their observations. Then they would have some time for a 2nd iteration. The grade was based on the usability check and the changes that the students have made.

9. Figma’s commenting used as a teacher’s tool for feedback

The comments section allowed me to give constructive feedback consistently to my students and point them exactly to the component or section of the website, that needed improvement.

In the beginning, I think my students were quite skeptical towards the tool, but they grew to love it and some even recommended it to the companies they are working at. Figma is a powerful tool and more teachers should consider using it in their classes.

Thanks for reading! If you would like to discuss further Figma or UX teaching, feel free to DM me.

Disclaimer: I am not working for Figma, haha. I just love the tool.