WEB DESIGN IN FIGMA ep.07: Interactive FAQs Section with ACCORDIONS - Free UX / UI Course

Поделиться
HTML-код
  • Опубликовано: 2 фев 2023
  • Visit my STORE: bit.ly/mavi-design-store
    Explore Mavi Design COURSES : bit.ly/mavi-design-courses
    Download FIGMA for FREE: bit.ly/get-started-with-figma
    Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
    FREE FIGMA COURSE / SERIES: Design a Website in Figma: • FREE Figma Web Design ...
    In the seventh episode of “Designing a Website in Figma”, we’re going to create a FAQ (Frequently asked questions) Website section with interactive, animated accordion components. The FAQs section is very frequent in website design as it adresses the most frequent concerns of your users, which helps increase trust, clarity and ultimately conversions of your website. We will be using components, component properties, instances and autolayout to create this website prototype in Figma.
    How to design an interactive FAQ / frequently asked questions section with interactive animated ACCORDION components in figma - design a website from scratch in figma - step-by-step explanation tutorial with examples - FREE full UX / UI design course
    --------
    © 2023 Mavi Design
  • ХоббиХобби

Комментарии • 48

  • @micasamso8883
    @micasamso8883 Год назад

    Thank you so much! I've been looking for a video to do this for a long time and it's the first one that really works for me! Congratulations for your work and excellent explanation.

  • @abduladeshina4066
    @abduladeshina4066 6 месяцев назад +3

    After spending over 1hr trying to implement this step by step, it came out looking great, thank you so much for this🔥

  • @alfredosmith6107
    @alfredosmith6107 Год назад +1

    After 5 videos, this is the proper tutorial for accordions! Great job 👍🏾 🚇🔔

  • @dariocastillo3595
    @dariocastillo3595 8 месяцев назад

    Great Job!
    by far, ur tutorials are amazing and easy to understand!

  • @nouramroueh7064
    @nouramroueh7064 Год назад

    Perfectly explained. Thank you for making this!

  • @plan-plant-play
    @plan-plant-play Год назад

    thanks a lot for your work! lesson is on a very good level!

  • @user-yc5vu5ee4g
    @user-yc5vu5ee4g Год назад

    Great tutorial. Thank you so much!

  • @jesuscorderomusic
    @jesuscorderomusic 10 месяцев назад +2

    Great tutorial, but i have an issue: I’m having difficulties with the interaction. When clicking a button or a text field the next screen with the interaction brings it to the top of the page. I want to stay in place after a click/interaction has been done.

  • @purevbayar
    @purevbayar Год назад

    Thank you Mavi. It was so clearity tutorial. Good luck.

  • @user-le3vl8ic4l
    @user-le3vl8ic4l 10 месяцев назад

    Thanks for making this. Great!

  • @kevinajenodi2602
    @kevinajenodi2602 9 месяцев назад

    This is great. Thank you!

  • @noorahmedpirwani9683
    @noorahmedpirwani9683 9 месяцев назад

    Thank you I am following the series and learn a lot till now. I just have one question at that stage that why we make so much frames on frames using auto layout. what happen if we do not use them?

  • @user-ce1zw3st9l
    @user-ce1zw3st9l Год назад

    Amazing work! It took half an hour to understand it.

  • @svedesign
    @svedesign 11 месяцев назад

    Thanks! You helped me a lot 😍

  • @Santanna.leandro
    @Santanna.leandro 6 месяцев назад

    What an amazing class! tks!

  • @nawafalkaltham6921
    @nawafalkaltham6921 Месяц назад

    amazing video thanks man

  • @annak7905
    @annak7905 3 месяца назад

    Thank you!

  • @olgaivashenko8580
    @olgaivashenko8580 Год назад +10

    Hello! thank you for this tutorial. I have done it on my project but have one issue: when I open one or several faqs and leave them open and scroll down to footer (in prototype) - the following sections get overwritten, they do not move down. How can I solve it?

  • @SKYLAR10SIGN
    @SKYLAR10SIGN 7 месяцев назад

    good job bro!!!! you save my life lol

  • @caioquintes825
    @caioquintes825 6 месяцев назад

    Thank u so much!!!

  • @behnazshayan7318
    @behnazshayan7318 Год назад

    thanks a lot!

  • @realIKON
    @realIKON Год назад

    BRAVO ! MERCI !

  • @tessakoeller8120
    @tessakoeller8120 2 месяца назад

    Do you have to leave a bunch of blank space below the menu so they have room to open? Is there any way to not have to have all that room?

  • @Fusion-Floww
    @Fusion-Floww Год назад

    You are just awesome

  • @vamboo8918
    @vamboo8918 28 дней назад

    thanks

  • @Dhruwa_Sharma
    @Dhruwa_Sharma 6 месяцев назад

    Brother.. It's completely disrupting my Accordion when I am adding strokes ? Can I Know Why?

  • @tusharnandre2067
    @tusharnandre2067 6 месяцев назад +1

    when you open another Q the previous one should close on its own ( I mean it shouldn't be two clicks only one click to open the one you want and close the previous one)
    please can you make a tutorial on that

    • @felipev5409
      @felipev5409 6 месяцев назад

      x2!!

    • @natalii8366
      @natalii8366 3 месяца назад

      have you found a tutorial on that?

  • @MDITSWORK
    @MDITSWORK 5 дней назад

    I get the asset horizontally what we will do we want vertical

  • @nicohaitas6608
    @nicohaitas6608 Год назад +1

    Hi great tutorial!
    is there a way to have only one Accordion Item open at a time?
    Effectively by clicking on any other Accordion Item the previous one closes

    • @natalii8366
      @natalii8366 3 месяца назад

      do you have the answer how to do that?

  • @knowyourworld9605
    @knowyourworld9605 7 дней назад

    I can't find The fill container feature

  • @j33t78
    @j33t78 Год назад

    🔥

  • @UsmanYousafOfficial
    @UsmanYousafOfficial 9 месяцев назад +1

    In case if there is a footer below the accordian, and on opening an accordian section we want that footer to be dragged below and the overall height of tthe page also expands, how would we achieve that ? keeping in mind that the footer does not crops out of the page upon opening the accordian section ...??

    • @luisjoseherrera408
      @luisjoseherrera408 8 месяцев назад

      Hey im have the same question, have you found the way to do it?

    • @UsmanYousafOfficial
      @UsmanYousafOfficial 8 месяцев назад

      @@luisjoseherrera408 not yet ... I left it there unresolved but I had a guess, that may be if we add FAQs and footer into one single Section then it might be possible but I havent tried yet ...

    • @luisjoseherrera408
      @luisjoseherrera408 8 месяцев назад +1

      @@UsmanYousafOfficial i'm currently watching the global auto layout episode, I'll let you know if it works

    • @UsmanYousafOfficial
      @UsmanYousafOfficial 8 месяцев назад

      @@luisjoseherrera408 I doubt it.. but at the same time I think thats the only solution... but I wonder, why we feel the need to turn whole artboard into autolayout.... (basically I come from Adobe Xd background thats why I find some workflows in figma wired)

    • @luisjoseherrera408
      @luisjoseherrera408 8 месяцев назад

      @@UsmanYousafOfficial is there a way to do it on adobe xd? I did it already like I told you but a bug keeps happening, I'll keep you posted if I solve it

  • @leticiamgr
    @leticiamgr 7 месяцев назад

    It looks so easy, but i'ts not. hahaha I need to practice and practice...

    • @leticiamgr
      @leticiamgr 7 месяцев назад

      I got it!! Thank you very much. Regards from Brazil. :)

  • @disoin.studio
    @disoin.studio 8 месяцев назад

    the best!!!