Interactive text inputs in prototype mode

I can’t agree more. And this is a must. Hopefully they can release this to their next update.

This is a great prototype by @designXstream (I have no affiliation with this user or group BTW) which may help – it helped me! 😍

I’d REALLY like to make a transition off of UXpin to Figma - but missing this type of basic functionality is a deal breaker.

I am a big fan of Figma and have been for a few years now but only recent did I discover Figma does not seem to offer it’s users a text input field while one of there plug ins Protopie does and after some research as does adobe xd…I admit I find it to be a big bummer as I love Figma but am now considering if I need to make a switch to a paid application that offers more functional design aspects. Is there any advice on how to work around this or if Figma plans on offering more functional features like text field inputs in the future?

Hey @Amanda_M1, thanks for the feedback!

We’ve merged your topic with an existing feature request thread. This is already on our radar. We just don’t have an exact timeline to provide just yet. We’ll continue to pass feedback from this thread to the prototyping team.

There’s clearly a need for that and it is one of the most basic things people need to be able to prototype properly.

This functionality is not necessary… it is essential. I love Figma, seriously. In my opinion it is the best design tool for UX, but… that this functionality is not included yet, when other tools widely surpassed, like Axure, have it for many years, is not understandable. Please, Figma team, we need this functionality now.

After the new releases today, I got curious and could indeed pretty quickly, albeit manually, create a text input. Pretty cool! Sorry gif is so tiny. That’s me typing “hello world!”

I created a variable inputPlaceholder and inputValue. Then you assign the text component instance to the inputValue. Then create KEY interactions that append key strokes as needed.

This combined with auto height on text, and a “Hug” setting in the auto layout is pretty perfect. To top it all off, adding min and max heights on it are awesome. Great job figma folks.

I suppose I could create every Key interaction possible, but would def be curious if folks figure out more efficient ways. 🤖

Cool but way too complicated.
We don’t need complex workarounds. What we need is a way so users can easily click in a field and type whatever they want. I was really hoping this would be now included in “advanced” prototyping – but unfortunately this feature is still missing.

For sure, seems like such an easy thing to add!

I was literally building this but decided to see if someone else had already. Well done! Yes it’s a kludge, but an effective one.

Any chance you’d share this file so we can see how you did it and play w/ it ourselves?

Thanks again for proving this out!

Had to scratch the itch, and threw together a quick demo video of how I did it.

I still can’t delete/backspace, or add capitals, or commas…but it’s a wee bit 'o progress. Editable Text Input in Figma Jun 22, 2023 - YouTube

Great job @Brandon_E.B_Ward! I ran into the same challenges with backspace as you, but as prototyping in Figma goes, this is a very nice addition to the toolbox. For simple numerical input etc, I think we can get away with backspace clearing everything in one go.

I figured out a backspace approach by setting a inputPrevious var, buuuut…it only works once. It’s possible but I decided too ridiculous to create a var for every sequential possible backspace. I racked my brain for about 15min but haven’t figured anything reasonable out. Another crazy idea is using vars to set width on the actual input object, such that it gets shorter and clips on every backspace. Also lots of gotchas there I figured, but if anyone tries that out I’d curious how they manage.

If we had some kind of slice function in expressions we could remove the end of a string and enable the use of backspace?
https://devdocs.io/javascript/global_objects/string/slice

@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’s now easier to use interactive input text fields with the new “Variables” update.

I’ve just published a demo on Figma community, you can try it:
https://www.figma.com/community/file/1256283860066065766

Duplicate the component set, and customize the style to fit your design.

It would be awesome if Figma adds this feature, because it’s essential in prototyping!
But until they do that, we can use these tricky ways, they work well.

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.