Kimo
Kimo
  • 94
  • 279 629
Scroll effect in Figma - I used the Scroll behavior property to remake a website!
I remade the max martinez ( www.maxmartinez.com ) Scroll effect in the Figma. We can use the scroll behavior property in the prototype panel to create different scroll effects, such as sticking on top, scrolling with the parent layer, and fixing position.
Share the website or effect you want me to remake it in the discord server:
discord.com/invite/6ZV3pbq5aM
Let's Learn together #UX and #UI , #Design, #figma #prototype
📌 Timestamps:
0:00 - What you will see in this video
0:26 - Share the effect you want me to make in Discord
0:48 - Design the layout of the section
8:13 - Design the rest of the sections - make component
9:18 - Use variables to save content for each section
10:14 - Make different Modes
13:59 - Connect variables to UI
15:45 - Make the scroll effect
18:00 - Final result
18:46 - Last talk
👍 If you found this tutorial helpful, don't forget to give it a thumbs up and subscribe to the channel for more design tips and Figma tutorials!
🔔 Subscribe for weekly design tutorials:@Kimoartcave
--------------------------------------------------------------------------------------------
🔥 Check out some of my other popular tutorials:
Variables: create dial pad: ua-cam.com/video/jrRQjuYxTUY/v-deo.html
Advance micro-interactions in Figma: ua-cam.com/video/moLF7t3HwYk/v-deo.html
Переглядів: 755

Відео

