Interactive text inputs in prototype mode

Inputs are one of the most common UI design elements out there. But when you have to use them in a prototype there isn’t a good way to show what they look like when entering text. It’d also be great if we could trigger validation events like on a password input for example. This would bring more fidelity to my prototypes than just about anything.

53 Likes

Yes. This would be super awesome and it will eventually lead into conditional formatting of the flows.

6 Likes

I think this is related to Prototyping variables

1 Like

+1. It’s frustrating having to rebuild everything in ProtoPie (or code) just to get this functionality. And it’s been in XD for years!

8 Likes

One of the main and most common components of mobile and web apps are input fields such as forms, message box, password field, clock, timer, counter etc…

And yet every time I find myself having to craft the same components over and over to try and make it as interactive as possible with the huge limitations that you can’t actually type (I know there’s a wonky plugin out there) in those field in the prototype, neither run a clock or timer (that stays active while in prototype) and all the things possible with simple input/active fields.

It be great there was a quick, efficient way to create input fields and logic for these fields while being able to design, edit, animate it the Figma way.

4 Likes

I’m wondering, is it possible to add more feature in interactive component? i’ve just have an idea, how about create more interative for input form. Input form that can be typed with real text using keyboard and have a state on it, also have a condition is even better.

1 Like

This seems like a very basic table stakes item. You have to have this functionality if you want to call it a “prototype” - Sometimes what a user might input into the field is germane to the usability test. The amount of work to “fake it” is insane.

2 Likes

It would be so helpful for usability testing to have form text fields that could be typed directly into.

7 Likes

I design a lot of forms, and then put those forms in front of users to test usability. I can fake my way through most of a form - I can make clickable checkboxes, radios, toggles, selects, datepickers, and the like - but I can’t fake a text input. I can build an incredibly powerful and realistic prototype, but I can’t show someone a form that asks them to fill out their name. I would appreciate the ability to create ‘live’ text areas to more accurately mimic what can be done with a coded prototype.

14 Likes

This really needs to be implemented ASAP. It could really help with design systems, make the input fields much easier to manage. Here is an example from UXpin : - UXPin Preview

8 Likes

I would love for this to be a part of a near-future feature release. Having the ability to incorporate interactive affordances like these in our prototypes would go a very long way for many on the team, not just Design. Please make this a feature soon!

1 Like

Yes yes yes yes! When using prototyping for usability testing tasks that are a multiple-step process, lack of typing ability makes it really difficult to replicate the real life task.

1 Like

I was hoping in the recent Config they’d announce interactive text inputs in prototype mode, but they didn’t :frowning:

This is definitely important for user testing, @Figma_Support please implement this asap!

11 Likes

Same here, to me this is the #1 priority since this is such a basic part of design, prototype and UX, and was disappointed that there was nothing at Config.

2 Likes

I recently had to go back to Axure RP for a project because Figma does not have this feature. It was pretty painful. I’d say I have designed over 100 apps in most industries, enterpise, marketing, government and commercial. I’d say complex form design has been central to about 15% of my jobs. I don’t believe in tapping on the text box and text appearing becasue tests are artifical enough as it is and it is distracting for the participant; their brain is focussed on reading and understanding inputs, not creating them. You could say the prototype is driving them, not the other way round? Bit dramatic but maybe there is a point there.

Figma Devs, any feedback on this? Is this on the roadmap? Are you working on it?

3 Likes

There are so many forms in our product that it feels like we’re never really able to create a true prototype in Figma at all… Having this feature would really cement Figma as my number 1 tool.

1 Like

I think everyone else’s comments cover the why…

Just adding this to add my support for this feature, it would be game changing. We have also had to revert to Axure (we moved from it to Figma) just so we could user test a form.

5 Likes

Don’t forget the UX Figma! We desperately need input fields and conditional logic to test our prototypes properly with end users. Auxre RP does this and many UXers use that tool because of this capability. If you bring that to Figma you’ll have an amazing product.

3 Likes

+1. This is also a must have for rich prototyping.