Key Concepts

Review core concepts you need to learn to master this subject

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
  1. 1
    In 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…
  2. 2
    Now 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…
  3. 3
    Your design file won’t be empty much longer! At this stop on our tour, you’ll discover how to use tools from the toolbar to create low-fidelity wireframes. While there’s no one right way to design…
  4. 4
    You’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…
  5. 5
    In 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…
  6. 6
    The 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…
  7. 7
    While 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

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo