Interactive text inputs in prototype mode

+1 — This is really making it difficult to use Figma prototypes for usability testing of any kind.

1 Like

I really need it because we planned to use Figma for User Interviews

1 Like

If we can have functional input text fields in prototyping for user testing that would be really helpful for us @Figma_Support @Figma_Team .

2 Likes

Hey Lisa,
I am building a text input for figma. As far as functionality how would you expect the input field to work when you’re adding it in the designer?

1 Like

I don’t understand why this crucial feature has such low votes : (
We have several uni subjects related to prototyping, all involving user input. We have to change to use WebFlow or Framer since they have built-in Input Field. Just hope this feature can be added ASAP. That would make Figma perfect. Thanks :smiley:

2 Likes

If Figma finally had interactive input fields, then it would be almost perfect! I can’t understand why this feature hasn’t been rolled out yet, input fields are essential when it comes to testing prototypes. Non-functioning input fields always destroy the illusion of a high fidelity prototype and cause astonishment and uncertainty among the test persons. Please please please bring the feature finally!

@Josh

3 Likes

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

3 Likes

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

1 Like

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.

1 Like

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.

7 Likes

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

variables-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. :robot:

5 Likes

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.

6 Likes

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

2 Likes

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!

2 Likes

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

5 Likes

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.

1 Like