Designing Interfaces with Figma
Free to teach as-is — the teacher guide, student handout, and slides are included.
Free — we'll email you an access link. Google Docs format.
Objective
I can create a basic user interface using Figma.
Part 1 of 4
Warm-up video
Aliena Cai · 8:41
We don't generate video — this one is by Aliena Cai on YouTube. The practice questions and exit ticket below were drafted by AI for this objective, and every question is editable in the teacher guide.
Part 2 of 4
Key concepts
3 concepts
- 1
A wireframe is a digital outline of a design, representing the big picture of an idea.
- 2
In Figma, you can use the text tool and rectangle tool to create wireframes of user interfaces.
- 3
Instead of using lorem ipsum text, use realistic text to make your wireframe more understandable.
Part 3 of 4
Practice
9 questions
What is a wireframe in the context of UI/UX design?
In Figma, what is the purpose of creating a frame?
Part 4 of 4
Exit ticket
Quick comprehension check
“Using Figma, create a basic wireframe of a simple mobile app screen containing a title (using the text tool), a main image (represented by a rectangle), and a button (represented by another rectangle).”
Sample answer included in the free materials
Get the materials
Teacher guide, student handout, and slides — free, in Google Docs format
Teacher Guide
Complete lesson plan with answer keys and alternate activities
Student Handout
Printable worksheet
Slides
Ready to present
We'll ask for your email to send your access link — nothing else.
Teaching a group at a different level?
Where are your students right now? We'll rebuild this lesson to match — including the teacher guide, student handout, and slides, saved to your Google Drive.
Adapt This Lesson
