Framer, from prototyping to production
Wouldn’t it be great to find a tool that allows us to create interactive prototypes that allow stakeholders and users to get ideas of your designs, without typing any single line of code (unless you want a specific and sophisticated animation effect) and being able to import wireframes from Sketch?
So good news, it exists and it’s called Framer .
And here’s a little example you can find on Ross Fenrick’s article of what you can get from this cool tool:
I guess that your face right now must be something like this…
But let’s calm down a little bit… As the title indicates, this article is not about the analysis of each feature of Framer but to answer the question that comes to our head when we start using this amazing tool: ok, I made a great prototype, my client loves it but… can I export my prototype directly to web/app or do I have to code from zero ?
When we design our prototypes with Framer, we are going to generate unconsciously or consciously (because we can code or learned how to do it ), a block of code (click on “code” button on the top right side of the screen to see it).
In case that you are prototyping a website, I totally recommend you to do it with js2coffee 2.0 (see screenshot below). The only thing you will have to do is paste de code and… voilà! There is your JS code ready and steady to be implemented in your site’s code.
For those who are using, Framer for prototyping an app (actually I guess it’s going to be the vast majority of people who are reading this, things are different…
When it comes to native iOS apps, it’s not possible to use any code directly, but in case that your prototype would have some algorithms in it, you might be able to export them to Swift (or even Obj-C).
We must remember that despite it is until certain point use Framer for “production” , this tool was conceived as a prototyping tool, a quick way to show our team mates and clients (users, stakeholders…) what kind of interactions we want to use.