YoVDO

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

Offered By: freeCodeCamp

Tags

Figma Courses Icon Design Courses Type System Courses Color Palettes Courses

Course Description

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.


Taught by

freeCodeCamp.org

Related Courses

Прототипирование и тестирование интерфейса
Moscow Institute of Physics and Technology via Coursera
Build an E-commerce Dashboard with Figma
Coursera Project Network via Coursera
Car Transport App in Figma
Coursera Project Network via Coursera
Design and Develop a Website using Figma and CSS
Coursera Project Network via Coursera
Learn Figma for Web Design, User Interface, UI UX in an hour
Udemy