Adobe Xd Tutorial - Slider / Carousel with navigation using Component States

Поделиться
HTML-код
  • Опубликовано: 10 янв 2025

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

  • @alessandrogibogini3526
    @alessandrogibogini3526 2 года назад +40

    Finally someone that create a gallery without copying an artboard a thousand times. Thanks!!

  • @info3215
    @info3215 2 года назад +11

    sooo much better than duplicated your ENTIRE artboard just to make a simple carousel...thanks

  • @VanessaLopez-cg4hr
    @VanessaLopez-cg4hr Год назад

    I made it! Thank you so much I love youuu T_________T OMG I had been struggling with the slider, all the tutorials keep making thousands of artboards.

  • @hristogrozev2899
    @hristogrozev2899 2 года назад

    This is the best free software Ive seen. Respect.

  • @siarhei-korbut
    @siarhei-korbut Год назад +1

    "Finally someone that create a gallery without copying an artboard a thousand times. Thanks!!"
    I'll just duplicate it here

  • @aleksandrapopovic1216
    @aleksandrapopovic1216 2 года назад

    I basically know everytNice tutorialng there is to know about soft soft but I still watched tNice tutorials through just because of how good you explained

  • @Ashvinv885
    @Ashvinv885 Год назад +2

    Thanks to your video, I can do better for my practical assignment 👍

  • @plitzcorporation5589
    @plitzcorporation5589 2 года назад

    Niiice, I was using an old technique, when XD didn't have all this fancy tools, thanks a lot!

  • @ahsyaclarazahira5804
    @ahsyaclarazahira5804 10 месяцев назад +1

    Thank you so much for the tutorial, simple but very helpful!

  • @joshuasampson2092
    @joshuasampson2092 3 года назад +1

    Thanks so much Man, you really saved me. I spent over 8 hours looking for something like this.

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

    Thanks, man! I am a beginner and wanted to lear this, thanks a ton!

  • @danielstratiev3619
    @danielstratiev3619 2 года назад +2

    Explained in great detail! Thank you so much!!

  • @SteveHammondPlus
    @SteveHammondPlus 3 года назад +2

    Thanks for the video! I’ve been wondering how to do this for a while now!

    • @spas.k
      @spas.k  3 года назад

      Glad I helped :)

  • @annamcauley7963
    @annamcauley7963 2 года назад

    Thanks a lot !!!!!!! Finally, I found some easily explained guides.

  • @SIGASIGAmedia
    @SIGASIGAmedia 3 года назад +4

    Merci beaucoup pour cette démonstration ! C'est clair, net et précis.👌

  • @rachidouassini7696
    @rachidouassini7696 2 года назад +2

    This is just simple and greaaat, love it!! thank you so much

  • @kantuevavaleriya6136
    @kantuevavaleriya6136 3 года назад +5

    Such a helpful and detailed video! Thank you so much!!

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

    Thank you Spas! This is really helpful.

  • @colentina27
    @colentina27 2 года назад

    Take a week just learning the basics and you will be good, I been using soft soft since it was Fruity Loops back in 03, and still learn

  • @vjPulp
    @vjPulp 2 года назад +5

    Thanks for this tutorial. I had a short struggle with the left and right arrows - the animation (slider moves to slide 2 or 3) does not work if the arrows are components, i.e. with a hover-status to change the arrow color. Once I had figured that out, everything worked flawlessly!

    • @spas.k
      @spas.k  2 года назад +4

      Hey there, you can keep them as components, but you have to put each component into a group, and then you can add interactions to the group instead. If you try to add the interaction to a component, it only shows that component's states and not the parent's. :)

    • @vjPulp
      @vjPulp 2 года назад +1

      @@spas.k Thanks! Easy as that, but you have to know the trick ;-)

  • @rachnarao
    @rachnarao 2 года назад +2

    This is so easy! Thank you so much for the tutorial :D

  • @andresdis
    @andresdis 2 года назад

    Thank you! Straight to the point :)

  • @lidijadjeric6808
    @lidijadjeric6808 2 года назад

    works, keep up the good work man

  • @abrillangner3398
    @abrillangner3398 2 года назад +3

    Thanks! Great tutorial... one quick question, can you add a scroll action to this excercise?

  • @jefreinvideomarketing
    @jefreinvideomarketing 2 года назад

    Awesome, buddy!! Keep it up!

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

    very good tutorial ! thanks

  • @esther_nyamekye
    @esther_nyamekye 3 года назад

    This is so helpful. Thanks for sharing.

  • @enesaltun4830
    @enesaltun4830 2 года назад

    yo bro, really thankya. Big respect

  • @cq2355
    @cq2355 2 года назад

    Thanks so much for this tutorial!!

  • @eramnejadgashti7656
    @eramnejadgashti7656 2 года назад +2

    Thanks for this tutorial. I have an issue. When I want to add the action, under DESTINATION it only gives me the option to choose other layers. I can't see different slide states under DESTINATION. Does anyone know what I'm doing wrong?

    • @spas.k
      @spas.k  2 года назад +2

      If you're trying to add the action to a nested component, it will only show its own states. You can put the component inside a group on its own, and add the action to the group instead.
      If you're still having trouble, head to the Adobe Xd community forums and make a thread with some screenshots, and me or someone else can help you out with setting it up :)

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

    Thanks!!!!! best video!!!

  • @yiyang1906
    @yiyang1906 2 года назад

    Thanks for the video! It's really helpful. I got a question about I use videos instead of images. The slide show is working but the videos couldn't be able to play. can you please let me know how to fix it? Many thanks!

  • @jelenamitic1665
    @jelenamitic1665 2 года назад

    This is great, thank you!

  • @ruelburaga6902
    @ruelburaga6902 2 года назад

    Thank You! Mr. Spas!

  • @ranginio
    @ranginio 2 года назад

    Still working as of today, ty!

  • @dudabraga8265
    @dudabraga8265 2 года назад

    Thanks for this tutorial!!

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

    How do you make a slider with preview, and loops back to the first image?

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

    Can you please share what music that is? Its freakin awesome!

  • @Low2234
    @Low2234 2 года назад

    Thank you for the video ! Any Idea on how I could reduce the loading time of that thing? :)

  • @mfnuggy
    @mfnuggy 3 года назад +2

    I’m making for mobile is there a way to make this scrollable across like someone would with their finger, like drag to slide?

    • @spas.k
      @spas.k  3 года назад +2

      Unfortunately, the Drag interaction can currently only switch to a different artboard, and not to a different component state. You can use a horizontal scroll group instead of the mask, without using states, but the slides won't 'snap' in view, and the navigation bars won't switch. It will just be a free horizontal scroll.

    • @andrezunini6488
      @andrezunini6488 3 года назад

      @@spas.k F

  • @bakhtiyarbalabayli582
    @bakhtiyarbalabayli582 2 года назад

    Thanks for this tutorial.

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

    you are the best!!

  • @SS-ec6bd
    @SS-ec6bd Год назад

    Do you know why mine is not sliding but just appearing? I didn’t do anything different hut there mist be some mistake

  • @satiready
    @satiready 3 года назад +1

    I Did this exactly. But it becomes difficult when you have to edit something. Can you give a way where you can edit multiple components at once in this kind of state based slider?

    • @spas.k
      @spas.k  3 года назад

      Depends on what you will be changing. You can make a component for each slide on a separate artboard and use copies/instances of them inside the slider. This way you can edit text or layout outside, without having to go in and change a slide in every state. However, you should aim to do as few edits as possible, as nested components sometimes misbehave and are notoriously easy to break in Xd. Try to finish the content first, and then assemble the slider component.

  • @maitedenis-saurel5567
    @maitedenis-saurel5567 3 года назад +1

    Awesome ! Thanks :)

  • @Callmejxsmine
    @Callmejxsmine 4 дня назад

    Thanks fam 🙏🏻🙏🏻

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

    I think you forgot to mention that the images will have to stain sequence, I accidentally mess up the order and the animation wouldn't work. Eventually I figured out though!

  • @matthewm9529
    @matthewm9529 3 года назад

    Hi am I confused after creating a website with adobe xd how do I transfer that to a domain and make the website live? Is there plug in or somewhere I upload the file to shopify/word press to? Thanks so much!

    • @spas.k
      @spas.k  3 года назад +1

      Hey there. Adobe Xd doesn't make functional websites, but only designs and prototypes. Think of it as the blueprints for a house. Now you have to build the actual house :)
      There are some plugins for Xd that can export partially working html/css files, but the result is poor in most cases.
      You will have to code the website from scratch using HTML, CSS and Javascript. You can also use one of the many available website builders like Wix, Squarespace or Webflow (more advanced), to recreate your design. Another popular option these days is Wordpress, which can be customized with plugins & templates, without that much coding.
      The platform you use depends on what functionality your website needs. Some have more built in features than others.
      Sorry that it's not as simple as just exporting the website from Adobe Xd :) If you want to have a good quality website, you'll have to do it the hard way through coding or hire a developer to do it for you.

  • @alexsto65
    @alexsto65 2 года назад

    2 years passed damn

  • @БанкоМиланов
    @БанкоМиланов 2 года назад

    bro i am not getting any tracks into my soft how is that possible

  • @maheshtavande9097
    @maheshtavande9097 2 года назад

    Nice 👌

  • @__toddoroww__8768
    @__toddoroww__8768 2 года назад

    how do you get all the tutorial and samples on the left. mine doesnt have sNice tutorialt

    • @spas.k
      @spas.k  2 года назад

      Hey there, sorry about that. I made this as a quick guide on how to put everything together and not sure I kept the file after that. People usually have their own designs and struggle with wiring and configuring the prototype with component states. I didn't think it will be important to show how I made everything from scratch as it's rather simple. It's always good exercise to make the elements yourself though :)

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

    Благодаря ти пич

  • @uimonk
    @uimonk 2 года назад

    awesome content, which nobody covered... but no voice.. its really disappointing!!

  • @lidijadjeric6808
    @lidijadjeric6808 2 года назад

    Thank you!

  • @olajideadewumi5062
    @olajideadewumi5062 2 года назад

    Thanks for this

  • @tolgashakirov3123
    @tolgashakirov3123 2 года назад

    wow... im 10 months late and still in quarantine

  • @wsartsgrafica1931
    @wsartsgrafica1931 2 года назад

    man u god really

  • @miglenaivanova4026
    @miglenaivanova4026 2 года назад

    you! SO MUCH THX!

  • @marianapimentel7622
    @marianapimentel7622 3 года назад +1

    Gracias!

  • @avetinio
    @avetinio 2 года назад

    thank you bro thank you

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

    Life saver

  • @dineshgopal1507
    @dineshgopal1507 2 года назад

    thank you so much #Spas

  • @reefoo2070
    @reefoo2070 2 года назад

    ياشيييخ شكرررررررررررررررراااا

  • @rubendelcio7258
    @rubendelcio7258 2 года назад

    Obrigado💖

  • @tetianaprykhodko9369
    @tetianaprykhodko9369 3 года назад

    Thanks!

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

    Spas I which you did more XD stuff

  • @hamzahassan3889
    @hamzahassan3889 2 года назад

    ThankYou

  • @Fararjeh01
    @Fararjeh01 2 года назад

    good

  • @kanitthakobkitkhachonchai3497
    @kanitthakobkitkhachonchai3497 2 года назад

    make fire as soft

  • @abdulbasit0123
    @abdulbasit0123 2 года назад

    Thanks bro🤍

  • @bethsent
    @bethsent 10 месяцев назад

    Thank youuu!!