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).

This code is written in Coffeescript, a language that can be compiled into JavaScript.

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.

easy peasy lemon squeezy!

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).

In case that you were designing an HTML app, things can be a little bit smoother and you can re-use part of your javascript but keep in mind that dependencies on Framer will probably have to be replaced.

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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.