My Dear Friends of Figma in And welcome to my presentation Figma for teaching graphic design or my secondary title is How to Bridge the Design Divide to inspire problem solving, communication and Collaboration. And I was really motivated by the presenters that came before me. So it sounds like I might be echoing some of what they say, but, you know, reinforcements really great. Anyway. My name is Matt Kram. I am professor at Shawnee State University where I teach graphic design, if you can believe it.
I’ve been here for 24 years teaching design the whole time. I’m also a member of the Figma Educational Advisory Board, where I work with Figma to talk about how to bring design into the classroom and Figma to the classroom and to bridge that design divide. I see graphic design as really integral to education, I like what Patricia said. The design is foundational to education. And it hits upon three pillars that identify of education.
And that is to research, to express one’s self, and to reason or critical thinking. The way I came to Figma was also during when COVID struck. My university decided it would be best and safest for us if we took a week off and regrouped and that we returned to school by teaching our courses remotely. I’d heard a lot about Figma. I never used it before. I knew a bit about it from my experience in working with UI. So I dove head first into Figma during that week. I think I watched literally everything that Figma produced on the YouTube channel. I got to know Miggi really well, of course, through his videos.
And I found I really loved Figma. Something that brought forward and elevated it was the opportunity to collaborate. I was a bit worried about spending time behind a computer, behind a camera. And where that would lead us. If we’d still be able to collaborate well. Creating an account is easy. This is a good screenshot opportunity. Figma.com/education. Create your team.
Other folks have covered this as well. All of your students need to have editor privileges, that’s important. And there is a great video at this link for how to set up your team space. In Figma when I say the word team, that’s what I mean by classroom. Classroom/team, kind of the same thing. To do this I use three basic folder types. Those are class materials. I use a project folder for each of our projects. And I also use a hidden professor folder as well.
The way I set those up, create a new project. When I say project, think of that as a folder or a way to group files together. This new project, we’re going to set up the first one to everyone at the class can edit. When they can edit, they can view and edit the files that are available there. And then for the second one, this is the class materials folder. And this is so everyone in the class can view it. They would not be able to edit the files. That’s important. I’m going to use this folder to share things like my syllabus or project start files.
And this is the professor folder. This is the folder where I keep things like migrating or if I’m working on a project I’m not ready to share with the class yet. I’m going to set permissions to invite only. This means that only folks like myself and others I invite to the folder are able to access it. Okay. You can see we have our classroom space and have our threefolders for project setup. And we’re ready to populate those. Here are some populated files. A huge fig ma win here.
It’s really easy to get started. It’s all in the browser. A lot of my students don’t have access to professional-grade software at home. Figma runs great, in the browser. It’ll even work on Chromebooks or something more lightweight computers that are available. And we’re all in a shared space. And just to show a bit about that. My space looks like this. This is where I store my syllabus.
You can see my syllabus there. I’m willing to share this if anyone is interested in it. It’s probably not super interesting. And we also keep a class schedule there as well. Of course these projects can be solved by other tools like the Google tools and Microsoft tools. But I really like to simplify things. I like to keep things all in one space. But putting these things in Figma, I can be sure all my students have access to the exact same things that I’m working on. Okay.
So onto teaching graphic design. Some others have echoed this as well. I’m going to reinforce it. Here we go. Let’s look at what we’ve been doing. We’ve been working in Figma more about a year and a half now in the classroom. And we are at least in my class exclusively in Figma. We, of course, teach other classes here with other softwares. But for my class at least, we’re working exclusively in Figma.
Here are some examples of some of the things that have been worked on. Okay. I really like posters. You’re going to hear me talk a lot about posters in this presentation. This is one of the first projects the students worked on. This is for an event poster. Another event poster. And in this class, I have both beginning designers and also more advanced designers who are preparing to graduate. You’re going to see all different skill levels with these designs.
We also take on some branding. One of the first things we do is where I ask students to design logos for some of these characters that exist. And they have a lot of fun with these. We approach them like designing for superheroes or something. That’s really cool. I also asked students to design a personal logo. Here’s a nice example of those. I’m super proud of all my students if you can’t tell too. All this work is great.
This isn’t even just the best. This is a great sampling of the classes that are available. And my university even hired one of my students to create a project for the admissions program. Where they’re trying to help students to align to different majors, trying to help sort them a little bit. From the illustrations of the icons to working on the text. We eventually went on to print a brochure including some bleed area. So we were able to get through the print process. All of that run in Figma. It was fantastic. Okay.
So I mentioned I’m really into posters. But here we go. First project I always start with the posters. I have reasons for that. When students arrive to me, I don’t really know where they are in their journey as a designer. So I use a poster as a way to get to know their skills. I get to see how they approach design thinking and problem solving in general. Also everyone’s encountered posters before, so we’re familiar with what that looks like. And we know what posters should do for us.
So to get started, it’s really simple. I ask students to jump into my class materials folder. You can see I’ve already got the sample project there waiting for them. I asked them to duplicate that, which places the file in their drafts. And from there they rename it and move it to the project folder. Okay. In this case that’s going to be project one. Okay. So the stages for graphic design they walk my students through.
A lot design, of course. But the stages I walk through are define, design, review, and revise. Okay? I like that — seeing that as a loop as well. So we have constant improvement, constant iteration. You’ll see as we go along. Let’s take a look at a sample project. Okay. This is the project sample folder. Here’s a nice cover. I asked them, invite them to change this to match their own project.
I use Figma pages to organize the file. I include an info page for the first project where I delineate some of the parameters. For this first one, I like to keep the project simple. We’re focused on design fundamentals, space, shape, color, and specifically typography. So I limit them to certain number of fonts, certain number of colors. And I’m reminding them of some of the goals for the poster. I provide them all the content that needs to be included. And this is a bit of a talk through about creating text hierarchy. Okay.
So some wins here for Figma. This is a simple way to store files and pass fiels out. Everything is in one place. Before we were using things like Dropbox or we were passing around USB keys. This didn’t go well as you might imagine. Figma makes it simple. It’s all right there and I can even structure the files in a way using come poepts and other things that I can even update things in the file if they let me. There’s no confusion finding the files this way. Great big win for Figma.
Okay. So let’s talk deeper about some of the process. The first one is to define. And in the define stage, what we’re doing is trying to figure out what is the designer responsible for? And what are our goals for success? What will success look like? Okay. And I like to see design as a process of asking questions. Design is a great way to build empathy.
It’s a great way to think about how other people might navigate our project to move beyond our own thinking, our own point of view. And to do that, I use three questions. And those are what is the medium and what is the audience or who is the audience and what is the message. And I mean what you deliver the project on. In our case, it’s a poster. When we talk about the medium, we talk about what’s unique to the medium For example, it’s inherently different from an app which is different from a billboard. Okay? All those have unique properties that we need to address in our project and our way of thinking.
Some of those places that posters might be encountered might be different as well. You might run into a poster you might be in a hurry, it’s in passing, or it’s surrounded by other posters. Also we need to think about how this is passed out, how it’s shared. The audience. Okay. Thinking about the people we want to encounter our project. But that’s not necessarily true. We talk about even meeting the first audience which is their teacher. And my expectation ps.
And we talk about our class and our class’ expectations. The project we’re going to be talking about, it’s a poster for Hamlet. So we talk about where this poster might be encountered and who are the people that see this? So what expectations do they have? Should we meet those expectations or challenge those expectations? Also we don’t want to exclude anyone. Are there unique needs? For example, any literacy concerns. Certain communities may have literacy concerns.
Or certain populations also have vision or other capacities that we need to address as well. And finally for the message, what is it we’re really trying to accomplish? First way to address this, some students think our message is Hamlet. But in actuallity it’s an event about Hamlet. We’re trying to engage the curiosity. We’re also trying to lead our audience to some kind of action or to call for some type of response. If we look at our sample project again, I ask students to use Figma as a mood board and to address those three questions I mentioned. Let’s look at the sample project. I create a space for them to define their research and spend some time building a mood board or a style scape where they find other posters that might inspire them or inform their approach to this problem.
I give them some opportunities to search on the common places we all know. An example of that might be you see one of my students has collected these 12 images. You can see none of them are about Hamlet, but they all may be with a color palate or promoting different events and have bright topography and movements. So it’s interesting. Okay. So the big Figma win here is it’s easy to collect the research all in one place. I love having a simplified tool set. And again, Figma solves that problem for us. Figma operates very much like a virtual white board in this capacity.
Of course there are other tools for that including Figma’s own FigJam which is also a fantastic program. But I like to keep things simple. We’re all in one file. These mood boards are easy to share because they reside in our class team or class space. Other students can view what’s happening in their file. They can share and ask for feedback. And prior to using Figma, we used to print out all this research. And my class space would be wallpapered with all these projects. We’re probably saving a tree or two going with Figma as well.
Okay. Now for the design stage. This is what I think is the fun part. But this is also kind of the scary part. What do we do with all the empty space? What do we do with the blank screen? Okay? And you can see in our sample project, I give students three spaces to design posters. It is a bit scary to approach, but how do you start off?.
Copy all the content to the page. At this point, we’ve got a working poster. If we did nothing else, we’re at least communicating it could operate in some capacity and we even have a cute little graphic at the bottom. For the next step, we can go beyond this. Certainly we can do better than getting on the page. How do we make it more interesting or useful? And how can we respond better to our issues and questions of medium, audience, and message? So let’s go one step forward. Well, we can begin by simply creates mass.
And doing this we’re going to organize information, looking for similarities or identifying priority. And if you are familiar with graphic design, you probably hear designers talk about typography and hierarchy. We can begin to establish some level of hierarchy. I kind of made a mess with my red boxes trying to group things together and even subgrouping things together to establish some kind of organization. Next we can begin to help navigate through this information and create more interest in this information by using one of my favorite design tools. And that is contrast. Okay? And we have several tools to create contrast. Simple and obvious ones are sizing, color, and the weight of the text.
You can see I’ve begun to organize the information to these different sizes. I like to talk to students about T-shirt sizing method. Where we start with something that’s small size and medium, large, on to extra large. It’s a simple way to think about hierarchy in how to have our information divided in those four categories. And I borrowed an idea from a famous offer Robin Patricia Williams. I’ve renamed it to the CRAM design method. I apologize for it. But those four different processes are contrast, repetition, alignment, and mass. And so I ask students to make sure they’re thinking about all the tools as they go through the poster.
And you can see this project has through several stages of iteration. Finally arrived to this point where they’re using different alignment techniques creating focal points. All using the CRAM design technique. Okay. The action step here for students is the design stage. So I’m asking them to experiment, exaggerate things, look for differences and highlight those differences. To iterate, to go through several different posters hopefully. And to play. Many before we mentioned the process of play as well.
I’m a big process of discovery through play. And that’s the stage they engage with here. You can see this really engages the expression leg of the triangle. Let’s look and see what our sample project looks like. So here’s the blank space they have. Here’s the example of the student’s response to the design teenage. Stage. You can see she went through three different iterations of this event poster that she’s working on. Okay.
So some Figma wins here. Figma has a fantastic tool set. I was worried about being limited by moving to a browser-based tool. That wasn’t the case at all. Figma is powerful. In fact, I have found it is actually my preferred tool. So in fact, some of my clients are like Matt you got to do this in to to shop. I like to work in Figma. Figma is quick and responsive despite being in the browser.
I feel like it’s faster than most other tools. It’s intuitive. You have access to hundreds of fonts built right into Figma. You have grids, rulers, all the other tools you need to create designs and best of all, again, of course mentioning collaboration as part of the process. Build right into it. All right. Now we’re into the review stage. This is one of the best tools to come out working with Figma. This was a bit of a surprise to me.
So critique is important to the graphic design process. Critique and feedback and leading to provision. It’s all part of the typical design process. We have some goals for critique. Those are to unblock problems and generate ideas. To elevate quality, to encourage consistency, and, of course, the number one goal with my critiques is to help the designers grow and become better designers, better thinkers and problem solvers. And also just to become better people. I think — it’s about connecting people with other people. But what I was seeing was critique is already in an in-person scenario.
As we move to remote, critique became almost impossible. My students began kind of hiding behind their camera. And not really being involved much further than simple mechanical observations. Reading through some of the Figma documentation, I came across a document about how designs are done — I’m sorry. How critiques are done at Figma. And one of the methods they mention was the critique process. The described it as working remote as well as asynchronous. Provides tons of documentation because of the way it functions. And the document suggested it encouraged greater pargs.
To get started with this, again, I provide a template for this for my students. You can see I’ve got that in class materials. Again, I can share this out later. I asked students to duplicate this. From there add to the critique document and then we begin our review. So there’s an action step here for students. And that is I asked students to review at least six peer projects asking them to leave notes, to unblock, elevate, and also notes of encouragement. Let’s take a quick look. So here’s what it looks like.
I ask reviewers to leave little icons for the fact they’ve reviewed. I have a quick little ie breaker which I think is a fun way to get to know each other. Then I provide more instructions and I reinforce the goals for critique. Again, that’s unblocking, elevating quality, encouraging consistency, sharing context as well. And I leave some notes for reviewers so they know what to offer. Then there are spaces for each of the projects for students to copy over. And we can see looking again at Sarah’s project, this is where she’s copied over. You can see all the lovely notes and comments she’s received. Including one ambitious reviewer who literally copied her poster and began making changes to suggest changes they thought might make the poster better.
. More great comments and something really motivated to do some help. And the third one, same thing. Okay. Some big Figma wins on this stage. Previously this was impossible without Figma. Figma really empowered this process. But maybe even a bigger win was I was seeing that the comments were more verbose, more thorough, remove some of the pressure of feedback because it wasn’t in person. It was asynchronous.
And also all the designers, all the student designers left with this incredible document that they can review in their own time. So they were able to keep that. All right. Onto the fourth and last stage, but it doesn’t really end at this stage. Because this process should actually be seen as a loop. So after this revised stage, they can revisit any of the other stages they met before. Continuous improvement for the win; right? Okay. So review and respond.
I ask students to choose one of their reviewed posters. And to respond to that, by incorporating the suggestions into the poster. And for the suggestions they did not find aligned with their goals, I asked them to write responses or to offer a reasoning as to why. Let’s take a quick look at that. Okay. So this student Sarah, she chose this and copied over all this information from the review. And she responded by making these changes and offering this verbal response. You can see, again, it’s all sent up for printing with the crop marks and bleed area suggested. We just export these to PDF and are able to print them in our print shop.
It works great. . In this process, I found that students feel supported. They feel like they have not just me supporting them. One of the most exciting things to emerge was the ambitious students who copied over the design. Students become peer supports themselves. Continuous improvement again for the win. Big Figma wins here as well. Projects become collaborative just by their very nature. And again like I mentioned before, I really enjoy the fact that students after the silent critique process are left with a document that contains all of the critique notes.
So they have building documentation. And then if things go wrong, Figma has built-in version history to save us. All right. So finally Figma is already well known as a favorite design tool and progressions. But based on my experiences, it’s also a great resource for the classroom. Figma offers free tools to enhance learning by surfacing collaboration, peer support, and iteration through the design process. And that’s what I’ve got to say.
Come for the knowledge, stay for the resources: join Matt Cram to learn how you can effectively use Figma to teach core graphic …
Figma Official Channel,figma,for,print,app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, whiteboard, Figma tutorial, Config, Config 2022, design system, tutorial, Figma for Education, Commons 2022, product:figma_design, audience:student, language:english, format:standard, produced_by:figma_for_edu, theme:illustration, event:commons, series:figma_for_edu, type:other, level:beginner, primary_feature:, secondary_feature:,