Parallax Scroll Animation | Figma Tutorial | UI Trends 2024

Поділитися
Вставка
  • Опубліковано 5 лип 2024
  • Today I am going to show you how to create a Parallax Scroll Effect Animation in Figma. This is a complete tutorial that helps you design Parallax Scrolling websites. The Parallax Effect is one of the rising 2024 UI trends.
    #parallax #parallaxeffect #uitrends #figma
    Happy Learning and don't forget to like, share the video, and subscribe to the UX World channel.
    → Learn UX design with a discount from Industry experts: cutt.ly/8wtCOztx
    → Become a UX expert by doing UI/UX specialization from Coursera: cutt.ly/EwUqPe13
    -------------------------------------------------------------------------------------------------------------------
    Watch other popular videos:
    UX Design Trends 2024: • UX Design Trends 2024
    UI Design Trends 2024: • UI Design Trends 2024
    Daily UI Design Challenge: • Daily UI Design Challe...
    Horizontal and Vertical Scrolling in Figma: • Horizontal and Vertica...
    Food Ordering Mobile App Design: • Food App Design in Fig...
    E-Commerce Mobile App Design in Figma: • E-Commerce Mobile App ...
    ------------------------------------------------------------------------------------------------------------------
    Chapters:
    [0:00] Preview of design
    [0:14] Draw First Frame and Add Images
    [1:38] Design Frame Content
    [5:28] Design Next Frame
    [6:32] Design Bottom Page
    [10:04] Adjust Frames for Parallax
    [12:38] Connect Frames
    [13:50] Play Prototype
    ------------------------------------------------------------------------------------------------------------------
    Resources:
    Image by rawpixel.com on Freepik
    pngtree.com/
    www.ghumindiaghum.com/blog/to...
    traveltriangle.com/blog/summe...
    ------------------------------------------------------------------------------------------------------------------

КОМЕНТАРІ • 8

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

    thank you very much!!!!!!!!!

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

    Thanks for the video pls ek full video banaye portfolio pr

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

    😍

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

    Thanks for the video. I'm Spanish so if my English is bad I'm sorry.
    I have a problem with the connection of the FRAMES/screems. When I can't move between the frames by scrolling with the mouse. To change frames I have to left click and drag up or down.
    what is the problem?

    • @uxdworld
      @uxdworld  6 місяців тому +1

      I think you are asking about Panning. You can either select the Hand tool from the top bar or just click Spacebar to turn on the panning. Then you can drag your mouse to pan the area in the editor.

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

    I'll take a Figma course by government but I wonder how to export Figma project as HTML/CSS or only CSS idk. Can you show how to do that?

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

      You will need to use some plugins to export the design to HTML and CSS.