Create Animated Mesh Gradients in Figma (Tutorial + Files)

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

КОМЕНТАРІ • 61

  • @Study_Serenade
    @Study_Serenade Рік тому +3

    keep giving best practices exist in the industry!!! love to see more

    • @uiadrian
      @uiadrian  Рік тому

      Thanks Sudip, more is coming soon :)

  • @terasexperience
    @terasexperience Рік тому +5

    hello Mr. Adrian, thank you very much for this content, it really helps me in learning UI/UX Design. continue, good luck always, greetings from me, an Indonesian citizen👋

    • @uiadrian
      @uiadrian  Рік тому

      Hey Arief! Thank you, all the best, my friend 👋

  • @oscarmattisson2495
    @oscarmattisson2495 Рік тому +1

    Wow this is beautiful Adrian!

  • @aashishchapagain
    @aashishchapagain Рік тому +1

    This is amazing Adrian, Thanks for sharing. And welcome to youtube journey. :)

  • @olaitankolawole5483
    @olaitankolawole5483 Рік тому +1

    This is beautiful Adrian....Many thanks.

    • @uiadrian
      @uiadrian  Рік тому

      Thank you! And no worries Olaitan 🙌

  • @hyacinthonyekwuo
    @hyacinthonyekwuo Рік тому +1

    🔥
    I’ll definitely try this out asap

  • @wingmann3632
    @wingmann3632 7 місяців тому

    EXTREMELY HELPFUL, THANK YOU MAAAAN!

  • @fazzyakamello
    @fazzyakamello Рік тому

    My guy! Keep up the videos.

    • @uiadrian
      @uiadrian  Рік тому

      Will keep 'em coming! 😁

  • @courtneybodkin5556
    @courtneybodkin5556 3 місяці тому

    Thanks for the tutorial. I have used this on a project, how do you suggest sharing the file with the developer. When I Export to lottiefiles it doesn't animate the same.

  • @Shuu98
    @Shuu98 7 місяців тому

    Cool one to test out but I got my Change to option is not avaible. It is fade grey. Can anyone help me with the issue ?

  • @endgamefond
    @endgamefond 6 місяців тому

    now how to save it into video format?

  • @thiyagu-8705
    @thiyagu-8705 Рік тому

    Bro you really Awesome... Good Work! Am start practicing figma your videos are so helpful for me --- Thala !
    Am from Tamilnadu, India !

    • @uiadrian
      @uiadrian  Рік тому

      Thanks! Good luck and all the best 😊

  • @MohamedAbdo-po5ue
    @MohamedAbdo-po5ue Рік тому

    Hi Adrain, Thank you so much for this tutorial. Now, i need to export the animated background as SVG, when i export it, it becomes static image. How can I do this please?

  • @mdwahid8625
    @mdwahid8625 10 місяців тому +1

    Recently I started follow you. You are giving boom type work. I appreciate it. But I want to know how to do you showcase the task which is showing in 8:37 mins. Is there any plugin or tools you used for it. thanks

  • @Bhooshan.Design
    @Bhooshan.Design Рік тому

    Love it :)

  • @link486
    @link486 Рік тому

    Hi there, thank you for sharing this. Do you have any suggestion on how to hand off this animation to developers? Do you export as GIFs or have them code it in CSS?

  • @rahul_lsh
    @rahul_lsh Рік тому

    Awesome!

  • @farooqmehboob4351
    @farooqmehboob4351 Рік тому +1

    Can we animate widgets in figma ? Like the cards on the right side you have

    • @uiadrian
      @uiadrian  Рік тому

      Yes, you can, but for the most fluid animation I'd go with AE

  • @IamShashi98
    @IamShashi98 Рік тому

    Good video brother🎉

  • @abdikhanihassan
    @abdikhanihassan 10 місяців тому

    I'm not familiar ui design but I like so how can I this mash into dev or code

  • @chrispennington5400
    @chrispennington5400 Рік тому

    Thanks! How do you show the keyboard presses?

  • @yours.337
    @yours.337 Рік тому

    Thank You So Much.. I'm Subscribing Right Now..

  • @shobowalearamide9271
    @shobowalearamide9271 6 місяців тому

    Thank you

  • @adeebrazali
    @adeebrazali Рік тому

    sir , why my animated is not looping ? im confused bcs its almost done but not looping huuhu

  • @Watch505
    @Watch505 7 місяців тому

    Very informative

  • @melessify
    @melessify Рік тому

    Yeah this is cool but how do I get it to maintain form using auto-layout?

    • @uiadrian
      @uiadrian  Рік тому

      I'd put this in an absolute position into a hero section so that it scales with the width

  • @lala-wb7gi
    @lala-wb7gi Рік тому

    Amazing Bro :) how do i export to html or gif/webP

  • @Lutfurrn
    @Lutfurrn Рік тому

    I came through your mail. Nice channel

  • @dhanjaninamrata234
    @dhanjaninamrata234 8 місяців тому

    amazing

  • @abdullahghazi3854
    @abdullahghazi3854 2 місяці тому

    where is the files ?

  • @kreativethinker5987
    @kreativethinker5987 Рік тому

    Hi Adrian, can you use this animated mesh gradient on a website? Like, download this in a video format or so?

    • @uiadrian
      @uiadrian  Рік тому

      For sure you could although I think it'd be easier to add rotating property on the svg placed inside of the main section div ✌️ If you explain this as a text prompt, chatgpt should help generate the code for it

  • @oyewoleoluwasegun9093
    @oyewoleoluwasegun9093 Рік тому

    thanks bruh

  • @m.ehtizan
    @m.ehtizan Рік тому

    Hey Andrian, I just watched your video and I must say that it was really informative and well-made. I loved your videos. I was wondering if I could help you edit your videos and also make highly engaging shorts for you?

  • @piyushgupta809
    @piyushgupta809 Рік тому

    sub +1. need more of UI Adrian .

  • @Dopekulture1
    @Dopekulture1 Рік тому

    🔥

  • @farsolutionspk
    @farsolutionspk Рік тому

    respect++

  • @digvijaysingh984
    @digvijaysingh984 Рік тому +1

    it did not happen... I tried exact point to point

    • @muneebanjamch
      @muneebanjamch Рік тому

      Same -My one is saying that a prototype needs to have atleast one frame

    • @annaszumska1218
      @annaszumska1218 Рік тому

      @@muneebanjamch are you using frame or square?

    • @uiadrian
      @uiadrian  Рік тому

      Grab the files and look inside the settings. Maybe you didn’t use a frame to create the component set

    • @ahmedhussain3083
      @ahmedhussain3083 Рік тому

      which one is file of this tutorial? because i did same like you even use to create compound set but its still not moving@@uiadrian

  • @muneebanjamch
    @muneebanjamch Рік тому

    My one is saying that a prototype needs to have at least one frame

    • @uiadrian
      @uiadrian  Рік тому

      You need to have a component set created out of your gradient frames to make it work. Download the files and take a look inside the file ✌️