Fully responsive design in Figma - Auto layout, Responsively, Fixed aspect ratio 😎(2024)
Переглядів 2,2 тис.14 днів тому
Yes! we can have a fully responsive design and layout in Figma. and even more, we can run our prototype in responsive mode which Figma released in config 2024 to check our design for different screen sizes. Watch this video and you can design a responsive layout like a pro! @Figma 🔗🔗 Learn Auto Layout in Figma! | How to use Group, Frame, and Section? ua-cam.com/video/N1wEXOLUcCQ/v-deo.html 🔗🔗 L...
Learn responsive design | Part 1
Переглядів 49421 день тому
Here in this video, I explain the basics of responsive design. what parameters we need to consider when designing and building responsive design and layout. later I will upload another part to show you how to make a responsive layout using Autolayout in Figma! @Figma 🔗🔗 Learn Auto Layout in Figma! | How to use Group, Frame, and Section? ua-cam.com/video/N1wEXOLUcCQ/v-deo.html Let's Learn togeth...
6 fun Widgets of Figma! before Config 2024!
Переглядів 158Місяць тому
A few days before Config 2024, I checked the Figma widget library and shared a couple of fun widgets with you in this video. Here is the list of 6 fun widgets of Figma. what widgets or plugins do you use the most, could you share them with me in the comment section? Config 2024: config.figma.com/ 🔗🔗 Click here on this link and join the discord server now: discord.gg/6ZV3pbq5aM Let's Learn toget...
Functional login form in Figma - Real text input !
Переглядів 2,5 тис.Місяць тому
I made a functional login form in Figma, with real text input. user can give an email address and password. we match these two with the database and then navigate the user to a specific page. I use a plugin for making real text input. @Figma Functional text input in Figma - Using #variables and #conditionals: ua-cam.com/video/MwaHULhKLiQ/v-deo.html Plugin: www.figma.com/community/plugin/1344147...
Mouse effect in Figma! tracking the mouse position.
Переглядів 468Місяць тому
One of the viewers - Omar - Asked me to remake this effect which you can see in the link below in Figma. From Lun Dev Code: ua-cam.com/video/Djbg_ry-CrA/v-deo.html Even though Figma is not the proper tool to prototype such an effect, I show you some tricks to fake it. using this trick you can track the mouse position and make different mouse effects in Figma. Mouse effect example: 1️⃣ ua-cam.co...
Let AI do all the work - Relume and Galileo building the whole page!
Переглядів 2802 місяці тому
In this video I let AI do all the work and design a webpage from scratch. I used Relume and Galileo to do wireframing and UI design and then I used the figma and framer to build the page. Relume and Galileo are using AI as the main technology for creating wireframes and UI. What AI tools are you using in your working field? please share it with me.❤️ #New #figma #relume #galileo 📌 Timestamps: 0...
Set variable mode 🌟Figma new feature
Переглядів 1,2 тис.2 місяці тому
There is a new interaction type, Set variable mode, which means now we can set variable mode or switch between them in our interaction. Here in this video, I show you how we can use this new interaction type in our prototype. How do you want to use Set variable mode in your prototype? share it with me.❤️ #New #figma 📌 Timestamps: 0:00 - Intro 0:20 - What you will see in this video 1:02 - Explai...
Customize your mouse cursor in the Figma 🌟
Переглядів 1,6 тис.2 місяці тому
you will learn how to customize your mouse cursor in Figma. I have done this in Framer and Figma once before. this time I will make a custom cursor in Figma without any third-party tools. please share your Custome cursor with me! ❤️ Custom cursor using Figma, Spline tool and Anima: ua-cam.com/video/B_A7VdNXJgM/v-deo.html Custom cursor using Framer: ua-cam.com/video/KoPAj5oiSDA/v-deo.html #New #...
Custom Cursor in Framer! Add more fun to your design 🪄
Переглядів 4482 місяці тому
Custom Cursor in Framer! Add more fun to your design 🪄
Redesigning of Mercedes Benz website!
Переглядів 2483 місяці тому
Redesigning of Mercedes Benz website!
Real Camera in prototype, In Figma and Protopie
Переглядів 3,1 тис.4 місяці тому
Real Camera in prototype, In Figma and Protopie
Let's find some cool Figma plugins together! 🔎
Переглядів 1804 місяці тому
Let's find some cool Figma plugins together! 🔎
Prototype menu like an expert 😎 Learn overlay in Figma
Переглядів 1,1 тис.4 місяці тому
Prototype menu like an expert 😎 Learn overlay in Figma
New Figma update: Multi-select, Multi-edit ✨
Переглядів 2984 місяці тому
New Figma update: Multi-select, Multi-edit ✨
eBay navbar redesign - Kimo design challenge - part 1
Переглядів 1614 місяці тому
eBay navbar redesign - Kimo design challenge - part 1
Building a Real Calculator in Figma | Variables and Conditional prototyping
Переглядів 1,9 тис.5 місяців тому
Building a Real Calculator in Figma | Variables and Conditional prototyping
Change component variants with variables - Advance Figma prototyping
Переглядів 2,3 тис.5 місяців тому
Change component variants with variables - Advance Figma prototyping
Advance Micro Animation✨- Glowing button in Figma
Переглядів 8 тис.5 місяців тому
Advance Micro Animation✨- Glowing button in Figma
Design like a pro in Webflow| Design teaser cards
Переглядів 2226 місяців тому
Design like a pro in Webflow| Design teaser cards
Design like a pro in Framer | Design teaser cards
Переглядів 2756 місяців тому
Design like a pro in Framer | Design teaser cards
Design like a pro in Figma | Design teaser cards
Переглядів 3796 місяців тому
Design like a pro in Figma | Design teaser cards
Learn Auto layout in Figma! | How to use Group, Frame and Section?
Переглядів 1,2 тис.7 місяців тому
Learn Auto layout in Figma! | How to use Group, Frame and Section?
Discover the Magic of Adobe Firefly 🪄
Переглядів 3057 місяців тому
Discover the Magic of Adobe Firefly 🪄
Can AI become a UI designer!? ✨ build your own custom gpt.
Переглядів 1,4 тис.8 місяців тому
Can AI become a UI designer!? ✨ build your own custom gpt.
Land Your Dream Design Job: Winning the design challenge!🚀
Переглядів 1598 місяців тому
Land Your Dream Design Job: Winning the design challenge!🚀
🎃Interactive 3D Pumpkin | Using Spline and Webflow!
Переглядів 3068 місяців тому
🎃Interactive 3D Pumpkin | Using Spline and Webflow!
Create A Dynamic Blog Website With Webflow Cms!
Переглядів 1,7 тис.9 місяців тому
Create A Dynamic Blog Website With Webflow Cms!
Which one you choose? Figma, Framer or Webflow?
Переглядів 2 тис.9 місяців тому
Which one you choose? Figma, Framer or Webflow?
Tilt your phone to rotate the card - ProtoPie tutorials
Переглядів 7209 місяців тому
Tilt your phone to rotate the card - ProtoPie tutorials

