How to Create 3D Card Flip Animation using 3D Transforms in Adobe XD

Поділитися
Вставка
  • Опубліковано 7 січ 2025

КОМЕНТАРІ • 23

  • @DesignXstream
    @DesignXstream  4 роки тому +1

    Update: I just realized we can do this with just 2 artboards which dint strike my mind at that point! 😅
    But if you would like to see how to do it Howard Pinksy just made a video on it Link here: ua-cam.com/video/Newb-VEHB2E/v-deo.html

  • @Scriptank
    @Scriptank 3 роки тому +4

    Without a doubt, this has been the best Adobe XD Card Flip tutorial I've seen.

  • @esterification_art1282
    @esterification_art1282 3 роки тому +1

    Your work really inspire me a lot. Love it.

    • @DesignXstream
      @DesignXstream  3 роки тому +1

      That means a lot! Glad you liked it! :)

  • @ruhroah5044
    @ruhroah5044 3 роки тому +1

    love the series...really fun.

  • @Kaidesu97
    @Kaidesu97 2 роки тому +1

    Hey great tutorial! Does anyone know why i cant change the duration time of the animation? i can only choose between 0,2-1s. Any solution for that?

    • @DesignXstream
      @DesignXstream  2 роки тому

      The selection is only from 0.2 to 1s but you can enter values upto 5 secs!

  • @shalinmgiri
    @shalinmgiri 4 роки тому +1

    wow.....great work bro.....

    • @DesignXstream
      @DesignXstream  4 роки тому

      Thanks mate! Stay tuned for more videos :)

  • @g0151
    @g0151 3 роки тому

    there is a problem when i rotate the image it goes out of artboard , how can I fix that

    • @DesignXstream
      @DesignXstream  3 роки тому

      That could be becoz of the z-value. If z-value is -ve it goes being the artboard and hence cannot be seen.
      I've provided the sample file of this in the description try that and see.

  • @fabricefrere
    @fabricefrere 3 роки тому +1

    Awesome demo! Question: Is there a way to create this with just one component that lives on 1 artboard?

    • @DesignXstream
      @DesignXstream  3 роки тому

      Hi Fabrice, There is states feature in Adobe Xd but I dont think it will work on 3D transform. But you can check this video by Pinsky he has simplified it a bit more: ua-cam.com/video/Newb-VEHB2E/v-deo.html

    • @fabricefrere
      @fabricefrere 3 роки тому +1

      @@DesignXstream Thanks for the quick reply! Yes, I saw that Pinsky video previously (awesome stuff), but his version (like yours) only works by jumping between 2 artboards.Would love for this feature to work within a component. Maybe it will get implemented soon. Thanks again man!

    • @DesignXstream
      @DesignXstream  3 роки тому

      @@fabricefrere Yes! Figma already has this feature to do interactions within single artboard.. so it might soon come up on Adobe Xd as well.

    • @learnanddesignwithslim1513
      @learnanddesignwithslim1513 3 роки тому

      @@DesignXstream please can you do a tutorial on the figma own

    • @DesignXstream
      @DesignXstream  3 роки тому

      @@learnanddesignwithslim1513 Figma doesn't support 3D transform yet.. but there is a way to fake this similar effect. that is by scaling and contracting it. This wouldn't give the same exact effect but it wuld be little similar.

  • @MeirRosenscheinQ
    @MeirRosenscheinQ 3 роки тому

    Really awesome video. Is there a way for me to save the whole thing as a GIF?

    • @DesignXstream
      @DesignXstream  3 роки тому +1

      Xd allows you to record video. So you first can record a video and then easily convert that into a GIF with Free online convertors!

  • @kickzmadeofficial6012
    @kickzmadeofficial6012 3 роки тому +1

    please more videos bro

    • @DesignXstream
      @DesignXstream  3 роки тому

      Sure! Will be adding more videos on Figma animation ✌🏼