Figma Secrets: UNBELIEVABLE Text Entry Trick with Variables and Conditional Logic! 😱
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- Learn how to build an input field that users can enter text into using @Figma variables and conditional logic.
Build a community profile + join the community: www.uicollective.co/
Resource library: resources.uicollective.co/
Request a design system audit: www.uicollective.co/design-sy...
0:00 An Intro
0:17 Setting up the input + initial variable
3:04 Adding conditional logic
6:15 Adding a backspace command
8:08 Rendering the input elsewhere
9:55 Outro
#figma
wow, what a beautiful hack 👏
Agreed!
Great video
Thanks!
tedious... but brilliant thanks. hope they release a feature soon
Thank you! + agreed. The ability to copy conditional logic would be nice
Super handy! Thank you!
It takes about 30-45 seconds per key, so its a repetitive task but doesn't take that long.
Question: how could I re-use the form field across a prototype to build complete forms?
So a user could input text in other form fields eg name, surname
I'm presuming you would need to relink every form field to a new String Variable. Yikes!
Are there any shortcuts?
Yup! Need to relink each one!
Thank you for your video.
Question: What if I have a form with multiple input fields, based on the same component with different input/outputs? Lets say: 'First name' and a seperate field for 'Last name'. When I'm testing it only picks up the typing for one field or it gives the same input for each single field.
Thanks!
Great question. You'll need to create separate variables to store each result
@@UICollectiveDesign Hi there ! Thank you for the tutorial , that's amazing ! can we have a tutorial with different input like First name / last name / number ???
This process can just be repeated for each@@sindyborta8406
And for your next trick... do it with more than one input field on the screen... that you can tab between.
Great idea!!
When clicking on the field I'd like the grey "type something" text to go away and turn into "|" (input cursor), before I start typing. How would you do that?
Haven't tried it myself but could likely be done via conditional logic
Once you do it, I think you could put it into a library and reuse it. Correct me if I'm wrong
Let me confirm!
Awesome hack, thanks for the easy to follow tutorial. Trying to add additional keys to the function like "@" and "." without success. The key press seems to work but nothing is showing in the input field. Any thoughts?
Didn't try with @ and '.' unfortunately
@@UICollectiveDesign And if I create this input field and add it to my library, when I add it to a new design a couple of times, what ever I put in one instance is replicated in the second instance - how do we avoid/separate them?
Haven't tried this out so can't speak on this right now unfortunately. Sorry, I am not more help! @@user-tq6tv2tt5d
How would you implement a real backspace where it just takes away the last character inputted?
Haven't tried this out yet!
Niceee. Can u share this file so we can just copy the logic ? 🎉
Will aim to do sometime soon!
Do you REALLY have to make conditions for every letter :D ? Prototyping in Figma has been tiresome sometimes. It's time to have some functional components ready to use....
You really do! I agree though. Even the ability to copy conditional logic would be super helpful....
@@UICollectiveDesign I used to prototype with axure and let me tell ya, that software is rough! But still there was many ready to use fonctioning components, and you manage states and can trigger actions by mostly every way possible, so yes, it was easier... But to make let´s say, a more refined animation, not to say a high fidelity prototype, it´s trickier.