![Kimo](/img/default-banner.jpg)
- 94
- 279 629
Kimo
Germany
Приєднався 23 тра 2021
UX and UI design. Design tools new tricks and techniques!
My name is Kia, and I am a designer currently working as a User experience and user interface designer. here in this channel, I am trying to share my experiences and learnings with everyone who is interested in design. please subscribe to the channel to be updated about new videos.
let's learn together.
I will have weekly video uploads. mostly crash course about Figma.
#uxdesign #uidesign #design
My name is Kia, and I am a designer currently working as a User experience and user interface designer. here in this channel, I am trying to share my experiences and learnings with everyone who is interested in design. please subscribe to the channel to be updated about new videos.
let's learn together.
I will have weekly video uploads. mostly crash course about Figma.
#uxdesign #uidesign #design
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
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
Your discord link is not working. kindly upload a new one
Bro you are a life saver. was looking for this animation style for sometime for a project i am working on. Thank you
Loving the new mic quality and video editing style. Lets' go KIMO!
Thank you! ❤️❤️
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.
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!
We can't do this in the free version :(
Yes unfortunatly. and still believe this is not an intuitive way to add text input to the design. Figma needs to work on it.
This is brilliant! Danke sehr !!
❤️❤️ bitte schön
Great❤
❤️❤️❤️
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
Yay!!! I’ve missed this channel!!! ❤
Welcome back. ❤️❤️
Duuude! Your already rocking the new UI3! Nice
yeees 😂😂 Just missed the AI😂😂
This is so amazing video. I was searching for the fully responsiveness tricks and found your video and learnt new things. Thank you..😇
I am happy it was helpful, thank you ❤️
I found this way! Finally yeeeh~! thks!!!
❤️
thanks
thanks
❤️
I Can't Make the String Variable Empty. Can you teach me how to do it ?
You can try to save an empty chars into it using space , " ". Like this. Let me know if it worked.
But it doesn't has a blinking state
That's something for you. You can make a blinker component and add it to this input field on active state..
👍❤👃
❤️❤️❤️
❤
❤
Super cool! Relatively little effort with a cool effect! 🎉
Thank you♥
It does not work. When it starts it goes from 0 to 2 seconds and stops.
I need to know more about the details of how the issue appears. but it might be the case that new updates changed something.
can this be transferred to wordpress or elementor, or even a custom domain? even though this is for prototyping
I am not sure if such a prototype can be exported to other tools. please let me know if you found away for it.
can we combine ProtoPie prototype into Figma?
Not that I am aware of. You can bring your design from Figma to Peotopie though.
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.
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 ❤️
Do you think this will take jobs from UI / UX designers?
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.
Record something about Backspace, please.
So far, I could not make a proper and easy way for backspace. I will when I find it out. ❤️
Cool
Is it possible to animate the variant change?
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.
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"?
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?
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
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 ❤️
Tanhks! How to enter a number with decimal places. Example: 2.50? I thought you would show the use of the point. Thanks again!
Hi there, I can give it a try. Did you try to store the decimal amount in the number variable? Thanks for the comment ❤️
@@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😄
@@crisbarroswanzeler3580 Yea exactly. I still blieve Figma is not build for such prototyping level.
Thank you so much for making this, I was at a loss for how to simulate the camera portion of my design!
❤️ happy it was helpful for you
in the backspace i put the same text of the variant text-imput
I want to add a "space" after every 4 letters. How can I do that?
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?
thank you brother
❤️
Wow! That is totally game changer! Thank you a lot!
❤️❤️
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.
I will try it again and see if something has changed since the published date of the video. Thank you ❤️
@@Kimoartcave Thanks for your quick reply, I will be waiting for an update!
not working
If they added wildcards this would have made this way more easy.
👍🏻👍🏻👍🏻
❤️❤️❤️
thank you so much 😭😭😭😭😭😭😭
❤️❤️
Thank you so much it helped me a lot 🥹👍💖
❤️❤️
ur tutorial is too confuisign dude especially when u were talking about the changing to next variant
I switched to real-time screen recording in later videos, this might solve the issue you mentioned. thank you ♥
its great how to set the number length to dial pad for eg. where the number not exceed 10 digits
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.
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!!💪🏽
Yes exactly, I made the same way. I have a video in which I used the same approach you mentioned. ❤️
Which video?
how to do it in code? html css
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?
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 ❤️
@@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?
@@axelsosa5973 I am making a new video about text input and trying to show you a smarter approach.
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
Hi there, will do 👍
@@Kimoartcave Also do the search functionality
Very nice, but it doesn't make sense to create a new model every time I need a new field.
That is true. There is a plugin I found recently that might help, I will share with you.
Thank you for this video sir it has answered the question I had
❤️