Why should CS students learn Figma?

Every app your students use was designed before it was shipped to production, with designers and developers working side-by-side to bring it to life. These lessons bring that workflow around building software into your computer science class. Students will build a real app prototype while practicing concepts you already teach, like decomposition, modular design, and testing, mapped to CSTA standards. Best of all, no design background is needed for you to start using these lessons in your classroom. Each video walks you through it step-by-step.

Every app starts as a design.

This learning hub gives high school computer science classrooms a hands-on way to build high-fidelity app designs in Figma Design. Across four lessons, students build a dog adoption app using the same tools professional product and engineering teams use.

The skills students will develop throughout this course mirror the workflows of world-class product and engineering teams. With short video tutorials and ready-to-use Figma files, students build responsive layouts with Auto Layout, turn repeated elements into components, store options with variants and properties, and connect screens into a prototype they can tap and test.

Teach all four lessons in order to complete the full app, or pick the one that fits your unit. If your students are new to Figma Design, we recommend starting with our Design Fundamentals for High School Classrooms course first.

Start exploring below and get your students building with Figma Design!

Getting started

Figma is free for eligible students and educators. To get the most out of these lessons, choose the option below that fits your classroom and set up your education access first.

Introduction

1. Structuring responsive layouts

Describe the rules once and let the layout do the mathIn this lesson, you’ll build a UI card for a dog adoption app, with an image, a name, a description, a row of tags, and a button. Then you’ll stress test it by adding longer text and resizing the card to see how everything adjusts on its own.

Every app is built from containers holding other containers. In Figma, we call these frames and nested frames. Auto Layout lets you set the direction, gap, and padding for each one, and choose whether it hugs its content or fills the space around it. Nest these frames inside each other and the whole card stays organized, whatever goes inside.

If you’ve written CSS, this will feel familiar. Auto Layout works a lot like Flexbox, and it’s the same tool product teams use to build screens that work across devices.

📁 Companion file: Open the activity file to follow along with the video below.

🎥 Watch the tutorial and start building in Figma Design.

2. Creating components and instances

Build it once, update it everywhere

In this lesson, you’ll turn an app’s header, footer, and adoption card into components, then use them to build out three app screens. A component is a reusable design element you build once and use anywhere in your file. Change a color or the spacing on the main component, and every copy updates at once.

As an app grows, the same elements show up on screen after screen. Without components, every change means editing each one by hand. Components give you a single source of truth: one main component with linked instances that follow it. You’ll also learn what you can and can’t change inside an instance, and how to pull components from the Assets panel.

It’s the same idea as writing a function once and calling it anywhere in your code. Professional product teams rely on components to keep big projects consistent and easy to maintain.

📁 Companion file: Open the activity file to follow along with the video below.

🎥 Watch the tutorial and start building in Figma Design.

3. Storing values with properties

Give every card the options it needs

In this lesson, you’ll build a dozen dog adoption cards from a single component. Using properties and variants, you’ll make cards for different amounts of information (full, name and text, name only, or photo only) in three image sizes, and switch between them right from the design panel.

Properties store editable values, like a dog’s name or description, so anyone can drop in new content without breaking the layout. Variants group versions of a component together, so switching from a small card to a large one takes one click.

Real apps are built by teams of designers, developers, and writers working in the same file. With properties and variants set up, developers see the same options they’ll write into code, so everyone stays in sync.

📁 Companion file: Open the activity file to follow along with the video below.

🎥 Watch the tutorial and start building in Figma Design.

4. Building an interactive prototype

Tap, swipe, and test your app

In this lesson, you’ll turn Snoot, a dog adoption app, from static screens into a prototype you can tap, swipe, and scroll. You’ll link buttons to new screens, add a swipe to go back, keep headers fixed while scrolling, and connect a home icon on every screen at once using components.

In code, an event like a button tap triggers instructions that load the next screen. In Figma Design, you build that same logic visually by connecting a trigger, an action, and a destination. Then you test the prototype, see what works, and keep improving it.

This lesson brings together everything from the first three. Auto Layout, components, and instances all show up in the finished app.

📁 Companion file: Open the activity file to follow along with the video below.

🎥 Watch the tutorial and start building in Figma Design.