At the Rochester Institute of Technology (RIT), I teach New Media Design, a program that explores the many angles of digital design. When it comes to learning design, there’s no substitute for hands-on experience. That’s why I was immediately drawn to Figma—it removes the barriers between thinking, doing, and collaborating.
These are some of the activities I do with my students in Figma. Each has an accompanying Figma file that educators can duplicate and use in their classrooms, too.
1. Student trading cards
This is ideal for the first week of class because it combines a getting-to-know-your-classmates activity with a getting-to-know-Figma activity. The final outcome is a simple social media-style profile that makes use of autolayout and a few components. I like to have all students designing in the same file so they can get a glimpse of each other’s process and style. Once everyone has finished the activity, I create a page in the file that acts as a gallery.
For students who are more familiar with Figma, I encourage them to add their own questions and icebreaker components to share with other students as they build out their own profiles.
Figma skill level: BeginnerKey Figma features: Auto Layout, Multiplayer EditingDuplicate the file
2. Make a heart
Making new shapes in Figma helps build confidence and literacy with Figma’s broader toolkit. In this case, I ask students to make a heart using the pen tool, layout grid, and properties and then to customize it. It’s a quick and easy way to familiarize students with a handful of Figma tools that they’ll use for more advanced work down the line. As always, I like to create a gallery at the end of all students’ interpretations.
For an added challenge, students can use Smart Animate to make the heart pulse. They can also design other shapes and style them.
Figma skill level: BeginnerKey Figma features: Pen Tool, Properties Panel, Layout GridDuplicate the file
3. Figma tangrams
This activity uses the tangram puzzle model of seven pieces to learn about form and geometry. I like to do a brief geometry history lesson before introducing this activity. While the primary prompt asks students to turn basic shapes into recognizable animals, I also like to save time for some creative explorations by asking them to create a few abstract shapes, too.
For added difficulty, I task students with creating their own reusable sets without sharing this document. This requires them to perform their own research to find other puzzles. I love seeing what they come up with!
Figma skill level: BeginnerKey Figma features: Components, how to rotate and alignDuplicate the file
4. Design research paper
Like many design programs, RIT heavily emphasizes research. This activity reinforces that by asking students to visualize their research findings in a compelling way. The result is a collaborative library of articles they can read through and comment on. I’ve found that this activity often leads to productive discussions about visual hierarchy and communication design principles.
Figma skill level: BeginnerKey Figma features: Layout Grids, Keyboard ShortcutsDuplicate the file
5. Chat windows
Students create custom components to have conversations and give visual feedback within collaborative documents. I always encourage students to customize and make their own reusable Figma components for maximum usefulness in the future. I have found that students find this activity is particularly compelling because they know they can use their custom chat windows for future collaborative projects.
Figma skill level: IntermediateKey Figma features: Auto LayoutDuplicate the file
6. Collaborative illustrations (with constraints)
Students collaborate to create a unified system of graphic illustrations or icons under a set of shared constraints. I recommend that this is a collaborative activity so that students can support and critique each other as they go.
In the example in the community file, students constructed a bespoke angular grid to source geometric pieces, and used a very limited color palette to illustrate a number of concepts to support the text of a handbook mobile application.
Figma skill level: IntermediateKey Figma features: Creating styles for colors, Vector toolsDuplicate the file
7. Loading animations
We all have our favorite (and least favorite!) loading animations and in this activity, I encourage students to think about theirs and then create their own. I like this activity because it gets students to deeply consider how to visually demonstrate loading or thinking in an interactive application. It’s a nice lead-in to future conceptual and technical work they’ll encounter in more advanced interaction design.
Figma skill level: IntermediateKey Figma features: Prototyping, Smart AnimateDuplicate the file
8. Mobile magazine prototype
Students combine layout and prototyping to make a simple interaction for a mobile magazine concept. (They make a simple mobile layout of a magazine as a gallery and then prototype the navigation).
This can also be an expansion of activity 4: Design Research Paper, where students collaborate to make a working zine prototype with their own written content and images.
Figma skill level: IntermediateKey Figma features: Layout Grids, PrototypingDuplicate the file
9. A grid system for presentations
This exercise is a true deep-dive on grids. It’s great for teaching layout concepts like baseline, columns, gutters, margins, and modules for widescreen presentations. In preparing students to design layouts for all types of devices, and media, I start out by explaining, broadly, how layouts can be communicated with grids. For the activity, I ask students to start with layout content for a 1920×1080 presentation deck using this 14 column system.
Some supplemental materials that I recommend include Ellen Lupton’s Book, “Thinking with Type”, “The Vignelli Canon”, Josef Muller Brockmann’s “Grid Systems”, and Google’s Material Design’s “Understanding Layout” for more context.
Figma skill level: IntermediateKey Figma features: Layout GridsDuplicate the file
10. Print a zine
I like to inject a print project into my coursework every so often; students always enjoy making something they can feel with their hands! Figma can export to PDF which opens up some print possibilities.
In this activity, students lay out content across the pages using the component, and then preview the instances in the second page as printer’s spreads. They’ll have to take new limitations into account like print resolution and how layouts will look in a full spread. The community file has a template that will export nicely to a printer.
Figma skill level: AdvancedKey Figma features: Components, LayoutsDuplicate the file
11. Deconstructing a design concept/artifact
A great way to teach is to have students reverse-engineer a polished, final product. In this activity, students research a logo mark, design system, or artifact. The following community files use the examples of the Rochester, NY Flower City Flour Mill Logo and the Van de Graaf Secret Canon for print layout, made as a responsive layout.
I ask students to both research design intentionality and then recreate the artifact. I’ve found that this helps students better understand their own design approach as well as more easily communicate design decisions to others.
Figma skill level: AdvancedKey Figma features: Components, ConstraintsDuplicate the files here and here
If you’re using Figma in your classroom, we’d love to see how! Tag us on Twitter @figmadesign or email us at education@figma.com.
Related Content
