Animated Mesh Gradients in Figma

Поділитися
Вставка
  • Опубліковано 19 гру 2024

КОМЕНТАРІ •

  • @CalerEdwards
    @CalerEdwards  2 роки тому +7

    Thanks for watching :D

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

    Most of tutorials just show how to draw something in 1st frame, they straight up skip all IMPORTANT options to select & call it a "Tutorial" 💀.
    But you showed every step clearly, thank you buddy ❤

  • @Raghudesign
    @Raghudesign Рік тому +12

    How to download this mesh gradient video to use in real website?

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

    Awesome..loved this tutorial!!

  • @Yuzakkong
    @Yuzakkong 4 місяці тому +1

    Love this! Is there any way to export it as a video?

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

    Thanks for the plug

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

    after connecting the third/end state to the first state, why doesn't my prototype turn out to be like yours at 5:43 min?

  • @manasgedam688
    @manasgedam688 Рік тому +6

    How to export?

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

    Awesome brother ❤❤❤

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

    great.
    keep it up mr. edwards,

  • @aayushdighe6739
    @aayushdighe6739 Рік тому +4

    Hi! I followed the exact steps as shown in the video but unfortunately its not animating after i click the play button.

    • @federicosentineri29
      @federicosentineri29 Рік тому +4

      try to press R when you are in simulation mode

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

      @@federicosentineri29 TE AMO!!!! SOS LA UNICA PERSONA QUE DIJO ESTO!! MUCHAS GRACIAS

  • @Clarity-808
    @Clarity-808 Рік тому +3

    Cool effect. However I think we want to know: can we realistically use this? Does this have browser support? How do we hand it off?

    • @Earth_Being
      @Earth_Being Рік тому +2

      It's literally in CSS, so I think CSS is browser supported

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

    Very nice and creative way to do this! Thanks @caler

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

      My pleasure! Glad you liked it :D

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

    after connecting the third/end state to the first state, why doesn't my prototype turn out to be like yours at 5:43 min? (which has only one image under "Tutorial"), meanwhile mine still have many vector just like your at 5:40.
    Please help me sir🙏🙏

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

    Amazing thank you

  • @timofeyshorts772
    @timofeyshorts772 13 днів тому

    for some reason when i insert it in my website, the opacity of my buttons are getting down

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

    Thank you

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

    Which instance plugin have you used?

  • @cojeagabriel7584
    @cojeagabriel7584 2 роки тому +7

    If you were to give this design to a developer, would you keep the gradient as it is or would you create a video with the movement or do something elss? 🤔 I'm curious how a developer is supposed to implement it 🙇‍♂️ Thank you! It was a cool video 🤗

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

      quick gif would be easiest way for the designer i think

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

      Eu ti-as exporta fundalul ca svg, ca sa nu iti mai bati tu capul.

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

      @@grav3ns3n cred ca solutia asta nu ar lua in calcul si animatia 🤔

  • @evrythng.y
    @evrythng.y 3 місяці тому

    how to export prototype?

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

    How do you export this animation to put on website?

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

      I recreate them in Webflow following similar steps. Not sure there is any plugins do export interactions perfectly if at all.

    • @rockingnick
      @rockingnick 5 місяців тому

      Aghhhh, this is such a problem

  • @artimity
    @artimity 11 місяців тому

    Как экспортировать на сайт объясните нормально

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

    It's cool in figma, but how do i get it to a developer to implement?

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

      There's literally an option now as Dev mode

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

    the best!

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

    thanks

  • @jkoblivion4175
    @jkoblivion4175 5 місяців тому +1

    Too many plugins.

    • @musicgood838
      @musicgood838 5 місяців тому

      Why is it bad

    • @jkoblivion4175
      @jkoblivion4175 5 місяців тому +1

      Plugins need updates. many of this ones lack update for 2 or 3 years. You should never build your profession on someone shoulders. Make your own plugins. Thats apply to everything, including figma.

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

    plugin costs money

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

      there are two plugins check for free one which is below the first plugin