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
1 Like
@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.
1 Like
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?
2 Likes
I found a solution for my problem stated above and I will try to explain it in case somebody has the same problem:
- 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.
- Add all the Key-Events where you append the “myValue” String-variable
- 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 (“”).
- 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.
- 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)
- Assign this new Variable to your text that only displays the text (not the one where you write!)
- Now go to the “Typing” State of your Component where all the Key-Events are placed
- 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.
1 Like
Please add this - it would be awesome and catapult Figma into prototyping heaven 
2 Likes
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!
1 Like
This was requested 2.5 years ago! Where is this feature!
3 Likes
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.
2 Likes
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.
Thanks @Mustafa_Ahmed1
Figma really needs to add this feature asap.
6 Likes
I posted a request about this 2 years ago. Still not a thing?
4 Likes
That would be a great feature for prototyping and usability testing
Hey Max, thanks for the solution. I have the same problem, but how you add and create the new variable to avoid crashing all inputs simultaneously is a little confusing for me. Can you share your Figma file to get into? 
Figma has been around for awhile now and doesn’t have this yet?!
2 Likes
Here’s a plugin that makes text into input fields with placeholders.
You can also connect what you typed in the input field to a different output field.
1 Like
Considering how often a text field is used in prototypes to simulate typing, why not make ANY text field automatically typeable?
I’ve used a workaround that involves mapping all characters to a Key interactions but the limitation is we can use delete or space (because Space is used for Figma prototyping functions)
So yea. True input text fields!
1 Like
Hi @Johnny_Ceron, Thank you for sharing your thoughts with us! I noticed that there was a similar request from other community members. To help centralize the feedback and enhance the discussion, I’ve merged your post here.
Please take a moment to vote up from the top of this page.
Thank you for your contribution!
As product designer, I use a lot of prototypes that should simulate the user typing (Inputs, Docs, forms etc.) it would be amazing to have the ability to simulate the writing of text as a text animation in prototypes, like the typewriter animation in keynote (maybe even with an option to add a typing cursor)