Functional text input in Figma - Using #variables and #conditionals

Finally, we can have text inputs in our prototype that users can really type in and we use the given value in our design.

I will use variables and then #conditionals prototyping to make this input. so get sure to watch this video until the end.

🔗Link to the #figma file:

⚠️ new update:

📌 Timestamps:
0:00 - Intro
0:25 - What you will see in this video
1:26 - Step one: design the input
2:21 - Step two: Create a variable
3:12 - Step three: Prototype the active state for input
3:41 - Step four: Interaction
6:06 - Step five: Delete the icon
6:19 - Make an example
7:10 - Demo

Whether you're a beginner or an experienced designer, you'll find valuable insights in this tutorial. Follow along and take your Figma skills to the next level with this captivating micro-animation technique.

👍 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!

Let's Learn together #UX and #UI , #Design, #figma #prototype

--------------------------------------------------------------------------------------------
🔥 Check out some of my other popular tutorials:
--------------------------------------------------------------------------------------------

🌐 Connect with me:

[M_Ehson]

Finally the first video that states the answer to my questions about how to create a text box where text input is possible. 😊👽

[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!!💪🏽

[edmondg]

If you wan to achieve some kind of delete function try this - While you can't currently remove a character from a string in Figma, you can remove the entire string. So just program your delete key to update the string variable to " " or whatever your original placeholder text was. Seems to work well and in my opinion better than having a separate key to click on.

[Shubham_Toshniwal]

One of the simplest explanations ever!😍

[akxhit]

Hey, you're incredibly cool! I've been binge-watching your videos for the past two days. Massive respect, man!

[digdemertan]

Excellent describing, and job. Thank you.

[kryczus]

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

[orianatoubia]

Thank you very much, awesome tutorial! This explained even more than I expected

[jatinraj]

I really love this channel. Please post more content on micro-interactions using variables and interactive component.

[belsnickel]

Huge timesaver thanks. I did not want to add a reset icon since it does not form part of the design so I added a Drag interaction to reset the input.

[mrair]

thanks, but I still find it tedious, wish Figma did just like framer to be honest.

[hroman_codes]

Dude this video was great an exactly what I was looking for 👍👍👍👍👍👍👍

[ffranea]

Really helpful for my assignment! Thank you✨

[menekamrudy]

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

[jmanned]

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

[olamidebabalola]

please can you do a video explaining how to create an instance that if we click the text box then mobile keyboard pops up and allows input text

[clint]

Maybe it's because the video is old, backspace works as a parameter in the condition now. What I don't know is what I can only introduce Cap letters

[irenegeller]

@Kimo do you think you'll update this tutorial for Figma's new UI? :) Around the 4:15 mark, there's a difference in the UI between old Figma (choosing "Conditional" for an interaction) vs. new Figma (they seem to be calling it "Check if/else" now) and I'm sure there'd be other discrepancies. Great tutorial though!

[HiwagaSoul]

thanks for the tutorial bro 😁😁,
but this interaction isn't available to freemium figma users 😔😔

[oOnewerOo]

A litle bit sad that figma can not build in a element for that. In Axure, XD and other prototype programms its a 2 second job.