Interactive text inputs in prototype mode

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