- Видео 94
- Просмотров 283 671
Kimo
Германия
Добавлен 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...
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...
Просмотров: 824
Видео
Fully responsive design in Figma - Auto layout, Responsively, Fixed aspect ratio 😎(2024)
Просмотров 2,3 тыс.21 день назад
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? ruclips.net/video/N1wEXOLUcCQ/видео.html 🔗🔗 ...
Learn responsive design | Part 1
Просмотров 50228 дней назад
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? ruclips.net/video/N1wEXOLUcCQ/видео.html Let's Learn toget...
6 fun Widgets of Figma! before Config 2024!
Просмотров 167Месяц назад
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,6 тыс.Месяц назад
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: ruclips.net/video/MwaHULhKLiQ/видео.html Plugin: www.figma.com/community/plugin/134414...
Mouse effect in Figma! tracking the mouse position.
Просмотров 478Месяц назад
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: ruclips.net/video/Djbg_ry-CrA/видео.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️⃣ ruclips....
Let AI do all the work - Relume and Galileo building the whole page!
Просмотров 2892 месяца назад
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,3 тыс.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,7 тыс.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: ruclips.net/video/B_A7VdNXJgM/видео.html Custom cursor using Framer: ruclips.net/video/KoPAj5oiSDA/видео.html #New...
Custom Cursor in Framer! Add more fun to your design 🪄
Просмотров 4643 месяца назад
Custom Cursor in Framer! Add more fun to your design 🪄
Redesigning of Mercedes Benz website!
Просмотров 2523 месяца назад
Redesigning of Mercedes Benz website!
Real Camera in prototype, In Figma and Protopie
Просмотров 3,2 тыс.4 месяца назад
Real Camera in prototype, In Figma and Protopie
Let's find some cool Figma plugins together! 🔎
Просмотров 1824 месяца назад
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 ✨
Просмотров 3044 месяца назад
New Figma update: Multi-select, Multi-edit ✨
eBay navbar redesign - Kimo design challenge - part 1
Просмотров 1624 месяца назад
eBay navbar redesign - Kimo design challenge - part 1
Building a Real Calculator in Figma | Variables and Conditional prototyping
Просмотров 2 тыс.5 месяцев назад
Building a Real Calculator in Figma | Variables and Conditional prototyping
Change component variants with variables - Advance Figma prototyping
Просмотров 2,4 тыс.5 месяцев назад
Change component variants with variables - Advance Figma prototyping
Advance Micro Animation✨- Glowing button in Figma
Просмотров 8 тыс.6 месяцев назад
Advance Micro Animation✨- Glowing button in Figma
Design like a pro in Webflow| Design teaser cards
Просмотров 2296 месяцев назад
Design like a pro in Webflow| Design teaser cards
Design like a pro in Framer | Design teaser cards
Просмотров 2806 месяцев назад
Design like a pro in Framer | Design teaser cards
Design like a pro in Figma | Design teaser cards
Просмотров 3827 месяцев назад
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!🚀
Просмотров 1608 месяцев назад
Land Your Dream Design Job: Winning the design challenge!🚀
🎃Interactive 3D Pumpkin | Using Spline and Webflow!
Просмотров 3069 месяцев назад
🎃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
Просмотров 7289 месяцев назад
Tilt your phone to rotate the card - ProtoPie tutorials
Thanks for the great video, is the file you shared moved? I cant reach by using the link anymore. Could you reshare it?
Hi Esra, yes unfortunately I have transfered my files and lost many of them. Currently do not have the files any more. Sorry for that ❤️
Thank you for writing Woman.Life.Freedom below of your video.
I followed your steps and everything works, however, when I am using multiple input fields on the same page, once you enter something into one input they all repeat the same text. How do you stop them from all being all identical?
I have explained some approaches later in another videos, you can check my channel and write me if you couldn't find them. Hope you find answers to your question ❤️
@@Kimoartcave Which videos specifically?
I don't have premium can't i able to do with free one
I clicked the figma link but it says The page you are looking for can't be found. (404)
Aha, you are right I have transferred my working environment, and that might be the reason that I have lost some of the files. did you check my latest video about text input in Figma? there is a plugin that can help you save some time.
Your discord link is not working. kindly upload a new one
really? can you please double-check it and let me know if you still have a problem. thank you
Bro you are a life saver. was looking for this animation style for sometime for a project i am working on. Thank you
Hi there, happy to hear it helped 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.
I need to give it a try, I am not sure if it would be possible only with the ticker. maybe better to make a component for this purpose and do the interaction there.
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!
Did you request the new UI3? You can do it by clicking on the question mark icon floating button. It will be available to all users soon.
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
yes, you need to get sure your text input initially has default state. did you check this?
@@Kimoartcave i didnt realize you did another video before explaining how the conditionals work, sorry :D
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](ruclips.net/video/MwaHULhKLiQ/видео.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?