My Dear Friends of Figma in The L.A. area teachers are doing amazing with Figma. They’re going to share some tips and tricks with how they got started going from have never used Figma before to doing advanced stuff with their students. This is going to be practical. You’ll hear their tips, tricks, things they did with their students to get them going. Without further ado, Patricia will start us off. Then you’ll hear from Libby as well. Thank you both so much for being here. >> PATRICIA VINING: Good morning, everyone. How are we?.
I’m very excited to be here. Give me one moment to full screen. All right. There we go. Sorry about that. So I am Patricia Vining at Samueli Academy here in California. Sorry, I don’t know — there we go. So a little bit about my background. I have 20 years teaching design at the university level.
I was principle and creative director for a strategic communications and design firm that had four Fortune 500 companies as clients for over 15 years. And five years ago Samueli Academy offered me a chance of a lifetime. So helping community youth in Orange County thrive and prosper. They realized early on that the only way they were going to change the abusiness ball graduation rate for the students they serve is to build their own high school. So this project has been 20 years in the works, because they also conceived of a residence for the students. Because the life of a foster youth, they very often are moved by the state, so they get to a school. They acclimate. They feel safe after a year, and then they’re moved somewhere else. So we just opened our new residences.
So we built the academy in 2013. This is our tenth year to improve that graduation rate. We are proud to say that we have a very — we’re one of the top schools in the nation for graduation rate, for college retention. We have an alumni director that works with our students beyond college. So we’re off to a very good start. We are a project based and work based learning school. I teach four dual enrollment classes that lead to a certificate of design upon graduation. Students are required to either take design or engineering for graduation. And last year in addition to opening our brand new campus, this started with one portable ten years ago on a dirt lot.
Our campus as you can see in this photograph here was finished during the pandemic and sat empty for a year, which was heart breaking. But quite an amazing feat, because it’s all based on ten years of capital campaign, $75 million all in donations. . So last year we built the fire house design studio which is a fully student-run design agency. Works for real-life clients in the community. Students interface with the clients, write the creative briefs, do the production schedules, and they actually assign projects to the different classes. I teach design two, three, and four. So the theme for this workshop is designers make maps for places that don’t yet exist. This is a quote by any favorite industrial design er Rowena Reed Costello. I thought we would go through the UX process while doing this.
So I’m going to show you exactly how to set up your classroom and get ready for Figma. So the mood for this is design is foundational. It informs, supports, and elevates every industry. No matter what you teach, teaching design thinking or design content is extremely relevant as far as 21st learning skills go. Our program focuses on leadership, teaching kids about issues like sustainability, accessibility, equity, and sbersty and inclusion. These are all extremely important. That we have to look out for each other. We teach digital literacy. We teach digital responsibility.
And the different use of technology. And finally, innovation and creative thinking are vital in our program. We create complex problem solving. We teach critical thinking. And systems level design. It’s extremely important. We don’t just teach — have our students design a logo or a poster. They design the brand. They design the collateral, the style guide.
And then they present to their clients. Sorry about that. There we go. So I built a little wire frame and you can build a wire frame for how you are a model for mastering Figma yourself through these five steps. So here are the five steps to mastering Figma yourself. Got to master it first. One, playful learning. Sometimes it’s hard to read a book or look at a video. I started with being curious about Figma.
I follow it on LinkedIn, Instagram. Not a big Facebook user, but they’re all treasure troves based on information about Figma. I found a post about games built in Figma. I didn’t even know you could build a game in Figma. I spent time not only playing the games but then analyzing how they were built. As I did that, I learned a lot about Figma’s tools. Second, personal projects. I planned different projects for my students using Figma. Again, you have to get in there and bang around.
Think about something you need far class assignment and then create it. I created this assignment from an existing community template. And I’ll tell you more about the community in just a minute to use in one of my advisory classes as a social emotional learning activity. Number three, explore the Figma community. Now, the community, you just click on community when you’re in Figma. And it is a gold mine of resources. Anything you’re looking for, search there first. Because there’s going to be inspiration, a prototype, a wire frame. It’s already built and you can remix and remaster all you want.
So anyone can contribute and publish in the community. So I found this icebreaker. They have these ice breakers in there. This one, my students absolutely loved and it got them up and running in Figma almost instantly. It’s called rock star and it’s all about them, of course. It takes them step by step with instructions from creating a frame and then creating a grid and adding assets as they go along. And they absolutely love this. And I shared with the Figma staff that my students after this, they wanted to use Figma for everything. I had to explain to them our clients wanted their files in photoshop or illustrator.
So it was a great introduction. Number four, reading the Figma blog and books. So the Figma blog, I subscribe to their email newsletter. And it’s also full of all kinds of great tips. But this particular — the one on the left here is — was an article about collaboration which is key. We’re a work-based learning and project-based learning school. So it’s one of the pinnacles of what we do. We do a six week, eight week project. So collaboration is key.
And it’s definitely to teach collaboration in high school. It’s our most awkward time of our lives. This particular article spoke — had a whole section of role clarity. And we were doing a restaurant project called restaurant design project called eat, love. I designed five roles. Everything from brand manager to UX designer. Then I wrote the job description and matched the assignment to the description. That way students could choose the role that they were maybe excited by or challenged by or maybe wasn’t overwhelming for them. Maybe they were having a rough patch and that was something they could manage.
And I have some great books. I’ll share my email at the end and you can email me and I’ll share a great book that I found recently about Figma. So here we have — again, courses and videos. Sometimes that can be a little bit overwhelming. I look for courses and videos that aren’t too dense. And one I found — this is one of the top on Udemy that was affordable on a teacher’s salary. For those of you who maybe have never taught UX design, it goes through the UX design essentials. So it’s a really good one. As well as teaching you Figma as you go.
Then you can move to YouTube where there’s some free courses. There’s a whole series by this gentlemen Jesse Showalter and he’s engaging. They’re short, 30 minutes. He teaches you a lot in that time frame. So now once you’re up and running, how do you build a prototype to engage and onboard your students? I’m going to give you the five tips in the process I used for onboarding my students and at one point here was when I was teaching this to myself, I discovered. Was our school. We’re a laptop school. And we have a virtual desktop. Well, we did.
We just got a new lab this year. Yea. We had a virtual desktop. And all of our software comes through the virtual desktop. We learned quickly during the pandemic that the Wi-Fi in Santa Ana was not equitable. Many of our students had to work on their phones from home. So Figma was a web-based application and engaging and so simple to use. I was like, okay. I’ve got to find out what this Figma thing is.
And it was so easy to get in here and onboard my students. So you go to Figma.com/education. As you can see here, there’s this black button. Get verified. You click, verify yourself as an educational institution. That’s the part you do. Again, it’s very user friendly. Then I set up my classes by period in my dashboard. And you can send an email or a link to your students.
And the instructions for the students to enroll in that class on your dashboard are also very simple. So don’t be intimidated by that. UX process. This was the project — my first project I did with my students during the pandemic. Like I said, as I was building the — flying the airplane as I was building it and learning FigJam and Figma, but I quickly realized in hindsight that because I focused on Figma during the pandemic. But now I know that you can create all of the research pieces and the assets in FigJam. You can see at the top here, they created their personas, user flowchart. You can do sketches for style guides. All of that if FigJam.
And then so easy to copy and paste those assets into your Figma app or website as you’re designing. And these guys were tasked with designing an app for teens for themselves. They were the persona. And they were to design an app for coping with COVID. And it could be anything from total escapism to mental health. It could be about physical health and testing. Anything they wanted to do. You know, storytelling. These were sophomores and they did quite a good job.
The next thing is through wire frames. This is at the micro or student level. We are that proverbial shoe maker without shoes. The fire house — my goodness. Is my time off? Am I — (laughs). Anyway, probably need to move along. Let me check. I’m sorry, guys.
I get so excited. Which I love. The community is so important. The community is a place where you can go to discover just about anything. You search anything you need and you will find all sorts of resources that you can remix and remaster everything from UI kits to UX. And this is the demo I’m going to do for my seniors. We have no yet. From the wire frame and you can see here just a quick popping in student work. So I’m going to show my students how to plug and play there we go.
Okay. Real quick. UX project. My students got to work with the creative director of Disney UX, user experience. She’s a former student of mine that created watches and apps in — I’m sorry. She creates watches and apps for children. And they were tasked with creating a mobile game for a specific age group for a specific age of child. My former student worked with us for several weeks. And they presented their final apps.
And finally presentation. VANS challenged our students to conduct trend, demographic, and sustainable technology research and come up with a clever brand collab idea. Students then designed a line of shoes, skate decks, as well as a social media campaign. They did an amazing job. This one was based on the video game Valerent. They presented to six of their interns from the academy, a new school that teaches street wear design, footwear design, that sort of thing to students of colofr. If you would like more resources or any information about our program, please contact me at [email protected]. I will share you any information you need. Thank you so, so much.
And I’m going to pass this over to Libby Griffin who is going to tell you how she got up and running in Figma. >> LIBBY GRIFFIN: Thank you so much. That was incredibly inspiring. Wonderful. >> PATRICIA VINING: Thank you so much. I think I went over and I apologize. But thank you all for coming. >> LIBBY GRIFFIN: Thank you. All right.
Let me share my screen. All right. (Silence) There I’m back. Let me make sure I’m still screen sharing. Good. All right. Awesome. So hi.
My name is Libby Griffin. I am a CTE instructor at Anaheim High School in southern California, the City of Anaheim. They were really creative with that naming. My background: I’m a design student and I have continued to learn about design ever since I graduated college. I guess I wasn’t done. I also have a master’s in career education technology. That’s what I’ve been mostly focusing on I had five years teaching in private school where I was fortunate to teach for high school and junior high. Let me tell you, giving power tools to junior highers is an experience. I am also lucky to teach AP art history which was an incredible experience.
And I was the conservatory graphic designer and build assets for the program and helped students build assets for their student web productions as well. On the side I was also working as a freelance designer. So I did a lot of work professionally on the side while I was teaching. I’ve since moved to public education. When I moved to southern California. I’m now in my second year teaching at AHS. I am in the CTE program. My primary focus is on career, finance, technology and digital animation this year. I look forward to teaching graphic design again next year.
It has been an incredible experience transitioning and seeing the difference between private and public. And I really think it’s informed a lot of how I approach education for myself. But especially in particular my students. So I have the great fortune of working at this district that is promoting the five C’s. Alicia was very great to bring up the four C ‘s. I had not known my district was so extra that we had an extra one. The five C’s my district likes is communication, critical thinking, collaboration, creativity, and character. Are all the soft skills my district is hoping the teachers will instill in our students in conjunction with the hard skills. So the 21st century skills the students learn and getting the technique and skills down.
So we combine the hard skills of the actual products and the programs we use in class. And then we match that with the soft skills to create a holistic student so that when they graduate, they not only can create great work, but they can talk about it eloquently. And so building holistic people moving forward through the skills. And we embed these five C’s into the projects we do in our work in a project-based setting. We go from one project to the next. Each one is important that I incorporate all five of these components. Students, however, come to school and they are — they are their own personal self. They have a personal point of view. They come from a rich heritage and culture.
They come from a family — very different families than maybe the ones I know. And they have a personal vision. And so all of those kinds of things, even if they’re not 100% aware of them, those are concepts and emotions that those kids come into my classroom having. And it’s really important to me to fortify those characteristics and that understanding of self that they have so they continue to grow and strengthen themselves. Not only am I going to teach you hopefully solid 21st century skills that can use the programs we use in class, but you will learn the soft skills to communicate and work with others. As it was mentioned earlier, there was very few times where you’re at work by yourself. So much of design is in groups, teams, your team connects with another team. It just does not stop. It’s collaborative. And then make sure you’re a strong person by yourself and you know who you are and you don’t undervalue yourself.
It’s a big issue in the industry, I think, with new designers coming out and underselling themselves. They have skills and great talent and do not go out there thinking you cannot compete with that. So I take who they are when they come in my classroom and I’m trying to give them more, not demonish anything. So I’m designing these programs and projects, the two of the five C’s I personally struggle with, I have a hard time building communication within teams. I just am not the greatest at it. And collaboration in those teams. So making sure that everyone know what is they’re doing. So those two are the ones I have the most trouble with. And so when I was approached by the district, they introduced me to Figma and they hosted a kind of educational meeting for us.
So I got to see how the program would work. And then they said, please introduce this program to your students if you feel comfortable. And from that teaching meeting we had, I felt comfortable. I said all right. Let’s build sop project. So when I have some new coming in, it’s key for me to instantly look at fitting that in. Those are the ones I struggle with. Everything else I can do no problem. Slide it into the programming and project.
Absolutely no issues there. I always want to start with those two right away. So I had about seven weeks left of school and I broke it down into four projects to get my students up to speed. And then how far can they take this? How far can they go? And how far are they interested in going? First thing we did was broke it down into an example. I had to learn how to use Figma in order to be able to teach it. So I went onto YouTube and found a cute example that wasn’t too complicated and we did that.
Then we took that to a next level. So I’ve shown you how to do it. What can you do with it? Then we built up to a portfolio and then a prototype at the end that took the last 15 days. And a prototype in case you don’t know is kind of a sample of how an application or website would work. It’s not just a staff image. You can work through things so you can hand it off to someone and say this is how I expect this will function in the real world. And it is something I would encourage you to get through to that prototyping phase to try it. To watch those kids light up when they see their work move back at them, it was so much fun to see the excitement and how many clicks there were in there.
It was fantastic. So I started with the basics. We had had, you know, three quarters of the year before this, we learned all the basics of art and design. They had worked with other kinds of technology and medium. What did you learn there? You learned about line and shape. I have to teach you how to use Figma. So I found this cute YouTube tutorial that you post. I highly recommend you check Miggi out for that.
There’s tons of resources out there. I found this one. It’s just a hamburger menu. Then you click and it’s the X to get out of the menu. And you simply create these two frames with this image and this image. And then you link them together in prototyping. And it does not take very long. I did the tutorial in one class and then the next they tweaked it. Generally this is all we did.
For two class periods, we made sure everyone got to this stage. And that was plenty of time. There was no issue there. It was a new program. . It was a new experience. There was a lot of chatter. So it was great fun to do this project with them. So they know how to do this. They know how to link everything now.
So what can we do? So we talked a little bit about branding and how do you represent a company? So I put everybody in groups of twos and threes. You have to create a loading bar for a company to represent their website as if it was processing an order or something to that effect. So you can pick anything you wanted. It did not matter to me. I wanted to make sure they had multiple assets they could show. A collection of loading bars as if an application was loading on your web stream buffering. And how could all of them function the same but look different.
So this team bigged Olive Garden. The first member decided to fill her water. So she built these shapes. Line shape really simple, a little bit of color. Let’s not go wild. And how does the progress go? Your water fills up. That’s how you show the progress. She built these together and then wire framed them together in prototyping.
You’ve got initial. As it loads, the water fills up. Really simple. Not complex. But working together in a team to figure out who can do what. What is appropriate to represent the company. How can you make it prototype together. The water used to fly out of the glass, so she had to figure that out. I asked her why the ice wasn’t coming up. She said it’s on the rocks.
I did not ask her any more questions after that. So you’ve got a lot of movement happening here, but you have just one person in the team. You also have another team member and he was very creative and he decided he wanted to work with more of the pasta, the food groups. So he did a loading bar where he is stacking the lasagna up and garnish at the top. I was so happy about that. Same thing. Showing you the layers and process over time of how to things change and work. I’m using the prototype. All I have to do is click through the slides and you can change those.
They picked the ways they wanted to do that too. There’s a lot of flexibility in prototyping. There’s a lot of flexibility in how you work, how you want it to work for yourself. Versus when you’re presenting it to a client, for example. These members worked on Olive Garden. There were a lot of different examples. Really fabulous work. A lot of fun too. So they did a little bit of collaboration.
How can you take that through thinking about it and represent what it is you’re trying to communicate to others. So our next project, we had them do a personal story through their portfolio. So what kind of colors represent you? What kind of images of work have you done in class that you think represent you as a designer? How would you like to represent that through your prototyping? So what kind of transitions would you like? What kind of movements would you like? These are all things you have to think about as a designer. And you think of it as a head start. Because sometimes you don’t have to do so much research.
So it’s a step into this. I asked them to do their portfolios. So they came up with their own logos. Again, we go back to logo design and branding, color theory, and use of space. What things did Jalen do? Amazing things. Worked a lot with creating different kinds of composted images, working on a magazine cover, infographics, and this one was cute. She made an animal crossing. How do you change your clothes in animal crossing.
They made logos for the bottom of their email signatures so when they send in school, it looked a little more professional. But it’s personal voice. It’s her vision. Working with vectors, color stories. All kinds of things. This is her work as well. And so how do all the links work and how can you travel through this space? She was really straightforward. Clicking straight all the way through.
Finally communicating and collaborating. So the final project that we have worked on, I asked these questions. When do you listen most? Because it’s definitely not in your class before this one. What is important to you? What is it that you want people to know? Where do you feel empowered? Because empowering yourself to know you have answers and you have a vision and it’s valid is important. Why does it matter to be heard?.
You know, when people aren’t listening, why are you frustrated? what is it you want them to know and what do you want them to understand? Who has something to say. Just talking for the sake of talking is not necessarily help l. So you know you have the capacity to say it. So I asked them to get into small teams and talk amongst themselves and figure out what is important to you on campus. There is a lot of transition happening on campus. Trying to make sure our students feel heard and their vision and understanding is being presented to the school. And so making sure they can start talking in ways that say I know what I would like to say and how would I present to that to others that’s respectful and appropriate and instigate the conversation.
So our project was to create a prototype of Instagram. An app that already exists, which meant they didn’t have to design anything in particular. They did have to practice the vectoring, spatial relationships. To recreate it, making logos, their typography work. And then how are you going to make this function? So thinking from the other side of Instagram, how does that function? And they picked Instagram. They said that they liked online social media and this was going to be the most visually dominant one they could use to create a message and a story. So the whole class picked this one.
And every team moved forward in their own vision. And we went and found pictures on campus. They took pictures themselves to represent what they wanted to draw too. And that so many people were excited about fashion but hesitant to get loud with it. So they were showing you the different options available and took pictures of people’s backpacks as a way to start that conversation. So all of this is done through Figma and it should be incredibly functional. They should get some background information. But when you click on any of the images, you can go through and scroll through to see what it is that they’re working on, what they’re saying as if it’s Instagram. You have to be able to scroll was my stipulation which I’m sure they really enjoyed.
But then how far and creative can you take it? They created all down here, made the functional buttons. As if it was Instagram. So who’s commenting? And all of them are functioning. So you can come down to this one and scroll down. It all works. It’s just like Instagram. And it’s incredible.
It’s not anything to do with that site. It’s all totally built on Figma. Absolutely incredible and really cute going around asking what people thought, the comments they said while we were in cross. And further, getting these pictures from people around campus. Other groups did work with security cameras. They felt there was a lot of them. So they were taking pictures with the cameras up in the ceiling to show where they all were and talk about why is this one here, what are we expecting? There was another team that did exclusively shoes. What kind of shoes are on campus. Fashion was big, I guess.
And just kind of what kind of things you want to draw attention to and how can you show that to other people is really fun to work with them on that one. So when I come back into the projects, what can I do better next year? I think the communication went well. The collaboration went well. They worked on critical thinking. They had to solve a lot of technical things that they had to figure out in Figma. So how do you figure that out? I shared with them all the things I have. I have YouTube.
I have the Figma community which is outstanding. I got a lot of resources from there and would really encourage you to go to that community forums when you have any questions. And when you’re trying to look for inspiration, because as Patricia mentioned, there’s tons of forms already available that you can just make a copy for yourself and then modify as you see fit. But a lot of it is plug and play and ready to go. How can they work on their creativity? How can you take what you know and understand and elevate it to another level that’s new and improved or reflects more of your personal style so you can create something new. So you don’t have to reinvent the wheel every time. That’s not a great use of time when trying to learn things. And then character.
How can you be stronger an truer to yourself and grow with your moral compass as you enter the world where there’s ambiguity? How do you represent yourself? How do you know how to take a situation and make a product that’s going to help help other people? So bringing these ideas and soft skills together was incredibly rewarding to see watching them grow from excitement to I made a button click to I’m going to represent what I feel strongly about on campus not only for myself but I feel confident talking about it in group setting and sharing it. It has been an incredible experience. And watching our administrators and teachers come in and see what the kids are working on and seeing they are able to communicate, they are able to explain the issues. Sometimes when they’re giving a presentation, something doesn’t work. How are they going to solve it? How are they going to be able to work with it?.
And then moving forward in their careers, these are all skills they’re going to be able to take with them. And things that are online, easy to share, easy to show other people if they run into someone in a movie theater, how can they talk about the work they’re doing and how can they connect with other people? It makes it really easy when everything’s online and through a cloud. It’s just absolutely incredible process. So I wanted to say thank you so much for listening. If you have any questions or would like any of the kind of resources that I had mentioned through the YouTube videos or any of the work through the community, you can feel free to reach me by email. I would be happy to help anybody out. It’s really easy. It is very quick and the kids get into it really quickly.
And the trick is keeping up with them sometimes.
Learn from two educators about how they got started with Figma in their classes and what you can do to expedite the process.
Figma Official Channel,how,got,started,product:figma_design, audience:student, language:english, format:standard, produced_by:figma_for_edu, theme:other, event:commons, series:figma_for_edu, type:other, level:beginner, primary_feature:, secondary_feature:,