Creating a collaborative classroom remotely with Figma
Originally posted on davidhoang.com
February of this year commenced the third UX Design cohort I taught at General Assembly (GA). When I started my design education career, one of the reasons GA resonated with me was the approach to the learning curriculum; applied learning, experimental, and very hands-on. Instead of lengthy lectures, students are encouraged to collaborate in class together and give them the chance to practice. It’s one of the reasons the campus experience is so appealing for students.
This cohort would be uncontrollably different from the COVID-19 pandemic, which shelter-in took place during the third week of class (out of ten). Our amazing staff at General Assembly did such a great job transitioning the classes to remote.
However, one of the top reasons students sign up for these classes is due to the network they create with their cohorts and the hands-on experience with the instructor. Doing this remotely, though not impossible, would be a challenge.
Replicating the classroom and campus experience online
My remote work journey began in 2012 when I founded a digital product consultancy. In addition to that, Black Pixel, and now at Webflow, remote work is very familiar for me. However, for many students and instructors around the world, it can be completely new.
It was really important to me that the students had the most positive in-class experience, remote or not. We started the class with Zoom, a platform proven to provide the infrastructure for what seems like the entire world (likely in addition to Netflix). Our first week of remote lessons was before the interface design lessons (that would be taught in Figma). It was a challenge as most of the curriculum was optimized for an in-class experience. The breakout feature on Zoom is phenomenal, though we found something missing.
From there I decided to lean on Figma to be the core foundation of how we’d approach learning. I’ve used Figma to teach in all three of my classes, but this was the first time where it played a foundational role in the infrastructure of the classroom. I brought Figma to One Medical in 2016 and we were early adopters of the product.
The key elements to the foundation of a classroom experience which Figma needed to do:
- Being the primary visual representation of the classroom
- Be the all-in-one surface to teach, play, and learn
- The synchronous tool for students to do breakout sessions
We found a lot of interesting ways to use Figma and I’d love to share a few of them and would love to share it.
Multiplayer lessons
One of the greatest challenges of teaching a class remote is to keep people engaged. Even for the instructor, it can be a bit awkward to teach a class with everyone on mute. The beauty of having a physical classroom is the ability to move around and be more interactive.
I’ve been pretty inspired by Bret Victor’s Seeing Spaces. One nugget I took away from it is how visibility on the work is key to be effective. I believe this to be true for the classroom. As a visual arts major, many of my classes were conducted in a studio environment. Whether it be rows of easels or in a circle, it was very easy for the instructor to walk around. More importantly, the students could look at other people’s work. In a world where a lot of design iteration is done on laptops or over the internet, the ability to see what others are doing is key.
Since our curriculum was optimized for in-class, there were a lot of breakout sessions or independent time built in. The breakout feature in Zoom is wonderful and we found a lot of value. However, with Zoom exhaustion occurring to many people in the world with remote meetings, I needed to find a collaborative foundation to anchor on.
Having the students work side-by-side together allowed them to learn through being “next to each other”. We were fortunate to have Joey Banks from Figma join our class to do a very hands-on lesson for wireframing.
Here’s an example of a file I set up to start multiplayer lessons.
As you can imagine for students new to design (or any human), this was a bit scary at first. However, with this sort of open work environment, the students felt more comfortable and practiced together.
I suggest setting up a multiplayer lesson for content that is optimized for a walkthrough. This way it allows students to look at each other’s work with the instructor being able to debug and troubleshoot.
Pairing sessions
Pairing sessions are great for breakout activities when you need more of a 1:1 conversation with students. With being completely remote, I relied on the students to pair together to get a sense of interactivity. Those of you who have experienced Zoom exhausting know what it feels like to have someone aggressively presenting to you as everyone is on mute (except for that one person who is unaware). I wanted to foster a sense of closeness and had the students pair with each other.
We used the Moodboard community file created by the awesome team at Mixpanel. In one of our lessons on Brand and Design Language, the students paired to create a mood board together.
When pairing, the students were able to work in the same file together.
Some activities that are optimal for pairing:
- Brainstorming with digital post-it notes
- Learning a new feature in Figma together (ex: Autolayout)
- Idea generation (most students aren’t comfortable doing this in a larger group setting)
Critique and Feedback
Our instruction style replies a lot on quick feedback loops. Using Figma helped us find ways to add notes for people without being intrusive to the experience. We used a combination of the Comments feature and the Crit Notes file created by Rasmus at Figma.
Exploratory Playground Files
With such a dynamic workspace, I found myself often building out experimental Figma files for the students to play around with.
You can get the file here
Final presentations
The students are required to do a final presentation as part of passing the course. Guess what they used to create the slides? Figma.
Each student built out their final presentation in Figma. Thanks to Zach Grosser (a Figma alum and presentation designer in Amsterdam) for providing the excellent presentation templates.
Meet the students
Of course, I save the top highlight of teaching, the students. I’d love to share a bit about my cohort and the great work they did in our class. Some are seeking new opportunities, so if you’re hiring new designers, I highly recommend reaching out to them!
Paula Narvaez
A multi-diciplinary designer with a background in architecture and landscape architecture, Paula continues her design journey in UX bringing her unique perspective to create functional designs that enhance the engagement of users. Outside of work, Paula finds joy in attending music events, cultivating her indoor jungle (plant mom), and indulging with a bubble milk tea amongst other things.
- Website
- Twitter: @paulanarv
- Final project
Mikaela Couch
A trained graphic designer, Mikeala came into the class with a great arsenal of skills when it came to visual and graphic design. Previously at Gensler, Mikaela got to work on cool projects in the environmental space design field.
Larry Reinhard Jr.
Larry is based in San Francisco and is passionate about the intersection of social good, design, and technological disruption. He is a PM at Facebook building tools that ensure the launch of responsible AI/ML within the Facebook suite of products. He took the class to help build his core UX design skills and to validate his desire to dive deep and pivot careers.
Samantha Stapleton
“Hi there, I’m Sam, a New Jersey native who has made a home for herself in Oakland, CA. I worked as a pharmacy technician for 13 years while on the side pursuing an array of artistic projects including photography and modeling. I knew I had a passion for design from a young age and wanted to incorporate this skill into my career. I decided to pursue a career change by enrolling in a UXD course with David Hoang. His course gave me the skills I need to excel in my new chosen career path as a UX designer. David’s course was super helpful and I’m glad to have worked with him along with my other classmates as well. With UX, I hope to create seamless projects that are both user friendly and captivating as I feel it’s through design we can create a more beautiful reality.”
Karla de Guzman
Karla is based out of SF (shivering in the Inner Sunset) and has spent most of her career within the non-profit space, with an emphasis on community advocacy. She’s looking to pivot into the challenge of a UX research-focused path. When she’s not working on design and research, she loves climbing — mostly sport and bouldering (Bishop, Red Rock, NV, and Yosemite are favorites), her pup Potato, etc.
Next iterations
I’m hopeful things will return to “precedented times.” Regardless of when, Figma is now a primary infrastructure element for how I approach teaching, whether it is in class or not.
A few things I’m looking to do moving forward
- Building out our class slides in Figma so they can play around with prototypes and do the breakout sessions in the lesson
- Course tracker of students in Figma
You can find files I’ve created on Figma Community where my handle is @davidhoang. Also, check out our class projects with the #ga_sf.
