Figma is a popular graphics editor and prototyping tool. Figma variants can streamline your frontend design process by allowing you to group and organize similar components into a single container.

We just published a course on the freeCodeCamp.org YouTube channel that will help you learn how to use Figma variants to design a scalable mobile app.

Ahmet Efeoglu developed this course. Ahmet is a very experienced UX Designer.

At first, you will get an overview of the various Figma tools that you will use to create a scalable mobile app.

The course includes a practice file. Once you are done with the overview, you can access the practice file that includes four exercises that will help you master the Variant functionality better.

Throughout the tutorial the you will see which shortcuts Ahmet uses on the software so you can learn from his workflow.

Here are the sections included in the course:

  • Accessing Tutorial and Homework Files
  • Project Overview
  • Recommending Personal and Freecodecamp Channel
  • Basics Overview
  • Learning The Frame Functionality
  • Learning The Autolayout Functionality
  • Learning The Component Functionality
  • Learning The Variant Functionality
  • Creating The Type System
  • Creating The Color Palette/System
  • Creating The Icon Set
  • Creating Input Variants
  • Creating Large Button Variant
  • Designing Sign Up and Login Screen
  • Creating Status Bar Variant
  • Creating The Filter Variant
  • Creating Bottom Navigation Variant
  • Creating Image Card Variant
  • Updating Input Variant
  • Designing The Discover Screens
  • Creating Large Avatar Variant
  • Creating Small Button Variant
  • Creating The Benefit Card Variant
  • Designing Details Screen

Watch the full course below or on the freeCodeCamp.org YouTube channel (5-hour watch).