Prototyping functions like in javascript to manage a complex prototype

Hey Shaul, thank you for raising this feature request with us! We’ll pass your feedback along to the teams.

Wish variables have more features.

My fav one is:

• Variables scoped to component instance

Ability to do else if would also be extremely helpful and cut down on funky logic.

I wish I could trigger the actions already assigned to a component. But creating functions is even a lot better.

Another one is to be able to refer to instance with “this” from within a component to not affect all instances. Would allow to do easy hover on components that have on click actions.

😮😮😮😮

I be like, mate, who would you do that? What kind of design idea requires such effort express?

Any prototype that you would like to test on real users with real actions.

Any prototype that you would like to change one small expression or logic.

Any prototype that your interactions are repeated.

Prototype Maintenance is very important for any designer and company. Currently you cant maintain variables and remember all your interactions.

I did create a way to place all my interactions in order so the logic would be readable and easier for change but it’s a walk-around.

Got that. In my view, this type of complexity requires different tools. Just saying. The interactions you put in place are very complex, thus I recon very fragile. Not sure if Figma is the right tool.

I don’t think we need another tool when Figma allows that much of complex interactions, so i believe that Figma does recommend using it and it’s amazing to use and supports most usecases in UI logic.

The Figma dev team did a great job of taking basic javascript options and producing amazing results. They did most of the work needed for top noch prototyping tool that is still simple to use.
Only missing logic maintenance = functions.

In a small usecase when you have couple of set variables and you need to repeat this exact logic in a different frame. After sometime, it’s hard to remember whats going on and you don’t have any visual indicator or anything to help you understand. function represents a name for the interaction so you can understand what does it do.

In a big usecase with many variables sets in many places, you can’t remember what you did and if you need to change the logic then it’s a big problem, similar to what a developer feels when he needs to make a change in someones code.

Figma interactions UI looks like code, acts like code then it should adopt the code approach- any developer will say, don’t write the same line of code twice.

Thank god we have Figma forum and we can share ideas.
@Pavel_Kiselev feel free to suggest better Figma improvements to improve the way we manage variables and lets improve Figma together.

+1 🖤
once done, please make it easier to store user input to variables.

I’m creating a ‘simple’ multiple choice quiz, with 4 questions, and 4 possible answers for each. 

I have a single Question template screen, and all of the question data, and game tracking are nicely organized variables. I only need a single update function to check if correct, and update everything.

But, because we don’t have functions, or else/if, or case, or ability to copy paste, I’ve got slightly differring, repeated scraps of procedural code across every button (start-quiz, guessA, guessB, guessC, guessD, skip, and next question, ...With each button containing 4 if conditionals to iterate from questions 1-4, update correct count, and progress bar calc because...), when it could’ve been super quick (function nextQuestion(answer) all in 1 tight, simple routine). 

@Pavel_Kiselev You’re right that anytime, you can’t create either functions, or some ability to create commonality, or the ability to partially override base component code, the whole thing becomes a teetering crystal chalice. It’s working, but I feel sorry for the person that tries to update it after I’m gone. And then if they update the component, all of the overrides go poof! 

I completely agree with ​@Shaul_Vainblat, but would slightly modify to say, we need:

1. Create variables – check. Thank you very much.
2. Create functions – Please tell me this is coming!
   1. Add “Call function” to code dropdown.
   2. Select function name, with option to pass parameters (as variables, string or numbers).
      ...and sorry to pile on but...
3. Allow adding multiple code elements without having to create a fake conditional!  
   • eg: set variable, call a function, and navigate to a new frame. 
   • I would use this basic combination 80% of the time.
4. Ability to Copy/paste code elements – like conditionals, or variable statements 

Download Here - https://tinyurl.com/4pd2v8u9