Framer: The Empire Strikes Back
Framer raises again the strike between designers and code
The Saga
Once more, we come back to the same question: Should Designers need to know how to code? I wrote an article about that some years ago(the article is in Portuguese, but I will put an English version, soon).
I've been working as a Designer for 11 years, and every now and then I see myself in this same position. Should I know how to code or not? The first moment that code appeared in my life, it was a necessity to learn HTML/CSS. I can create wireframes with more interactions giving developers enough information to get started, and the best part, I don’t need to specify everything and answer all the questions about each point of the interface.
Later on, I started to work with mobile and again some companies expected other kind of code skills as( XML for Android and Xcode for iOS). Years later, we entered in the Sketch era, where designers were more focused on the interface experience and visual and not using code at all, that means, using prototyping tools that don't demand any knowledge in coding as Invision.
But it didn't take long until I was faced with coding again; another tool called Framer brought me close to coding again. This time with Javascript, a language that some designers who focus more on web design have already been dealing with, but this was not the case with me, so when I looked at Framer for the first time (because our Design Team at Freeletics decided to use Framer as our default tool to prototype) at first, I was a little scared with the necessity to learn Javascript, which was not as simple a language as HTML/CSS.
But to be honest, I've always liked the idea to learn code and use them on my projects, one because I've felt more closer to the developers from my team, and as a Product Designer, I can know and understand better the necessities from developers and avoid statements as " This is not possible to be done" or " This will take too much time". And second because I think learning new languages keeps me more closer to build better interactions in my projects, and understand my limitations inside each project.
The Force Awakens
Searching about Framer, I saw how powerful this tool could be and how much it can be helpful for my future projects, so I've decided to accept the challenge and now I am learning CoffeeScript (language that compiles into JavaScript) and it is used in Framer, of course.
To help those who are starting with Framer such as myself, I will include some links that I've found on my journey. (Feel free to comment with more links and I will add them here, in this post).
Before Starting
Get the Framer 14 day free trial here or If you’re a student, email Framer with a copy of your proof of enrollment and receive a 50% discount before you purchase.
Free links:
Framer Docs
Getting Started Guide
CoffeeScript Guide
Framer Tutorial Videos
Paid Books
Framer Book
CoffeeScript for Framer
Paid Courses
Rapid Prototyping with Framer - O'Reilly
FramerJs - Udemy
UI Prototyping with Framer.js - FrontEnd Master
Youngling — My First Steps
My First Question
Should I first focus on learning Coffeescript or should I go directly to Framer and look for some tutorias?
My process
1- I've Started a Javascript course using CodeSchool. You can even start a direct CoffeScript course for free there. I did that, just to get used to the language.
2- I bought and have started reading the FramerBook. It's helping me a lot at this first stage, so, I highly recommend it.
3- I am doing the tutoriais in the book and also different tutorias that I find on the internet to really learn the tool and be able to do my own ideas later.
That's it for now!
I will write more articles about Framer and the things I am doing to learn this tool, with links, tips and the problems that I will find on my path.
So, keep tuned!
Checkout my Dribbble (soon I will put my tests using Framer)and share your thoughts with me on Twitter. I’d love to hear your feedback as well as how you make prototyping a part of your design process!
Thank you for reading! If you found this helpful or interesting,
please hit the ❤ button below.
