Prototyping with Figma
Transform low-fidelity wireframes into high-fidelity, interactive prototypes using Figma.
Start
Key Concepts
Review core concepts you need to learn to master this subject
Figma Editor
Figma Editor
In Figma, the editor is the workspace where projects are created, edited, shared, and reviewed. The editor consists of four main components: toolbar, layers panel, properties panel, and canvas.
Prototyping with Figma
Lesson 1 of 1
- 1In this lesson, you will take a guided tour of Figma. Beware that this is not the type of tour where you will simply sit back and enjoy the ride! At each stop along our route, you’ll put your new F…
- 2Now that you have your free Figma account set up, our tour is officially up and running! Opening Figma brings us to the dashboard. This is where we create new files and access files we have a…
- 4You’re only halfway through the Figma tour, and you’ve already designed low-fidelity wireframes. Groovy! Before making our designs higher fidelity, we need to make an important stop: the layers pan…
- 5In your design file, you have a few low-fidelity wireframes and an organized layers panel. While this is great progress, the design looks a little…plain. Fortunately, our next stop is the propertie…
- 6The last stop on our tour is the grand finale: Prototype mode. Your wireframes look polished, but they are static — it’s time to bring them to life! So far in this lesson, we have been ex…
- 7While we’ve reached the end of our Figma tour, we hope you feel inspired to continue learning and practicing. We investigated some foundational Figma features together, and there’s much more to dis…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory