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

Channel:
United States freeCodeCamp.org
Subscribers:
10,700,000
Published on ● Video Link: https://www.youtube.com/watch?v=stQ1IZEB2xk


Duration: 4:59:09
79,810 views
2,365

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/UCSziSLMFFNT4PaRQhEwANzg

🔗 Tutorial file link: https://www.figma.com/file/FrLR3t9jZ9X8psPdmztdlh/Activista-Tutorial-Initial-Screens?node-id=0%3A1
🔗 Homework file link: https://www.figma.com/file/8js2feuv6LdhmvVtBXkC2L/Figma-Activista-Tutorial-Homework?node-id=0%3A1

⌨️ (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

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news



Other Videos By freeCodeCamp.org


2022-05-04React Router 6 – Tutorial for Beginners
2022-05-02Google Cloud Associate Cloud Engineer Course - Pass the Exam!
2022-04-28Blazor WebAssembly & Web API on .NET 6 – Full Course (C#)
2022-04-27Assembly Language Programming with ARM – Full Tutorial for Beginners
2022-04-25Python + PyTorch + Pygame Reinforcement Learning – Train an AI to Play Snake
2022-04-20Redux Toolkit Tutorial – JavaScript State Management Library
2022-04-18Python Game Development Project Using OOP – Minesweeper Tutorial (w/ Tkinter)
2022-04-13Low-Code for Freelance Developers & Startups – Tutorial
2022-04-11Learn Terraform (and AWS) by Building a Dev Environment – Full Course for Beginners
2022-04-08Let's Play Break The Code 2 – Code Cracking Game for Developers with Tom and Shaun
2022-04-07Figma Variants – Design a Scalable Mobile App [Full Course]
2022-04-04Full Gitpod Course – ExamPro Cloud Developer Environment Certification
2022-03-31Firebase – Full Course for Beginners
2022-03-30Augmented Reality for Everyone - Full Course
2022-03-29React Project Tutorial – Build a Portfolio Website w/ Advanced Animations
2022-03-24Microservices with FastAPI – Full Course
2022-03-23Taxes for Freelance Developers – Full Course
2022-03-22Learn Go Programming by Building 11 Projects – Full Course
2022-03-21Visual Studio Code Extensions to Improve Your Productivity
2022-03-17Portfolio Website Tutorial – Frontend Development with HTML, CSS, JavaScript
2022-03-16WebGPU Tutorial - Advanced Graphics on the Web Course