How to Create a Scrolling Web Page in Figma 2023

Поділитися
Вставка
  • Опубліковано 20 сер 2024
  • Learn Parallax Image and Scroll animation tutorial in Figma using Smart Animate and a little bit of Photo Editing. It's very easy to create animations and micro-interactions in Figma.
    Figma is my personal favorite Design Tool. It's one of the fastest-growing design tools right now. If you're a beginner to Figma or planning to switch to Figma from Sketch/Adobe XD, don't forget to subscribe to this channel and hit the bell icon.
    Subscribe for NEW VIDEOS!
    My personal FB account: / akbarali.nabiyev.1
    My personal Instagram account: / akbarali_nabiev
    License for Music:
    Music from Uppbeat (free for Creators!):
    uppbeat.io/t/h...
    License code: IS7VNEP5NOEDM0FA
    Song: Jarico - Island Music
    supported by #BackgroundMusicWithoutLimitations
    bit.ly/2XoXFnb
    #figma #design #figmatutorial
  • Фільми й анімація

КОМЕНТАРІ • 72

  • @atalik80
    @atalik80 2 роки тому +31

    this is not scroll tutorial this is drag tutorial))) there is a difference between these two types of animation

    • @moudriktaoufik5443
      @moudriktaoufik5443 4 місяці тому

      On similar prpjection to the same into the gap betwen the plural's suffix and it's none -
      ●○ single's one○●-.

  • @jamesamoros6196
    @jamesamoros6196 2 роки тому +2

    This was awesome, straight to the point. Tired of these “Smash like button” fools dragging out the tutorial with BLAHAHABALALABALBHALBLAH. Thank you for sharing and saving me time.

  • @Kingsmans_quotes
    @Kingsmans_quotes 10 місяців тому +2

    everything explained in very short amount of time thanks bud this was very helpful

  • @adhingrha
    @adhingrha 2 роки тому +10

    This is the tutorial that I've been looking for! Thank you for the helpful video! 🙌🏼🔥

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

    This one was so simple yet no speaking! Thank you so much!

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

    Exactly what I’ve been looking for

  • @dobabejf726
    @dobabejf726 2 роки тому +2

    Good job! Keep up the good work.

  • @saranyadevi2080
    @saranyadevi2080 2 роки тому +2

    Clearly explained! thank you :) Please do more videos like this :))

  • @iamsriux
    @iamsriux 2 роки тому +2

    Great video!!! Keep doing these great stuffs

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

    this is amazing

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

    Amazing

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

    Great stuff

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

    Amazing work!!!!! 😍😍😍

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

    Unstoppable today, unstoppable today

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

    Good vidio

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

    Thank you!

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

    This is so good

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

    Thanks a lot for this video !

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

    Nice one. I want to make the BG of the hero section fixed to the right but content like text should change as I scroll down to other sections of the page. This is for a landing page.

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

    In soft One, there is relatively little although I will say soft One has so fantastic features and I tNice tutorialnk it is going places (Rated No 2

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

    so cool 😍

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

    nicee thanks

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

    Others are like, Yeah, so just make a crazy lody and drum and setup.

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

    the second page does not show on my prototype , could I know why ?

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

    Its great 👍 make more videos

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

      Thank you, soon I'll upload a new one🔥

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

    am getting soft from your video, thx alot. how do i make my soft more than 50sec long? I clicked loop recording, pressed the record

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

    Not working :( i did it 3 times but not working. Animation starting at second page and stopping :/

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

    mas cara seleksi foto nya biar kebagi gitu gimana ya caranya ?

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

    Mine looks notNice tutorialng like the way you guys started it would be amazing if soone told how to get the multiple tracks

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

    Nice im starting to make so simple soft soft how about you?

  • @zyrixel-mc
    @zyrixel-mc 2 роки тому

    How to make home page section sticky and when scroll second page come up with some animations but it needs to be user to control it's not to be a complete animation. please help me

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

      Honestly I didn't get your question, you mean that home page must be fixed and only second page should be animated right, when you scroll it?

    • @zyrixel-mc
      @zyrixel-mc 2 роки тому

      @@akbaralinabiev yes, when user scroll down first page stay same and second page come up. watch this but this is html/css website but watch the animations how it response when user scroll down and up ua-cam.com/video/1wfeqDyMUx4/v-deo.html

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

    Ima get the 0 dollar one is it rlly good or nah?

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

    For on drag interaction do we have to do dragging at the right end corner?

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

    Hi, when I go to my prototype, my image and text don't slide in from the sides.

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

      Hey👋, in your first frame text and image must be in different places than second frame, and one important thing, the second frame must be a copy of the first one, not a new

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

    this is great but , is there no "on-mouse" scroll version?

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

      Can you please explain your question once again?

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

      @@akbaralinabiev Your tutorial has an "on drag" mouse to activate the effect, but is there just an "on mouse scroll" to activate the effect? On a website everyone scrolls.

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

      @@skylabnewyork oh, I got you. The thing I made is just a design, when you write a code for this website you will give a scroll animation, not a drag. So it depends on web developer

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

      @@akbaralinabiev so isnt there any way to do it with scroll onfigma right?

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

    it's not scroll it's drag

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

    My after delay option its not alowed

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

      Hi, no it's not, in order to use the after delay option you have to choose frame to frame, not font, not circle or rectangle, only frame

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

      @@akbaralinabiev oh! tks a lot!! Now I understand the principle!! sucess!!

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

    Hi admin are you from Uzbekistan

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

    hey is there any alternative to adobe ? i don't have that software

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

      Hi, honestly I don't know about other programs that can do the same as Photoshop, but I think you can use the www.remove.background website, it doesn't separate the sky from the ground, but you do, using the eraser tool in it, try it out

  • @nhandinh10
    @nhandinh10 21 день тому

    +1 fl for u

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

    Is the CTRL+ALT function for a mac too?

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

    And how to apply it on website? Can you do it? or what keyword for tutorial that i can find on youtube to apply this to website?
    Thanks before.

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

    Michael

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

    mobile or desktop

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

    uzbekmisiz

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

      Ha

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

      @@akbaralinabiev omadizi bersin oka yana shunaqa web dizaynerlikdan videolar chiqarib turng sizga qarab animatsiyani organdim

  • @Local-Seo-Nerd
    @Local-Seo-Nerd Рік тому

    cut the f music.

  • @ekyas
    @ekyas 4 місяці тому

    Another drag (not scroll) parallax effect video.

  • @sasa692
    @sasa692 4 місяці тому

    fucking tutorial