How to Create a Liquid Scroll Indicator in Figma | Inspired by iOS 18 | Step-by-Step | Tutorial

preview_player
Показать описание
Unlock the secrets to crafting a stunning liquid scroll indicator in @Figma!

In this step-by-step tutorial, you'll learn how to design a smooth, interactive element that enhances your user interface, inspired by the sleek aesthetics of iOS 18. Whether you're a beginner or an experienced designer, this video will provide you with valuable tips and techniques to elevate your Figma skills.

What You'll Learn:

- Setting up your frame for the scroll indicator
- Creating a liquid effect using blend modes
- Prototyping smooth interactions
- Tips for enhancing your UI design

Don’t forget to like, subscribe, and hit the bell icon for more design tutorials! Drop your questions and comments below!

#Figma #UIDesign #iOS18 #DesignTutorial #UserInterface #shorts
  1. Musab Alfawal
  2. figma
  3. tutorial
  4. design
  5. ios
  6. 18
Рекомендации по теме
How to diy 0:00:16

How to diy your own e liquid?

Making liquid air 0:00:58

Making liquid air

Create Liquid Animations 0:00:54

Create Liquid Animations in After Effects #aftereffects

Fastest liquid simulation 0:00:43

Fastest liquid simulation in blender!!!🙈Water Simulation Fast (Blender Tutorial)

Create Liquid Transitions 0:00:51

Create Liquid Transitions Motion Graphics in After Effects

HOW TO MAKE 0:07:42

HOW TO MAKE MULTI PURPOSE LIQUID SOAP AT HOME | HOW TO MAKE LIQUID SOAP FOR ALL USES AT HOME

Water Simulation Fast 0:01:31

Water Simulation Fast (Blender Tutorial)

How to Turn 0:03:24

How to Turn Air Into a Liquid

It's always time 0:00:29

It's always time for a CALMtail! Learn how to make our Raspberry Lemon CALMtail spritzer.🍹

Making Liquid Nitrogen 0:13:43

Making Liquid Nitrogen From Scratch!

Learn SHOPIFY LIQUID 0:09:46

Learn SHOPIFY LIQUID in 10 minutes as a Beginner

How to Create 0:01:46

How to Create a Liquid Title in After Effects | Tutorial

Liquid Splash Text 0:00:28

Liquid Splash Text Effect in Photoshop

Blender Real Time 0:02:55

Blender Real Time Fake Liquid Tutorial

How to make 0:00:23

How to make bubble liquid at home 🤩😉 #shorts #youtubeshorts #satisfying

How to Create 0:01:57

How to Create Liquid Text Effect in Photoshop

Create Marble Liquid 0:01:01

Create Marble Liquid Gradient Backgrounds in After Effects

How To Create 0:01:00

How To Create Merging Liquid Blobs In After Effects #Shorts

How to Make 0:14:35

How to Make your own Liquid Soap Detergent at Home and save Money/DIY Step by Step Tutorial

Liquid Nitrogen Explosion 0:00:35

Liquid Nitrogen Explosion

Making Dippin' Dots 0:00:59

Making Dippin' Dots with Liquid Nitrogen!

Liquid oxygen is 0:00:33

Liquid oxygen is magnetic! 🧲

Make Liquid Fertilizer 0:01:00

Make Liquid Fertilizer from Kitchen Scraps || Gardening Hack

Should You Liquid 0:01:01

Should You Liquid Cool a PC?

Комментарии
Автор

Dude is the BEST Figma UI designer in this platform and records the best tutorials! Please keep creating those tutorials! You're the best!

aetheryuu
Автор

You are so good in prototyping and creativity🎉

SAGE
Автор

This is very cute! I wonder when will you use it in a real project 😁

angelova.nikoleta.design
Автор

i tried it today im in love with it but i tried it with different colors and it dosnt work for light pink, could u do maybe a vid how to do it with different colors?

zuria
Автор

Super cool! If I understand correctly — the two layers with a color dodge/burn in combination with the "month handle's" layer blur, are causing a sharp edge of the "Blur" that looks like liquid? Is that accurate?

megaroeny
Автор

I like it a lot but it went over my head

noorkhaliq
Автор

How to use these animations in my other projects

dineshnayak
Автор

brother can you tell how to add a image to this like a wallpaper
I tried multiple ways but its not right because of the blend properties I think
I tried creating a diff frame and the adding the wallpaper, well the text scroll was above it but the liquid button was not seen and when it was put over the wallpaper it again made the wallpaper go wrong, see if you can make out a way

mayur