Chapters (25)
- 0:18Intro
- 2:13Accessing Tutorial and Homework Files
- 4:24Project Overview
- 5:27Recommending Personal and freeCodeCamp Channel
- 6:25Basics Overview
- 8:22Learning The Frame Functionality
- 10:25Learning The Autolayout Functionality
- 14:39Learning The Component Functionality
- 18:55Learning The Variant Functionality
- 21:42Creating The Type System
- 28:41Creating The Color Palette/System
- 35:54Creating The Icon Set
- 41:34Creating Input Variants
- 52:23Creating Large Button Variant
- 1:00:47Designing Sign Up and Login Screen
- 1:18:46Creating Status Bar Variant
- 1:23:14Creating The Filter Variant
- 1:27:40Creating Bottom Navigation Variant
- 1:35:02Creating Image Card Variant
- 1:49:27Updating Input Variant
- 1:57:31Designing The Discover Screens
- 2:15:20Creating Large Avatar Variant
- 2:24:05Creating Small Button Variant
- 2:32:45Creating The Benefit Card Variant
- 2:46:45Designing Details Screen
Show the creator's full description
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
Read hundreds of articles on programming: https://freecodecamp.org/news
Description and video by freeCodeCamp.org. This page is an independent companion view; the video is embedded from YouTube.