КОМЕНТАРІ

  • @amadionyekachi3120
    @amadionyekachi3120 18 хвилин тому

    Your discord link is not working. kindly upload a new one

  • @amadionyekachi3120
    @amadionyekachi3120 21 хвилина тому

    Bro you are a life saver. was looking for this animation style for sometime for a project i am working on. Thank you

  • @rishabh117rules
    @rishabh117rules 2 дні тому

    Loving the new mic quality and video editing style. Lets' go KIMO!

  • @DevikaMallikDesigns
    @DevikaMallikDesigns 2 дні тому

    Hi! What if I want the infinite scroll but also aditional interaction? I.e., When I click on a word it scrolls to the centre and gets coloured in. I figured it out ill the coloured in part (easy component -> animate on click -> component variant But the shifting of positions has stumped me.

  • @dulink3356
    @dulink3356 3 дні тому

    Hey! just a quick question, how come your left and right tool bars look a lot different than mine? is that a plugging or you got some options activated? thanks!

  • @nouhayladahioui7500
    @nouhayladahioui7500 3 дні тому

    We can't do this in the free version :(

    • @Kimoartcave
      @Kimoartcave 3 дні тому

      Yes unfortunatly. and still believe this is not an intuitive way to add text input to the design. Figma needs to work on it.

  • @sizzleishola_phynest3288
    @sizzleishola_phynest3288 5 днів тому

    This is brilliant! Danke sehr !!

  • @user-mz7mp2nv4e
    @user-mz7mp2nv4e 5 днів тому

    Great❤

  • @sergiocb4824
    @sergiocb4824 6 днів тому

    My keyboard just doesn't do nothing :c, y set the current state as active, and when i try to type, it doesn't work

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

    Yay!!! I’ve missed this channel!!! ❤

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

      Welcome back. ❤️❤️

  • @oweedesign
    @oweedesign 17 днів тому

    Duuude! Your already rocking the new UI3! Nice

    • @Kimoartcave
      @Kimoartcave 17 днів тому

      yeees 😂😂 Just missed the AI😂😂

  • @chitrashree6486
    @chitrashree6486 17 днів тому

    This is so amazing video. I was searching for the fully responsiveness tricks and found your video and learnt new things. Thank you..😇

    • @Kimoartcave
      @Kimoartcave 17 днів тому

      I am happy it was helpful, thank you ❤️

  • @유형석-t1g
    @유형석-t1g 17 днів тому

    I found this way! Finally yeeeh~! thks!!!

  • @ytRap007
    @ytRap007 17 днів тому

    thanks

  • @ytRap007
    @ytRap007 17 днів тому

    thanks

  • @c-gamesanta5716
    @c-gamesanta5716 19 днів тому

    I Can't Make the String Variable Empty. Can you teach me how to do it ?

    • @Kimoartcave
      @Kimoartcave 18 днів тому

      You can try to save an empty chars into it using space , " ". Like this. Let me know if it worked.

  • @RiyaKumari-cv7gw
    @RiyaKumari-cv7gw 21 день тому

    But it doesn't has a blinking state

    • @Kimoartcave
      @Kimoartcave 20 днів тому

      That's something for you. You can make a blinker component and add it to this input field on active state..

  • @RasoulMoazzez-ih8us
    @RasoulMoazzez-ih8us 22 дні тому

    👍❤👃

  • @J.B.G.design
    @J.B.G.design 23 дні тому

  • @keineFackel
    @keineFackel 25 днів тому

    Super cool! Relatively little effort with a cool effect! 🎉

  • @vincenzovolino_life
    @vincenzovolino_life 26 днів тому

    It does not work. When it starts it goes from 0 to 2 seconds and stops.

    • @Kimoartcave
      @Kimoartcave 24 дні тому

      I need to know more about the details of how the issue appears. but it might be the case that new updates changed something.

  • @JoshuaChetram
    @JoshuaChetram 26 днів тому

    can this be transferred to wordpress or elementor, or even a custom domain? even though this is for prototyping

    • @Kimoartcave
      @Kimoartcave 24 дні тому

      I am not sure if such a prototype can be exported to other tools. please let me know if you found away for it.

  • @evgeniyaitkis4426
    @evgeniyaitkis4426 27 днів тому

    can we combine ProtoPie prototype into Figma?

    • @Kimoartcave
      @Kimoartcave 24 дні тому

      Not that I am aware of. You can bring your design from Figma to Peotopie though.

  • @wonderng2134
    @wonderng2134 27 днів тому

    11 months ago, you made this [Functional text input in Figma](ua-cam.com/video/MwaHULhKLiQ/v-deo.htmlsi=cfXXIx4m1BGVrMPP) video, and now, 13 days ago (May 19, 2024) you an update-like video. That's cool and proves that you're monitoring your video and trying to improve. Also, I love your overall design (the setup, your video, etc.), it's a 10/10. For improvement, I think you should add this video's link to the previous one, so it'll be easy to find it.

    • @Kimoartcave
      @Kimoartcave 27 днів тому

      Thanks for your comment❤️ trying to make contents that are useful. Now I made a discord server to get even closer to common questions of everyone. Nice call, thanks I would do it. I will update the description of the videos. Thanks ❤️

  • @anthonywelcher5036
    @anthonywelcher5036 Місяць тому

    Do you think this will take jobs from UI / UX designers?

    • @Kimoartcave
      @Kimoartcave Місяць тому

      I just see that AI can help us to work smarter, less, and more efficient. I bliave tasks that we are doing are going to be replaced but not roles. At least not so soon.

  • @PauLa-fi6mr
    @PauLa-fi6mr Місяць тому

    Record something about Backspace, please.

    • @Kimoartcave
      @Kimoartcave Місяць тому

      So far, I could not make a proper and easy way for backspace. I will when I find it out. ❤️

  • @PauLa-fi6mr
    @PauLa-fi6mr Місяць тому

    Cool

  • @metelomaniac
    @metelomaniac Місяць тому

    Is it possible to animate the variant change?

    • @Kimoartcave
      @Kimoartcave Місяць тому

      I remember there was no smart animate for in this case because we basicly use the set variable interaction, so it happens instantly. So I am afraid not, at least for the theme switch itself.

  • @sungshinyim8150
    @sungshinyim8150 Місяць тому

    When I click the reset button, I want to see the text "type here", but now it shows the last name I used. How can I see the text "type here"?

    • @Kimoartcave
      @Kimoartcave Місяць тому

      You need to reset the initial value for the variable tot type here when the user clicks on reset. Otherwise, the variable would still have the last value it got. Did you try this?

  • @geraldhearne8158
    @geraldhearne8158 Місяць тому

    Thanks this is AWESOME Kimo, I have one question I am only able to type one letter at a time and never a whole word. Is there a way to get it to type the whole word like your demo

    • @Kimoartcave
      @Kimoartcave Місяць тому

      Can you check this video and let me know if you could solve your issue. It might be easier to use this plugin. You need to share more info that I can help you. Thank you ❤️

  • @crisbarroswanzeler3580
    @crisbarroswanzeler3580 Місяць тому

    Tanhks! How to enter a number with decimal places. Example: 2.50? I thought you would show the use of the point. Thanks again!

    • @Kimoartcave
      @Kimoartcave Місяць тому

      Hi there, I can give it a try. Did you try to store the decimal amount in the number variable? Thanks for the comment ❤️

    • @crisbarroswanzeler3580
      @crisbarroswanzeler3580 Місяць тому

      @@Kimoartcave Yes, I thought about it, but I'm working with numerical variables, so I couldn't make the point appear on the screen, but I'll keep trying in my free time, because as you said, the prototyping time needs to be worth it. Lol😄

    • @Kimoartcave
      @Kimoartcave 24 дні тому

      @@crisbarroswanzeler3580 Yea exactly. I still blieve Figma is not build for such prototyping level.

  • @Destiny-UX
    @Destiny-UX Місяць тому

    Thank you so much for making this, I was at a loss for how to simulate the camera portion of my design!

    • @Kimoartcave
      @Kimoartcave Місяць тому

      ❤️ happy it was helpful for you

  • @tiagovillasboas2360
    @tiagovillasboas2360 Місяць тому

    in the backspace i put the same text of the variant text-imput

  • @smitpatel9995
    @smitpatel9995 Місяць тому

    I want to add a "space" after every 4 letters. How can I do that?

    • @Kimoartcave
      @Kimoartcave 18 днів тому

      There are some ootions in my mind. One js that you can make a logic to count the entered number by user, and then ad some empty chars every and each 4th digit. The other one is to have different variables and then connect the variables to different text field with space between them. What do you think?

  • @Rosevawanderlust
    @Rosevawanderlust Місяць тому

    thank you brother

  • @kryczus
    @kryczus Місяць тому

    Wow! That is totally game changer! Thank you a lot!

  • @fallegan1664
    @fallegan1664 Місяць тому

    My button not come out expected. Layers name same, stroke same everything i did same as you did. the transition is laggy. starts normal then its slowing, then normal again. its crazy, absurt.

    • @Kimoartcave
      @Kimoartcave Місяць тому

      I will try it again and see if something has changed since the published date of the video. Thank you ❤️

    • @fallegan1664
      @fallegan1664 Місяць тому

      @@Kimoartcave Thanks for your quick reply, I will be waiting for an update!

  • @koyekfrnd
    @koyekfrnd Місяць тому

    not working

  • @jmanned
    @jmanned Місяць тому

    If they added wildcards this would have made this way more easy.

  • @peymanmirzaei1636
    @peymanmirzaei1636 Місяць тому

    👍🏻👍🏻👍🏻

  • @oliviaoktavi3360
    @oliviaoktavi3360 Місяць тому

    thank you so much 😭😭😭😭😭😭😭

  • @aquadragon2785
    @aquadragon2785 Місяць тому

    Thank you so much it helped me a lot 🥹👍💖

  • @Smugify
    @Smugify Місяць тому

    ur tutorial is too confuisign dude especially when u were talking about the changing to next variant

    • @Kimoartcave
      @Kimoartcave Місяць тому

      I switched to real-time screen recording in later videos, this might solve the issue you mentioned. thank you ♥

  • @user-cn9yx5id2d
    @user-cn9yx5id2d Місяць тому

    its great how to set the number length to dial pad for eg. where the number not exceed 10 digits

    • @Kimoartcave
      @Kimoartcave Місяць тому

      With a condition, you can limit the given number by the user. Check the length of the number, and if it is below the limit, add the new digit to the number. Give a try and let me know if you could make it.

  • @ghqdeluca
    @ghqdeluca Місяць тому

    It worked! Now, to work on the smartphone, I made a keyboard and added variables to each letter, number and symbol, I just changed it to “on tap” instead of “key/gamepad”. Thanks bro!!💪🏽

    • @Kimoartcave
      @Kimoartcave Місяць тому

      Yes exactly, I made the same way. I have a video in which I used the same approach you mentioned. ❤️

    • @ajadmusharraf7750
      @ajadmusharraf7750 7 днів тому

      Which video?

  • @heywatchme101
    @heywatchme101 Місяць тому

    how to do it in code? html css

  • @axelsosa5973
    @axelsosa5973 Місяць тому

    Thanks for your video bro! But i have a problem, how do I use this box multiple times individually without each box typing the same thing?

    • @Kimoartcave
      @Kimoartcave Місяць тому

      Did you try to use different modes or creating different variables to connect to the text layer with in the text input? I made one video and made a version for mobile keyboard that might be helpful. Let me know if you figure it out. Thank you ❤️

    • @axelsosa5973
      @axelsosa5973 Місяць тому

      ​@@Kimoartcave Hi! Thanks for your answer. I tried to create different variables but I had a new problem: replace the old variable with the new one on each key asigned in the interactions section. Do you have a quickly solution for this?

    • @Kimoartcave
      @Kimoartcave Місяць тому

      @@axelsosa5973 I am making a new video about text input and trying to show you a smarter approach.

  • @ahmedyarkhan7006
    @ahmedyarkhan7006 Місяць тому

    Hey Kimo can you make a tutorial of login and sign up functionality by using only figma so if user add incorrect email or password it shows message

  • @azoozsaleh8331
    @azoozsaleh8331 Місяць тому

    Very nice, but it doesn't make sense to create a new model every time I need a new field.

    • @Kimoartcave
      @Kimoartcave Місяць тому

      That is true. There is a plugin I found recently that might help, I will share with you.

  • @menekamrudy5861
    @menekamrudy5861 Місяць тому

    Thank you for this video sir it has answered the question I had