Figma Variants – Design a Scalable Mobile App [Full Course]

Overview

Embark on a comprehensive 4-5 hour course that teaches how to design a scalable mobile app using Figma Variants. Master the art of streamlining your frontend design process by grouping and organizing similar components into a single container. Dive deep into Figma's powerful features, including frames, autolayout, components, and variants. Develop essential design skills by creating a type system, color palette, and icon set. Apply these skills to design practical elements such as input fields, buttons, status bars, and navigation components. Progress through the course by designing real-world screens including sign-up, login, discover, and details pages. Gain hands-on experience with provided tutorial and homework files, allowing you to practice and reinforce your learning. By the end of this course, developed by Ahmet Efeoglu, you'll have the skills to create scalable and efficient mobile app designs using Figma Variants.

Syllabus

) Intro.
) 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.