- 94
- 283 671
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: th-cam.com/video/jrRQjuYxTUY/w-d-xo.html
Advance micro-interactions in Figma: th-cam.com/video/moLF7t3HwYk/w-d-xo.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: th-cam.com/video/jrRQjuYxTUY/w-d-xo.html
Advance micro-interactions in Figma: th-cam.com/video/moLF7t3HwYk/w-d-xo.html
มุมมอง: 824
วีดีโอ
Fully responsive design in Figma - Auto layout, Responsively, Fixed aspect ratio 😎(2024)
มุมมอง 2.3K21 วันที่ผ่านมา
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? th-cam.com/video/N1wEXOLUcCQ/w-d-xo.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? th-cam.com/video/N1wEXOLUcCQ/w-d-xo.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.6Kหลายเดือนก่อน
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: th-cam.com/video/MwaHULhKLiQ/w-d-xo.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: th-cam.com/video/Djbg_ry-CrA/w-d-xo.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️⃣ th-cam.c...
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.3K2 หลายเดือนก่อน
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.7K2 หลายเดือนก่อน
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: th-cam.com/video/B_A7VdNXJgM/w-d-xo.html Custom cursor using Framer: th-cam.com/video/KoPAj5oiSDA/w-d-xo.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.2K4 หลายเดือนก่อน
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.1K4 หลายเดือนก่อน
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
มุมมอง 2K5 หลายเดือนก่อน
Building a Real Calculator in Figma | Variables and Conditional prototyping
Change component variants with variables - Advance Figma prototyping
มุมมอง 2.4K5 หลายเดือนก่อน
Change component variants with variables - Advance Figma prototyping
Advance Micro Animation✨- Glowing button in Figma
มุมมอง 8K6 หลายเดือนก่อน
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.2K7 หลายเดือนก่อน
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.4K8 หลายเดือนก่อน
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.7K9 หลายเดือนก่อน
Create A Dynamic Blog Website With Webflow Cms!
Which one you choose? Figma, Framer or Webflow?
มุมมอง 2K9 หลายเดือนก่อน
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](th-cam.com/video/MwaHULhKLiQ/w-d-xo.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?