A dream about coding inside Figma.

What if the Code tab actually gave you ability to code and do complex prototypes?

What we do here is create a simple logic for a workable todo-list app. We create On Mouse Down event which checks if our Submit Button was clicked, and we check if the input field is empty, cause if it's empty we don't need to do anything. Next, we add a new item from our Library of components into an Auto-Layout group. And what if we could replace it's contents with actual text that user already has entered from the Input Field? Easy.

This is how you crank the prototype functionality from okayish to 11.

P.s. I know the logic at the end doesn't check out, but I was so tired of creating these step by step animation frames that I left it as is. In reality, we'd need to target the input field from the top and get text value from that instead of the Item.

P.p.s Also, remember Facebook Origami? That app was way ahead of it's time.

You can check the file with animation in here:

https://www.figma.com/community/file/883814059152408251/Figma-Prototype-2049

-------

Do you have a project you’d like to collaborate on?

Contact Unfold at unfold.co/contact

Follow us on Behance | Instagram | YouTube More about us on unfold.co