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

Ecommerce Empire Academy

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:

🔗 Tutorial file link:
🔗 Homework file link:

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

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

50 thoughts on “Figma Variants – Design a Scalable Mobile App [Full Course]”

    1. Ahmet Efeoglu

      I am glad you enjoyed the video Esther and if you have any questions please feel free to write it here and I will do my best to help you out.

    1. Ahmet Efeoglu

      I am glad you enjoyed it. if you have any questions feel free to reply to this comment and I will do my best to help out 😎

  1. Minhaj Balwan

    Please 🙏 again upload a video on static blog with html css. That video was not enough for me. Also is there any way to add dynamic details page to a static website.

    1. Ahmet Efeoglu

      Hi Minhaj, I am thinking of doing a video series on html/css in the future but not yet. As for your question, I don’t know so far I have never seen it but I might be wrong.

    1. Ahmet Efeoglu

      Thanks man. I hope you enjoyed all videos and if you have any questions feel free to reach out 😎

  2. i swear you guys read my mind, its CRAZY

    I remember trying to use figma and got so overwhelmed and started procrastinating. Couldnt find a good tutorial but this is amazing

    1. Ahmet Efeoglu

      I am so glad the video is helpful to you. If you have any suggestions or questions feel free to reach out to me and I will do my best to help.

  3. ingilizanahtarı

    Yürü be Ahmet. acaba yanlış mı duydum dedim, baktım ki doğru. Burada seni görmek güzel, çalışman için teşekkürler.

    1. Ahmet Efeoglu

      Destegin icin cok sagol! Umarim video hosuna gitmistir. Eger herhangi bir sorun varsa, buraya yazarsan cevaplayabilirim. 😎

  4. Chibueze Kennedy

    I just started learning figma today and you guys uploaded a video about it today 🙂

    1. Ahmet Efeoglu

      Chibueze you got lucky then 😎 Hope you enjoy the video and if you have any questions just comment here and I will do my best to help.

  5. ⌨ (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

  6. Love Figma, had it used in a systems design course for one of my first units in my Bachelors of IT. Will definitely be using it in the future when I decide to rebuild my main site with a backend and frontend and also a mobile app to go along with it.

    1. I am glad the tutorial was helpful to you. If you need help please just ask and I will do my best to answer your questions😎

  7. BARAAGAMER_YT

    Ramadan Kareem, and blessed Friday, and you’re creative keep going✨✨✨✨✨..
    Sender: your brother (Baraa) from Palestine
    🇵🇸🇺🇸

  8. Damn how many social statuses is this now, I remember alpha, beta, sigma and omega but what is a figma male meant to be?

  9. Ahmet Abi öncelikle bu güzel kurs için teşekkür ediyorum. Kanalına abone oldum bende özel bir sirkette 1 yildir çalışıyorum lakin yeni şeyler kisayollar öğrendim. Bu şekilde bir kurs hazirlaman beni çok mutlu etti. Figma yi kullanmanin yaninda html ve css bilmenin ne gibi avantajlari olabilir? Sadece Figma ve sketch kullanmis birisi olarak, html ve css in kariyerime nasıl bir etkisi olabilir? Sizin kariyerinizde bunlarin ne kadar etkisi oldu?

    1. Ahmet kursun isine yaramasi cok guzel, abone olman da beni mutlu etti. Sordugun soru guzel ama guzel oldugu icin cok kolay cevap verilebilecek turde degil 😅 Bu soru hakkinda video hazirliyorum su an cunku soruya cevap vermek icin birden fazla durumu goz onune almak lazim. Mesela, buyuk sirkette calisan bir dizaynirin, kucuk bir sirkette calisana gore daha az ihtiyaci olur cunku buyuk sirkette calisiyorsan cogunlukla dizayn projesinin sadece belli parcalarini yaratiyorsundur.

    2. @Ahmet Efeoglu Gayet açıklayıcı ve net bir cevap oldu benim için. Bu alanda oldukça fazla rekabet var bu sebeple Html ve css öğrenmek büyük bir avantaj olacaktır. Lakin çalıştığım için öğrenme konusundaki hızım düşük olacaktır. Umuyorum YouTube kanalınız daha büyük kitlelere ulaşır. Çok kaliteli içerikleriniz var.

    1. I am glad the course was helpful Leul. please feel free to ask any questions in the comment section and I will do my best to answer them 😎

  10. Thank you Ahmet for the amazing and top notch tutorial. I am very new to Figma and have learned a lot following your well explained step by step instructions to create a scalable mobile design and will certainly apply my knowledge in my mobile app project. I have subscribed to your channel and look forward to next amazing tutorials. Best wishes to you and have a great week ahead.

    1. Hey Leon thanks for the kind words and I am glad the tutorial was helpful to you. If you have any questions please feel free to comment on this video or if you have a question regarding a tutorial on my channel ask it there and I will do my best to answer it. Have a great weekend 😎

  11. Jesca Ochieng

    I have just finished my ux disign and working on my organization while designing and this tutorial has helped me a great deal.

    1. Ahmet Efeoglu

      Hi Jesca, I am glad , the tutorial has helped you a lot. If you have any questions feel free to post here and I will answer them as well. 😎

    2. MustSeeHeaven

      Hi Jesca, Im happy you learnt UX Design. It’s a wonderful experience to feel things. Can you share your course outlines or tutorials from where you learn UX Design ?
      It will be really helpful for me.

Comments are closed.