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

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 ❤️ Try interactive Frontend courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Frontend (Made possible by a grant from our friends at Scrimba) ⌨️ (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