This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Damiano Gui
Posted Apr 22 - Read on Facebook

Hi Framers,
Big question here.
I'm trying to adopt Framer in my workflow, because it seems a lot more flexible than other UI-based prototyping tools. But before digging fully into it, I would like to know what's the real complexity one can achieve.

For example: the video below shows the 'drink builder' section of the Makr Shakr app which I designed. The actual app has been built already, but I'm curious if something like this could be prototyped with Framer, taking into account that:
- Because of the shape of the glass, the width and height of each ingredient slot are always different based on their Y position, along with the plus and less buttons and the actions assigned;
- available quantities and actions change according to the type of ingredient (e.g.: you can't shake sodas, you can't add more than 4 slots of alcohol, and so on), and all elements need to re-arrange their position and size if any previous ingredient is deleted;
- the position of the glass shifts up and down based on the selected ingredient and its amount in order to focus on it, along with the opacity of the ingredient.

How long would it take to prototype something like this, assuming one is comfortable with CoffeeScript? Would it become too complex and heavy to handle with Framer at some point? And most importantly, would it be worth the effort as opposed to coding it straight away in Java or Swift?

3 Comments

Koen Bok

Nice app! Yes, Framer is great for exactly these types of interactions. How quickly you could build it really depends on how good you are with the tool, but it's likely a lot faster to build this in Framer then Java or even Swift at the same skill level. The main reason is instant feedback and sheer build time. But you can also directly import assets with Sketch and keep iterating on them.

Henny Breijer

It's all about Agile.. Framer is perfect for that !

Damiano Gui

Thanks everybody for the feedback! So, here's my first attempt: http://share.framerjs.com/xjn426lpe9e0/

Read the entire post on Facebook