[#Script #Coding] Design a Scalable Mobile App With Figma Variants

Spread the love

Design a Scalable Mobile App With Figma Variants

By freeCodeCamp.org
Published: Apr 07, 2022

freeCodeCamp.org 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


  • (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

Spread the love
Proudly powered by WordPress
Creative Commons License
EricBrooks.Com® is licensed under a Creative Commons License.

Disclaimer: The views expressed herein are solely those of Eric Brooks. They do not necessarily reflect those of his employers, friends, contacts, family, or even his pets (though my cat, Puddy, seems to agree with me on many key issues.). In accordance to my terms of use, you hereby acknowledge my right to psychoanalyze you, practice accupuncture, and mock you incessantly with every visit. As the user, you also acknowledge that the author has been legally declared a "Problem Adult" by the Commonwealth of Pennsylvania, and is therefore not responsible for any of his actions. ALSO, the political views and products advertised on this site may/may not reflect the views of Puddy or myself, so please don't take them as an endorsement. We just need to eat.