In Web design
Day 1 Opening Keynote: Welcome to Commons (Commons 2022) - read the full article about Figma, Web design and from Figma on Qualified.One
Youtube Blogger
Hi, everyone and welcome to day one of Commons.
This is Figmas first-ever conference for educators.
And we are so excited and honored to have you with us and for the next two days.
We hope you walk away feeling energized and excited about the school year ahead.
My name is Lauren McCann and I help lead the growing Figma for Education team here.
I feel so lucky that every day in this job, I get to help make Figma better for the classroom and to connect more teachers and students to the best creative tools.
For the next two days Ill be your host and emcee.
For this keynote, Ill be presenting alongside my teammate Miggi.
You want to introduce yourself? >> MIGGI CARDONA: Thanks, Lauren.
My name is Miggi.
Im a designer advocate specifically for education.
I was at the Rochester Institute of Technology since about 2005.
Before we get into it, I do have a few housekeeping items to help you get the most out of your Commons experience.
First off, all of the sessions today will be recorded.
If you have to step out at any time, no worries.
Weve got your covered.
All will have live captionist-provided captions in English.
Click the more button with the three dots all the way to the right.
When you click it, youll see an option to show subtitle s.
Turn that on.
You can then adjust their size and move them around.
Were also offering real-time ASL interpretation and will keep the interpreters pinned at all times.
Please select everyone when you want to use the chat and adhere to Figmas code of conduct that you can find at Figma.com/codeofconduct.
Remember to be kind to one another.
We may be virtual, but were all human beings.
So thats it for housekeeping.
Im going to give the stage back to Lauren to help kick us off.
>> LAUREN MCCANN: Thanks, Miggi.
All right.
Now, educators.
We wanted to acknowledge at the top that all around the world you are facing incredible challenges and continue to do so.
But we also want to acknowledge that despite those challenges, youre here with us today to learn, to sharpen your craft amongst amazing peers and experts.
And its our intention that with Commons, this is a chance for the whole community to come together to learn from one another and to share strategies that will hopefully make your next year a lot easier and hopefully a lot more fun.
You can view the entire agenda for Commons here at this website.
Across the next two days, youll hear from an amazing group of educators, designers, and even some students.
Were going to have hands-on workshops, interactive panel discussions and thoughtful talks where speakers will share their perspectives on education as well as how Figma and FigJam have been used in their classrooms to create more creative, collaborative, and communicative classrooms.
If you signed up for Commons but youre new to Figma, let me share more about our tools and why were bringing them to education.
When Figma started up just a little over ten years ago, they set out with the idea to create a professional grade tool to be real-time collaborative.
Since then Figma has become the modern way that people and amazing companies like these around the world use Figma to make thing on the internet.
Whether thats a website, digital art, a presentation, or maybe even just a really funny meme.
As you can see from this graph, Figma has rapidly become the design tool of choice, but were not just committed to the work for professionals.
We want to proactively empower the next generation of creators and makers.
Thats why were committed to having our tools be 100% free for education and ensure all students as possible have the chance to try them out.
But why does a tool like Figma, why does that matter to bring that to your classroom, you might ask.
Well, lets look at the history of digital media in tools and whats possible because of these advancements.
We see the history of tech in the classroom as three major building blocks.
Theres consume, contribute, and create.
We all know about when we started out with consume.
The internet came about and it was this magnificent invention for everyone and especially for schools.
Suddenly all the worlds information was available for you and your students at your fingertips.
You could look up any fact your student asked about.
You could show amazing videos from experts.
And you could download cool work sheets as well.
But it was more on taking information in, on reading it, on consuming it, versus putting your own ideas back out into the world.
We then had this another amazing breakthrough that Ill call contribute.
This is when things like Google Docs first made their way into the classroom.
The students could be contributing together in real-time.
And it became the norm to see all the cursors racing about to contribute their ideas to something like a document.
Or a presentation.
What I propose is that now we have the opportunity to move into a new era where students can truly create in the classroom.
Consider the difference between a document and a canvas.
With a document, you can take what youve learned and you can contribute text to that document.
With an infinite canvas like Figma and FigJam, you can express anything in your head.
Whether you want to make a draws from scratch or create a colodge of different types of media.
.
Students are making meaningful connections in a way that are truly theirs.
As learners become creators, they can speak up more and share whats on their mind with confidence.
And we think that our canvas can gap whats in students heads and how they can demonstrate their ideas as well as what theyve learned to you and teachers and fellow classmates.
So lets talk about what this looks like in practice.
Figma has two tools.
Theres FigJam and Figma Design.
So FigJam is the white board space for classes which is easy to use and fun.
You can share ideas in FigJam by bringing in a mix of word and ima js.
Its the ultimate tool for sharing ideas, making connections across concepts, and helping students apply their learning in real time.
Like hosting a class critique and giving feedback.
Weve seen it used for giving ideas or even mapping out a story board or an interactive timeline.
Really, the possibilities are limitless especially when you introduce this tool to really creative people like educators.
So I reviewed a bit about what FigJam is and Im going to demon sthat.
-- demonstrate.
Then Miggi will do some more.
Im now going to transition into the file.
Lets say in this example, I am teaching an entrepreneurship class and I want my students to come up with a proposal for a new business.
I might start out by creating some instructions on here, but I want to make sure they really are paying attention.
So Im going to do something called spotlight mode.
I click spotlight me and all of the students in the file then see what I see.
Im sure all of you probably wish you had a spotlight mode for your it person class, but we hope the digital one will work for now.
Lets say theyve read the instructions.
Now I want each of my students to come up with an idea.
But I want to make sure every student is contributing.
So maybe I go to this spreadsheet and I have my whole roster hoop.
Select all students, copy, then and there.
We have a sticky note for every student so we know each gets to contribute an idea.
Cool.
Now Im going to put them together in groups.
In order to make a great business, you probably need partners.
I put the students in groups and created a section for each of them.
And so what happens with the section is that all the students work is continuing.
And the students also have a sense of structure so they know where to put their work rather than going to other places in the canvas.
And of course we want them to vote on their favorite idea.
We encourage them to use stamps.
Press the E key and it will bring up stamps.
But how do you know each isnt voting for their own idea in you can hover here and it looks like I really voted for my own doggy day care idea.
But then you can hover and see who else voted.
This is great way to know who stamped what.
So now lets say theyve come to their final business idea.
Group one, looks like theyre doing a lemonade stand.
Thats a classic.
Who doesnt love that? I want to give them some love and use something called stickers to help decorate.
Luckily we just launched two new sticker sets for Edu.
You can see them up here.
All you have to do is go over here to stickers and you can find them and search.
I particularly love this little worm.
We also have this cool lunchbox where you can say hi, great work.
And it can expand to fit however you want.
We also have other cool stickers here.
Lets say you love this critique one, but maybe you dont love the color.
You can click up here to the variants and see all the different colors.
These are awesome.
Hopefully that would be helpful for your class.
Then lets say they move into research phase.
This lemonade group theyre talking about.
Whats the best recipe? What do I want my stand to look like? They started doing research and I as the teacher want to give feed back.
Im going to use the comment tool.
All I have to do is press C.
Itll bring up this little cursor person.
I can then say this looks great. And I press enter.
They can see the comments, move it to the side, and also see all the other comments Ive left for them here in the file.
So thats commenting.
Awesome.
And then now lets say were getting towards a later stage in the project and my students have decided were going to create a lemonade delivery app.
I would be interested.
What better way to help celebrate their work than Bitmoji.
I know weve got some Bitmoji fans out there.
We are working on creating a Bitmoji widget that will work directly inside Figma and FigJam.
Youll be able to select it here with the other widgets.
This is coming in a few weeks.
How it will work is youll select the widget and lets say I want to say great job.
I can search for that and boom, great.
It will bring up this sticker.
This is super fun to decorate your file and express yourself.
This will be available in a few weeks.
Thats it from me on FigJam.
Miggi, over otoyou to talk about Figma.
>> MIGGI CARDONA: Thanks.
I especially love the Bitmoji.
I am so glad we are launching that.
Figma is approachable, easy tool for any skill level or area.
Figma Design is more for the nitty-gritties of the visual design.
So with Figma Design you can design everything from mobile app propo types.
And what Im going to do is give you all a quick preview of Figma Design for those of you who may be unfamiliar as well as shine a light on some of the few updates from this summer.
So lets pull up Figma and here I am.
Okay, cool.
So lets say Im looking at this Figma Design document.
I am reviewing some of the website mocks that those students put together for their lemonade business.
So Im looking around here and theyve produced a brand called Zestybev and theyre asking me me to pluz review it.
One thing Im going to notice is the spacing seems to be a bit too much.
This ability to have autolay you controls on the canvas making it much easier to make these controls work for your layout.
So next what Im going to do is actually review this prototype.
Im going to select it.
Im going over to the prototype module and I see the student has set this up as a starting point for that prototype.
Im going to click play.
What this is going to do is give me the ability to review this design in the context of a phone app and interact with it as if it was actually produced.
Giving me the ability to test it and actually leave feedback.
So if I hit the C button, I can click and say, you know, nice work.
So thats great.
Im going to leave that.
Im going back to the canvas here and add a few more things.
We now have this inserts menu that will give you the ability to insert components.
Component libraries are kind of reusable elements we could drop into the design.
We also have plug-ins here.
But most importantly we announced that widgets are now available in Figma.
Whats great about that is I can search and Im going to search for the voice memo widget.
I have a copyright here.
Im going to drag that on my canvas.
It allows me to leave a voice memo.
Im going to record.
Nice job on this.
Im going to hit stop.
I can hide that title.
And hit play.
>> Hey, nice job on this.
>> MIGGI CARDONA: So whats great about that is I can leave voice memos and have a little bit more personalized one-to-one feedback in their designs.
So if I look over here on the left, I could see pages that are going to give me the ability to look through some of their process and iteration.
I can see some of the components theyve put together in their designs that can leave feedback.
Most importantly, I have the remainder of the keynote deck here as well.
Im going to hit play.
And from here what you may be thinking of is how do I get start as an educator.
Figma has a wonderful community at Figma.com/community.
We even have available in that community -- one second.
We even have available in that community a bumplg of templates that you can duplicate and have for yourselves.
You can also give them to students.
If you go to Figma.com/@education, youll have access to all of these templates.
We also have a collection of resources from others in the community as well that also include widgets and plug-ins that we find that are useful for education.
Find that at Figma.com/community/collections/education.
It seems like a lot, but its a great resource.
Also, if you check out our YouTube, we just launched a new series called Study Hall where I go over a lot of the ins and outs of Figma and FigJam specifically with an educator lens.
As well as if you are just like, okay.
Well, how do I get started? Figma is completely free for education.
You can go to Figma.com/education for if you are setting up your individual classroom.
You know, students are going to sign up as individuals.
Youre going to sign up as an individual.
We just launched a new Chromebook pilot so if youre a Chromebook district, you can sign up nar beta.
Also, one cool thing I would like to highlight for todays presenters, workshops, panelists.
We will be getting sketch notes by the artist Emily Mills who will be showing sketch notes in FigJam that were going to have available on her Figma community profile as well as ours.
So with that, Im so excited to have you all joining us today.
Im really excited for this lineup of workshops, speakers, panelists, so Commons is all about that communal space.
We wanted to make space for educators so that way they could share their ideas for their classrooms.
Figma: Day 1 Opening Keynote: Welcome to Commons (Commons 2022) - Web design