Prototyping with Figma Course (How To)

In this course, you'll learn how to build interactive and sharable prototypes in Figma, a web-based visual prototyping tool. You'll create a prototype for a "prosumer" mobile photography app, and by the end, you'll have a better understanding of how to create interactive prototypes that can be shared with project stakeholders and team members.

What you'll learn

• Prototyping
• Figma
• Project collaboration

Introducing Figma

Figma is a visual prototyping tool that can be used to create mockups for software interfaces and interaction flows between screens. Before diving into advanced features, it's important to learn about the basic interface elements and concepts.

Chevron 5 steps

• Why Prototype in Figma?

  2:51

• Project Setup

  6:56

• Navigating the Canvas

  6:39

• Arranging Design Elements

  9:49

• Introducing Figma

  5 questions

Prototyping Designs in Figma

With images and resources in place, we'll build an interface using components and shapes.

Chevron 5 steps

• Reusing Designs with Components

  5:02

• Drawing with Shapes

  5:20

• Drawing Curved Lines

  7:13

• Finishing the Interface

  4:59

• Prototyping Designs in Figma

  5 questions

Interactive Prototypes in Figma

Once you've created a prototype in Figma, you'll want to share it with others. There are several ways to do this. In addition, prototypes can be interactive to demonstrate the flow between different screens.

Chevron 3 steps

• Adding Interactivity to Prototypes

  5:37

• Sharing Designs

  7:34

• Interactive Prototypes in Figma

  5 questions