Design a Scalable Mobile App With Figma Variants

By freeCodeCamp.org
Published: Apr 07, 2022

“
Learn how to use Figma Variants to design a scalable mobile app. Variants can streamline your frontend design process by allowing you to group and organize similar components into a single container.

Ahmet Efeoglu developed this course. Check out his channel: https://www.youtube.com/channel…

Tutorial file link: https://www.figma.com/file/FrLR3t9jZ9…
Homework file link: https://www.figma.com/file/8js2feuv6L…M

CONTENTS:
• (0:00:18) Intro
• (0:02:13) Accessing Tutorial and Homework Files
• (0:04:24) Project Overview
• (0:05:27) Recommending Personal and freeCodeCamp Channel
• (0:06:25) Basics Overview
• (0:08:22) Learning The Frame Functionality
• (0:10:25) Learning The Autolayout Functionality
• (0:14:39) Learning The Component Functionality
• (0:18:55) Learning The Variant Functionality
• (0:21:42) Creating The Type System
• (0:28:41) Creating The Color Palette/System
• (0:35:54) Creating The Icon Set
• (0:41:34) Creating Input Variants
• (0:52:23) Creating Large Button Variant
• (1:00:47) Designing Sign Up and Login Screen
• (1:18:46) Creating Status Bar Variant
• (1:23:14) Creating The Filter Variant
• (1:27:40) Creating Bottom Navigation Variant
• (1:35:02) Creating Image Card Variant
• (1:49:27) Updating Input Variant
• (1:57:31) Designing The Discover Screens
• (2:15:20) Creating Large Avatar Variant
• (2:24:05) Creating Small Button Variant
• (2:32:45) Creating The Benefit Card Variant
• (2:46:45) Designing Details Screen

---

Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news

[READ MORE]

”