User Experience Designer
Since we are all remote learning, using collaborative tools is extremely important. We were asked to teach our peers since not all of them have experience with Figma, or design tools in general.
How to set up a design system using components
Low-, mid-, high-fidelity wireframes + prototypes using grids
- Animating prototypes
Disclaimer: this application we prototyped is in no way associated with the Centre for Digital Media. It was merely used as a relatable and theoretical example to teach students how to use Figma.
I worked with my peer, Joyce Xiao, to outline and run a workshop that enabled our peers to play around in Figma. This would help them understand how it can be used as a collaborative tool, create their own frames, and see the benefits for developers. Prior to the class, we sent out Figma files with some content to work through during the workshop. During our Zoom session, both Joyce and I shared our screens and worked alongside the students.
Each of the content we facilitated, we worked on prior to the workshop. Aside from a few meetings leading up to it, we mainly worked asynchronously.
To introduce some shortcuts, shapes, masking, and adding images, I made a sandbox space and shared it with all the students. This activity also encouraged collective participation and showcased how Figma worked as a collaborative tool.
Upon opening the file, students were tasked with creating shapes, masking the shapes, and adding images to shapes using plugins. To prepare for the wireframe practice, we also got them to download some fonts we would be implementing as styles.
Below is a blank copy of the sandbox space:
Prior to the workshop, we outlined a design system which featured branding colours, iconography, and typography to use throughout the app and workshop.
During the session, I presented a completed system (shown below). In order for students to understand the benefits of creating a design system, we shared an incomplete copy of the system. They were then tasked with adding a new font, colour, and icon.
This information hierarchy reveals a high-level view of the app's flow. Using Figma, I outlined every app page we would be showing and teaching in the workshop, from the dashboard to FAQs.
The CDM app's main pages would be presented in a "drawer-like" hamburger menu so that the user would not be distracted by different tasks or features. This simplistic flow is one of the main reasons we chose to do an application for the institution as a clear example of how to use Figma as a design tool.
At each fidelity, we provided tasks for the students to complete. Joyce went through both the low- and mid-fidelity wireframes where students learned how to use grids, some plugins, and creating shapes.
In the high-fidelity frames, students were tasked with creating frames using components from their design system based on mid-fidelity designs.
Below is the Figma file we worked from to show students more 'completed' frames:
Using the high fidelity prototype I made, we showed students how to animate using Figma. Due to time, we only managed to link a few frames during the workshop. I retroactively polished the frames to have a more well-rounded app concept:
This workshop really helped me to hone in on what aspects of Figma I found useful. Teaching my peers was certainly a challenge but it was a great learning experience. Overall, the students got a small overview of some big features on Figma. We hoped that experiential learning enable them to see how each feature could be applied to designing an application.
To me, the the most challenging aspect of this experience was the remote aspect. Had it been in person, we could have better understood the points of confusion for our peers and worked more closely with them. Going forward, I would go deeper into bigger systems and grids for designing for desktop.
Overall, I feel accomplished and am pleased with what Joyce and I did. The next step is to convince the CDM that this app would be really helpful for students while we are virtual learning...!
Below is a copy of a Figma 'cheat sheet' we made for our students and sent out after the workshop: