Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Skillshare

Creating Interactive Prototypes with Figma

via Skillshare

Overview

You will learn how to create interactive prototypes for your designs using one of the most powerful free design tools, called Figma.

What's Figma? Figma is a leading design software, helping teams and individuals create designs faster and more efficiently. Figma is free and you can use it right on your web browser, on Mac and Windows.

What sort of prototype will we create? In this course, we'll use Figma to create an interactive and realistic prototype for a mobile app of a laundry delivery service. As we go through creating the prototype for the 7-Page Mobile Mockup, we'll go over some of the most useful Prototyping tools that Figma gives you:

  • Using the presentation mode to present a prototype
  • Create connections between frames to add a user flow
  • Adding the ability to scroll in prototypes
  • Using the Figma Mirror App to present our prototype
  • Using Overlays to show pop-up type designs
  • Adding advanced animations and smooth transitions with smart animate
  • Playing GIFs and creating button animations

As a Bonus, we'll also be learning how to export, share our prototypes, and collaborate with team members within Figma.

Is this course for you?

You're in the right place if any of these apply to you:

  • You’re interested in user interface & user experience design (UI/UX) but not sure where to start.

  • You’re an entrepreneur with a design mockup that you want to turn into an interactive prototype.

  • You want to brush up your design skills to get the job that you want at companies like Airbnb, Google, Apple, etc.

  • You’re already designing and want to jump into Figma and take your designs to the next level.

  • You’re interested in earning income as a freelance designer.

  • You simply want to enter a new career path, and graphic design and prototyping have interested you.

Want to learn how to create a Mobile UI like the one we'll be creating a prototype for?

Check out the Mobile UI/UX course if you'd like to learn how to create a full mobile mockup (optional):

About your instructor:

This course is taught by entrepreneur & designer Nima Tahami. Nima has more than 10 years of experience designing and developing dozens of mobile & web apps for both clients and startups of his own. Nima's current startup, ShiftRide, has been covered in many news outlets, including Forbes, where his app was highlighted for its ease of use.

Nima has created this course to help people become the best designer they can be. Design is part of the foundation of many things from great products & websites to great advertisements and everything in between. Nima has also designed and developed an open-source iPhone development library by the name of FCAlertView, helping 350,000+ app developers use beautiful customizable alert prompts within their applications.

Syllabus

  • Introduction
  • Importing the Mobile UI
  • Creating Prototypes
  • Adding Connections between Frames
  • Scrolling in Prototypes
  • Testing on a Real Device
  • Sharing Our Files
  • Working with Teams
  • Using Overlays for Tutorial
  • Openning Links
  • Adding Animations
  • Page Transitions
  • Interactive Maps
  • Playing GIFs
  • Smart Animate
  • Button Hover Animations
  • Interactive Components
  • Interactive Components Exercise Solution
  • Creating New Prototype Flows
  • Exporting Our Designs
  • Code Handoff
  • What's Next?

Taught by

Nima Tahami

Reviews

Start your review of Creating Interactive Prototypes with Figma

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.