Interactive text inputs in prototype mode

@Gleb Any plugins (free or paid) that might help with this (text input fields)? Validation would be nice but I’ll take live text input without validation as a fine MVP.

It is also possible to create a mobile keyboard for any text input.

I made an example here:

I tried it myself and it works just fine!

But I ran into the problem, where if you put more than one Input-Component in a Frame both Inputs are linked to the same Variable and will therefore display the same content, which would be a huge problem for reusing this component in projects.

Of course you could manually change the variable for every Key Event but that will cost a lot of time doing it for a project where there are plenty of inputs involved.

Has anybody an idea how to make this dynamic and easy to reuse?

I found a solution for my problem stated above and I will try to explain it in case somebody has the same problem:

1. Create the input component as @Mustafa_Ahmed1 did be sure to have 2 text elements in them. One for the actual “writing” and the other for displaying the text.
2. Add all the Key-Events where you append the “myValue” String-variable
3. Add a onClick-Event where you change to the “filled” Variant of your Component. Additionally in the same Event you are going to set your input Variable (in this case myValue) back to an empty String (“”).
4. Thats it for your component. Now when you use the component you will see that when you click on it after writing something your text will just disappear.

So how do we make the text stay when making multiple Instances of our component?
To achieve this we do not edit our Main Component anymore. We will only work with instances going forward.

5. Create a new local string variable (ex. if you want the user to write their name in this input you can name the variable input_name or something like that)
6. Assign this new Variable to your text that only displays the text (not the one where you write!)
7. Now go to the “Typing” State of your Component where all the Key-Events are placed
8. Add a onMouseDown Event. There you are going to “Set Variable” and give “input_name” the Value of “myValue”.

Thats it!

What happens is that MouseDown is triggered before the Click-Event. So the things written in the “myValue” Variable is copied to our local value “input_name” before the Click-Event is triggered and “myValue” is set to empty.

Now when we add multiple Input the only thing to do is adding a local string variable for each input and adding the MouseDown-Event.

I hope this is somewhat understandable, if not let me know.

Cheers.

Please add this - it would be awesome and catapult Figma into prototyping heaven 🙂

This would help so much with demoing and allowing users to test out a prototype for real. If Figma adds this we can finally stop paying for Axure too!

This was requested 2.5 years ago! Where is this feature!

It must be one of those things where building it is much, much more complex than it seems, because yeah, this is table stakes when it comes to prototyping.

This 100% needs to be in Figma, or they need to give refunds because they billed themselves as a “prototyping tool” that lacks some of the most fundamental elements of prototyping. Someone on the Figma team needs to come give an account of how they could possibly miss the use case of where the user actually interacts with the design beyond clicking and scrolling.

I swear the Figma devs never even considered prototyping for anything beyond mobile. I believe they just assumed everyone would use auto-fill/auto-complete to side-step around the issue. I feel like we’ve all been lied to, and it’s deeply infuriating.