Design Animated Logo Splash Screen in Figma

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ก.ค. 2024
  • Create this Animated Logo Splash screen in Figma. Step by step process of designing the logo and then adding the interactions in the prototyping. You can add this animation in your portfolio to impress your viewers. This demonstrates a good knowledge of UI design and concepts of smart animation, prototyping, interaction design and motion design.
    Topics of discussion in video:
    Intro: 00:00:00
    Setup Frame 1: 00:00:14
    Setup mask to give depth effect: 00:00:43
    Setup Frame 2: 00:01:57
    Setup Frame 3: 00:02:27
    Setup Frame 4: 00:02:42
    Setup Frame 5: 00:03:53
    Add Animations: 00:04:2
    Want to learn more about Figma? Subscribe to my channel.
    / @averagedesigndude
    Learn more tips and tricks on Figma on my Instagram channel below
    / averagedesigndude

ความคิดเห็น • 70

  • @JKxox0
    @JKxox0 ปีที่แล้ว

    Amazing tutorial, you explain things in just the right way. I'll go and watch your other design videos now :D

  • @UdeozorAlexander-ml4hn
    @UdeozorAlexander-ml4hn 10 หลายเดือนก่อน

    Thank you very much
    Amazing tutorial

  • @KT-User
    @KT-User 10 หลายเดือนก่อน

    superb

  • @j_tapia
    @j_tapia 21 วันที่ผ่านมา

    Awesome!!! Thanks!!!

  • @creatorsmafia
    @creatorsmafia ปีที่แล้ว +2

    This tutorial on creating an animated logo splash screen in Figma was incredibly helpful! The step-by-step instructions were clear and easy to follow.

    • @AverageDesignDude
      @AverageDesignDude  ปีที่แล้ว

      Thank you for your support.

    • @wtech16
      @wtech16 6 หลายเดือนก่อน +1

      Can you provide the logo that you use in this video..

  • @sanjanah7685
    @sanjanah7685 14 วันที่ผ่านมา

    Thanks!! This was really helpful!

  • @khangtranngo7847
    @khangtranngo7847 10 หลายเดือนก่อน

    Very nice, tks bro!

  • @offshare2033
    @offshare2033 8 หลายเดือนก่อน

    Thanks. It is very good.

  • @Sanskruti_36
    @Sanskruti_36 15 วันที่ผ่านมา

    This really helped me a lot thank you for this ❤

  • @MiyamatoMushashi
    @MiyamatoMushashi ปีที่แล้ว

    Thank you so much for this Explanation.

  • @shibinmathew9498
    @shibinmathew9498 ปีที่แล้ว

    superb ... expecting more videos like this

  • @vlogeening8545
    @vlogeening8545 ปีที่แล้ว

    I love it. Thunkyy

  • @isaeliana9980
    @isaeliana9980 ปีที่แล้ว

    Obrigada! 💛

  • @meandmydodge
    @meandmydodge ปีที่แล้ว

    simple and straight to the point ... deserved to be subscribed and like .... Done :)

    • @AverageDesignDude
      @AverageDesignDude  ปีที่แล้ว +1

      Thanks so much, you made my day.

    • @meandmydodge
      @meandmydodge ปีที่แล้ว

      @@AverageDesignDude Thanks to you Bro for knowledgeable content in simple way.

  • @TemitopeOni-wx4yb
    @TemitopeOni-wx4yb หลายเดือนก่อน

    This was so easy to replicate. Amazing tutorial

  • @aaftabkhan1051
    @aaftabkhan1051 7 หลายเดือนก่อน

    Quality content, really helpful.

  • @olumideabioye6550
    @olumideabioye6550 2 หลายเดือนก่อน

    God bless you

  • @fabrice_official
    @fabrice_official 2 หลายเดือนก่อน

    absolutely amazing
    it works for the 1st try
    bro much respect to you i love this for sure
    😎😎😎😎😎😎

  • @nikhilshah1702
    @nikhilshah1702 ปีที่แล้ว

    amazing explaination ...🔥🔥

  • @sammdesigns
    @sammdesigns ปีที่แล้ว

    Good work buddy!

  • @pasindurasanjaya1746
    @pasindurasanjaya1746 5 หลายเดือนก่อน

  • @Kanak_Bodkhe
    @Kanak_Bodkhe ปีที่แล้ว

    wow, cool animation :D i tried it,

  • @francescod3338
    @francescod3338 11 หลายเดือนก่อน

    Hi, nice tutorial. I'm new with Figma.
    I've made the component and I tried to import it into Android. But I got a warning like "could not convert type Union".
    The import doesn't fail, but the UI Package it is not imported. What should I do?

  • @ukutanner
    @ukutanner 8 หลายเดือนก่อน +2

    Thanks for the detailed tutorial. I am new to Figma. The main question here is how I can download it to my desktop as a GIF or mp4?

    • @AverageDesignDude
      @AverageDesignDude  2 หลายเดือนก่อน

      There are some plugins you can look at for exporting into mp4 and Gif.

  • @axellemuel9000
    @axellemuel9000 2 หลายเดือนก่อน

    RESPECT & THANK YOU SO MUCH MY BROTHER! JESUS BLESS YOU!

  • @purrfect_kitty_hub
    @purrfect_kitty_hub ปีที่แล้ว

    thank you for this , i recreated for my project but I need to turn this to a GIF, any idea? thank you

    • @AverageDesignDude
      @AverageDesignDude  ปีที่แล้ว

      You can do it using any third party gif creating software... I use Giffy for mac.If you are windows just google it.

    • @jackslifestyle4884
      @jackslifestyle4884 หลายเดือนก่อน

      you got any solution bro for gif and my team developer is asking for json file what should I do any idea

  • @faizankhan4711
    @faizankhan4711 7 หลายเดือนก่อน

    Amazing work!!
    hey can i get this figma file?

    • @AverageDesignDude
      @AverageDesignDude  2 หลายเดือนก่อน

      Sorry for the delayed response I was away due to personal emergency.
      This file is not available for sharing just for the purpose of allowing people to try themselves. Otherwise people just use the file and don’t learn.

  • @abinyewariso6515
    @abinyewariso6515 9 หลายเดือนก่อน +1

    What’s the Color combination for the circle bro

    • @AverageDesignDude
      @AverageDesignDude  2 หลายเดือนก่อน

      Sorry for the delayed response I was away due to personal emergency.
      I will have a look and let you know.

  • @meinathanmei1510
    @meinathanmei1510 10 หลายเดือนก่อน +1

    The 4th frame logo and company name how to merge.

    • @AverageDesignDude
      @AverageDesignDude  2 หลายเดือนก่อน

      Sorry for the delayed response I was away due to personal emergency.
      I am not sure I follow what you mean buddy.

  • @westfield90
    @westfield90 4 หลายเดือนก่อน

    Do you need the pro version to be able to do this?

    • @AverageDesignDude
      @AverageDesignDude  2 หลายเดือนก่อน +1

      Sorry for the delayed response I was away due to personal emergency.
      No you don’t need pro version for this.

  • @a.k.asodariya_0185
    @a.k.asodariya_0185 4 หลายเดือนก่อน

    how to link vector and text into one frame?

    • @AverageDesignDude
      @AverageDesignDude  2 หลายเดือนก่อน

      Just select them together and right click and select Frame selection.

  • @user-ic7xs9vh7i
    @user-ic7xs9vh7i ปีที่แล้ว

    sir i am doing a project on figma this template is very nice can you share this template sir i will be useful for my project

    • @AverageDesignDude
      @AverageDesignDude  ปีที่แล้ว

      Sure, Give me a few days, I will add the Figma file link in the description of the this video.

    • @ketanitemmaniezz
      @ketanitemmaniezz ปีที่แล้ว

      @@AverageDesignDude sir, i'm wait for your link too

    • @AverageDesignDude
      @AverageDesignDude  ปีที่แล้ว

      Here is the link for editable file: www.figma.com/file/WKkMLKpeJoTaLfspb3XVy0/Animated-Splash-Screen-(Copy)?type=design&node-id=0%3A1&mode=design&t=xMmsozNVsFlT42bm-1

  • @ltewireless7515
    @ltewireless7515 3 หลายเดือนก่อน +1

    I need to get an animated splash screen done. Contact me if you have time to do it.

    • @AverageDesignDude
      @AverageDesignDude  2 หลายเดือนก่อน

      Sorry buddy I am currently not available for new projects. Already quite busy with a few contracts up-till October 2024.

  • @user-ln2wz2tk7t
    @user-ln2wz2tk7t 10 หลายเดือนก่อน

    how to export it as json file?

    • @AverageDesignDude
      @AverageDesignDude  2 หลายเดือนก่อน

      Sorry for the delayed response I was away due to personal emergency.
      You can do this using plugin called lottie files in figma. I plan on doing a complete video about this too soon on my channel.

    • @jackslifestyle4884
      @jackslifestyle4884 หลายเดือนก่อน

      @@AverageDesignDude kindly do that video asap i need it right now and when I am try to export this animation using lottie files I cant able to do this

  • @PiyushKumar-ey8ub
    @PiyushKumar-ey8ub 3 หลายเดือนก่อน

    how to use this animation in andorid studio?

    • @AverageDesignDude
      @AverageDesignDude  2 หลายเดือนก่อน

      Sorry for the delayed response I was away due to personal emergency.
      You can try using Lottie Files plugin to export this in JSON and use in Android Studio.

    • @PiyushKumar-ey8ub
      @PiyushKumar-ey8ub 2 หลายเดือนก่อน

      @@AverageDesignDude Thank you for replying me ...
      i Used this animation .. this is awsome .. keep it up broooo....

    • @jackslifestyle4884
      @jackslifestyle4884 หลายเดือนก่อน

      @@PiyushKumar-ey8ub hi can you able to export to the lottie files I cant able to do this can you help me

    • @PiyushKumar-ey8ub
      @PiyushKumar-ey8ub 29 วันที่ผ่านมา

      @@jackslifestyle4884 ok how can i share you ?

  • @PiyushKumar-ey8ub
    @PiyushKumar-ey8ub 3 หลายเดือนก่อน

    figma file?

    • @AverageDesignDude
      @AverageDesignDude  2 หลายเดือนก่อน

      This Figma file is not available. I want to teach people to do this stuff themselves rather than just use a prebuilt file.

    • @PiyushKumar-ey8ub
      @PiyushKumar-ey8ub 29 วันที่ผ่านมา

      @@AverageDesignDude i already make this bro . Thanks for replying me