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

What is Framer? Join the Community
Return to index
Benjamin Den Boer
Posted Jan 10 - Read on Facebook

Hey all! If you have a minute to spare, I'd love to hear how you got started with Framer. Specifically, what made Framer click & stick with you? Or, what made the syntax / code in general click with you? Was it the product, a specific feature, a website or a resource, or even simply out of necessity (work, a client)?

If you still vividly remember your early experiences with Framer, please do share. Anything we can pick up here is valuable. :-)

26 Comments

Koen Bok

Something I often notice is that just not having an idea what to build can block someone from experimenting. Can you remember what you built first?

Atulesh Bhardwaj

I started recently. Before Framer, Principle was my choice. Its a good tool, but due to limited tutorials and no clear directions, I felt lost. Framer was little better in terms of community sharing their knowledge and learning it. However need of detailed courses or tutorials is highly required. Please note I dont have any coding knowledge apart from HTML/CSS (No JS).

Jordan Robert Dobson

I started back before Studio and it was that it got me up and running and expirementing very quickly.

The project before my first framer prototype was a HUGE HTML /CSS / JS authoring prototype proposal for tablets / desktop / phones where I had to setup up everything, even the basics.

Framer made defining all the UI states, animation, layout on my next project so much simpler. I could focus on the HOW instead of spending all the time setting up for HOW something should work.

My ability to experiment on live interactive concepts probably tripled. I had more time and tearing down and setting up a new version was far less effort.

For me it was a basic account toggle with a list which examples got me setup with in a day or so. It was slow but I was still learning.

Stephen Crowley

I think Jordan and I started using it at the same time? I remember it was a small group sharing how their environment was set up to do things we take for granted today like refresh when writing code but at the time we could only reload the project when saving so we were hacking it to save at an interval. I remember wanting phone templates for presentations and Tisho had put some together to include in his projects and shared with the group. Everyone was excited about that, haha. ...Or code completion for Framer.JS in Sublime.

The company I worked for wanted everyone using the same tool (Axure) but it couldn't do simple interactions well or conducive to how I wanted to work. I liked writing code, it allowed me to iterate fast and experiment so I would have these templates saved with html/css/JS libraries hooked up so I had a place to start. I saw Koens framer.js library and video demo that showed importing from Photoshop and it did all the heavy lifting for me. There wasn't anything like it at the time, it was amazing.

My first project in Framer was a scroll feed and a menu toggle with some high-fidelity design elements to convey an idea- this was after the VP of our org asked if I could put together some mocks for something I pitched him earlier. Only had a few hours and if it was good he'd throw it out there to our CEO during his meeting later in the day. I was able to churn through several ideas quickly and since Framer was web technology it was easy to put it on the server and load it on my VPs phone so he actually could interact with it and not just interpret the flow from several screens. It was so responsive him and the CEO thought it was a native app seeing it for the first time.

Kevin Growney

I just started diving into Framer and have a lot of progress to make, but I've been working on lessons with my nine year old. The simplicity of Coffeescript and quick prototyping keeps his attention and makes it fun to visually see our progress through the lesson.

Luca Galvani

I started when I purchased Sketch... I saw some articles on the web, and loved the flexibility when importing my designs without much pain... The first thing I tried was to setup a project based on gulp.js that refreshed my animated designs in the browser on save... I recently jumped on the code-wagon, so I tought that Framer can be cooler than other sw because I had to learn how to do it from scratch in code... Btw, coffescript is sure great, but what about some es6 in the future? :)

Ed Chao

I started using Framer shortly after Origami. I switched fully to it because it was a more familiar experience for someone who had done front end web.

Over time I became invested in Framer because of its flexibility and lack of prescriptiveness. I spent much of my initial experience seeing how far it could go. The fact that I never found a limit kept me interested.

Funnily enough, Framer became a part of my design process because of the start speed.Today, I still believe one of the major obstacles to web development is the setup. The fact that package managers and task runners exist is a testament to the fragmentation of web development. Framer Studio was a game changer for me because it made code instant to start and required no additional libraries.

Concerning code education, Framer was the first place that I felt like javascript was easy (partially thanks to coffeescript). By instantaneously presenting the result of your code, Framer made the abstract concept of an object concrete by immediately presenting it as a visible layer. It is far easier to understand moving a layer than manipulating a data object. (This is probably an 'aha' moment for folks who are new to code, to see the result of their code so quickly). Secondly, Framer's way of handling state for you removes a huge barrier in terms of programming complexity. To this day, you can create most prototypes with layers and states. Lastly, Framer's community was highly engaging, and the sharing of prototypes for anything and everything was a deeply educational experience. A wonderful part of the Framer community in particular was that it was one of the few where people often asked ultra basic questions, which not only made it non-intimidating but also encouraged beginners to help other beginners.

Dave Crow

I experimented with Framer before Studio came out, but I really struggled with the Javascript syntax (I've made several attempts to learn).

So I started using Pixate and became pretty proficient with it. Pixate basically gives you a GUI for setting up events - so it kind of acts as a primer for working in Framer. Also, using conditionals in Pixate introduced me to some basic coding concepts (you write the conditionals in what seems to be CoffeeScript or something very similar).

Working in Pixate gets VERY repetitive. There's no way to copy/paste animations so I would end up building the same animation over and over on lots of different elements.

After trying a few other tools, I gave Framer Studio a shot. It made a lot more sense after working in Pixate for a year. Using CoffeeScript made the code much more approachable. I could finally copy/paste animations!! Then I learned about loops, arrays, and functions and things really started to open up. The CoffeeScript for Framer eBook really helped me understand these concepts. The other big thing that helped was seeing things update immediately when working in Studio.

Building prototypes, getting stuck, and then getting help in this group and in the Slack channel have been really valuable. Knowing that I'll be able to get help from the community pretty quickly has given me the courage to explore more advanced coding techniques.

Josh Lee

I had prototyped before in Origami and had enjoyed it, but wanted to learn Framer because of the transferable skills it would provide me. It also seemed like the team (you guys!) were adding things constantly and the community seemed strong.

The first couple weeks were pretty hard -- just trying to grasp what states were, trying to build a conceptual model of what a scroll component was, etc. I think it's improved now, but I also remember going to the examples on the website and being intimidated by how complicated they were. I also struggled in the beginning with Sketch Import which was frustrating (I actually still do, I usually export to images and drag in)

Like anything else, I think it just took time and weekends just playing around with it / making random prototypes for fun to figure out what was going on. Luckily a few people I worked with used it so I could use them & this group for resources.

Maurice Zur Weide

I have always prototyped pretty intensively, back in days with Flash & Actionscript. Of course, flash died ages ago and I did quite some stuff in Axure. Then Sketch came along and I was looking for a new tool to do the prototyping. Framer looked promising, especialy the examples sold me the product. But the examples did not help me that much with my own projects. Too complex, too time intensive and it did not answer my questions. I let it pass. Work "demanded" from me to create much more dynamic prototypes and maintaining axure became a nightmare and Xcode was to difficult. Back to Framer. This is when I discovered the Facebook group and people posting similar problems I was facing: How to deal with gestures, how to create complex flows, how to do material design transitions etc. This stuff really helped. But i still wish there is a better platform besides facebook to find this stuff. And I wish there are some more "Howtos". Coffeescript also has its peculiarities (hello scoping) so maybe also a section with "pitfalls". It was in the beginning very frustrating to see simple stuff not working and coming down to weird syntax problems. But the general framer syntax was easy to understand. It was easy to see how the state-system is very powerful.

George Kedenburg III

i remember watching a sweaty Koen on vimeo explaining framer and that sold me pretty much instantly tbh

Giovanni Caruso

I started just out of curiosity after some headache I had using Axure RP for mobile prototypes. It was my first approach to code – exception made for a couple of hours on Codacademy. It was a huge challenge (and it still is) but it was also the perfect tool to demonstrate the value of prototyping to my former boss (at least in terms of transferable skills and code blocks :) ).

I’ve attended Jay Stakelon online course, bought The Coffeescript book for Framer and Adria Jimenez lessons on Udemy. I still have troubles but I do love those “ah-ah” moments when you find out how stupid was the solution to the problem you were facing (big up to the community). Tried other tools – Origami (too messy for me), PrincipleforMac, Pixate, Form (same as Origami + cool features) – but still prefer Framer.

Currently I'm using Axure since working mostly on desktop prototypes. I still rely on Framer to show micro interactions dev team could immediately implement. Would love to see a better support to desktop prototyping as well as the release of a customisable “native” UI components library (IMHO it would dramatically speed up the whole process).

Daniel Kamphorst

Mainly because of the possibilities Framer offers (I don't have to deal with any constraints or limitations while prototyping), my love for coding, the whole look and feel of Framer and the website (which is very nice: I love beautifully designed things) and of course: the lovely community.

Sergey Voronov

i was in love with the site first of all) then tryied couple of examples and start digging, wanted to join london event on summer, but had running injury so failed , then ocassionaly was invited to speak at london framer event in november, so sat down and start learning things fast)

Darvinder Singh Kochhar

A gentleman from Dribble told me about it at first and when I looked into it, I fell in love with the scope of what Framer can achieve with prototyping. I am using it to build a high fidelity prototype for my current project and I know for sure that I will be using it for my future projects as well.

Andrew Nalband

The biggest resource that I used was actually the "Learn" section of the Framer website. For the first several months of using it, I was constantly cutting and pasting code snippets from there. After long enough tweaking those things I got more and more comfortable writing them on my own. I've always felt like the learn section and those code snippets should be more tightly integrated into the initial experience with the product. Specifically these three sections provide an amazing foundation in getting started:

Layers
Animations
Events

If I were you guys I'd have those three sections built right into the initial experience with the app. Make a layer, set an event, and animate something as a result of that event. These are the foundation of every interaction.

From there, scrolling, dragging and pages are a natural extension.

Let me know when you want to hire me and I'll show you exactly how to do it. ;)

David Louie

I played with Framer, Pixate and Marvel in mid 2014. Marvel was too limited. Framer was too complex. Pixate was a good balance of GUI driven and power. But I hit a wall with something I was trying to do in Pixate - it may have been a more complex interaction or the fact that Pixate only supported mobile prototypes and not web apps early on. I decided to give Framer another chance and walked through this tutorial on Medium. That tutorial cleared up some basics that I was struggling (coffeescript vs js, some import issues) with and I just kept going. https://medium.com/@kennycheny/creating-your-first-prototype-with-framer-c39221da7668#.th68smm9i

Blaine Billingsley

For me, I remember checking out Framer and having very little coffee script experience. I could hack a few things in jquery but not much. I loved how by copy-pasting a few pieces of coffee script and importing a few images, I could make little micro-interactions to show people. You needed very little code to do something. But as I progressed and learned (thanks big time to the examples and Min-Sang Choi's tutelage!) Framer was able to grow with me and allow me to do more and more. It was the only tool I've used that had a relatively low learning curve to produce something simple, and would expand out almost to the point of creating a functioning app communicating with a back-end, etc. It's been really amazing and I've improved my javascript along with my conceptual thinking and design chops.

Siavash Shabanipour

I'd started with QC when it just started to get popular for designing interfaces then moved to Origami. Later I tried basically every other tool until someone introduced me to Framer. I knew some very basic programming concepts but had never touched coffee script. I went through all the tutorials and some other resources.

Eight months later I'm using JSON, making modules and recently started using Firebase as a simple backend. It's actually been the best tool for me as a designer to learn programming because of the instant visual feedback.

Other reasons: it's the only tool that projects are easily shared and understandable, share with clients without any extra apps, you can do basically anything.

P.S you guys have nailed it. I think for me I would appreciate updates to Studio (i.e more elegant solution for making modules) and an iOS app that has better control over hardware and using standard iOS components.

Min-Sang Choi

I was avid Origami user before I switch to Framer. I had vague fear for code because I had limited experiences with javascript. But when Jorn offered to play with early version of framer I was pretty stoked at how it feels similar to Origami in some sense.

I guess Instant feedback was the most important thing for me. Because before framer there’s nothing I can see in early stage. Following course of javascript / Objective-c and whatever, it always starts with basics, not saying that’s bad, but that wasn’t just for me.

I could understand basic concepts of if / for-loop / variables while making dynamic examples and also could challenge for more advanced stuffs like accessing camera-api / google maps and using external javascript library. That was possible because I could see the result on the fly. No need to setup complex stuffs. That gives me a lot of freedom to try things I couldn’t think I could do.

Framer is now settled down with my day-to-day design process, when I finish first draft of mock, I immediately turn that into working prototype. Not necessarily to show off or share, just to see with my eyes. It’s so easy and fast so I can just make everything in one day. Which was un-imaginable before Framer.

Now I’m teaching myself Swift and experiences that I had with Framer is extremely helpful. Can’t thank you enough guys!

Andreas Wahlström

I'd done some html/css/js prototypes and realized that framer would bring the same kind of flexibility but in a more approachable way. No separate markup or css, easier positioning, sketch import (via the unofficial plugin) and basic animation was what sold it to me (besides being based on web technologies). Didn't need to build complex prototypes again for a while, so I stuck with Invision for day to day use. Finally three projects at work needed some extra fidelity. First was a crossword app where we tried to figure out the keyboard logic. Which field to highlight when. How to switch rows etc. Impossible to do in a believable way using Invision or similar tools. Then there was a multi screen project with tons of links everywhere, too cumbersome to set up in Invision - so I build a framer project that linked buttons to screens based on the buttons layer names. Third was a more explorative prototype using a video player. Also hard to do in other tools. I'm glad that I was already confident using framer before actually needing it for work. The learning curve is pretty high - framer studio makes it so much easier nowadays though.

Rick Martin

Unlike most people here (I assume), I'm not really a designer or developer, but I'm more involved in writing, editing, and content strategy. But I feel I can contribute to conversations about product, and products like Sketch and Framer make it easy to go from zero to "a little bit capable," mostly thanks to Adria Jiminez's videos on Udemy. (You should pay that man, btw!)

In short, I think you guys could reach a wider audience with Framer than you intended, if you make the docs a little more accessible to the non-developer. Make step-by-step how to videos, like Adria did. Show people what you can do with just two jpgs and an animation transition. Show kids how to make a frog that somersaults when you press it. This shit is more empowering than you know.

Florian Pnn

Started over 2,5 years ago while working on a new startup (that fail!). We needed to test our flow and in the end have a fully working prototype for a "marketing" video and to help us raise some money. I was not completely familiar with JS at this time (I remember banging my head with the closures..) but it was a clear winner on what was needed : run on the device, easy to tweak and can handle real data (yes already at this stage we were using airline data to have the best prototype we could)!

Dave Tiedemann

Coming from and still working in classical advertising for a very very long time, I was always interested in not sticking to the rules. Now feeling that the classical advertising is coming to end (it seems) and always loved the notion of really making things and producing stuff (and being a hacker back in the days), I made some efforts in the last 2 years (at least) to lern HTML/CSS, but didn't stick to it.
Started with Sketch last year and built some stuff and saw Framer somewhere at the end of 2015. It totally had me in an instant.
All of a sudden, really prototyping stuff didn't seem so far etched anymore. I saw some presentations on YouTube, saw the stuff that Jay Stakelon uploaded on YouTube and it was a no brainer to shell out some dough and buy Framer Studio.
That was last week and I can't wait to really dig into it and to ram Adria Jimenez course into my brain.
I think, for designers nowadays, without coding you don't get anywhere.
It's a bit like in the 90s when older Art Directors weren't able to comp their shit in Photoshop or Freehand or Illustrator or Quark, but us young gangsters did this without a second thought.
Today, I'm the old guy and, man, learning to code is not a walk in the park but Framer mos def helps.

Aaron Paterson

Well. Great question to start. For me as designer when I stumble upon FramerJS in 2014 I loved the design, but was hugely intimidated by my level of knowledge in coffee script. which was non. However, I like the website design at first, then I asked myself how I can us this to show my client my prototypes. So in the end i took the jump knowing this will be a learning curve for me.

Chris Aga

A friend mentioned it, he's worked with many UX professionals and stated that Framer is the goto tool at the moment for UX.

To me, Framer is magic, I'm baffled at how quickly you can go from Sketch mockups to a working prototype.

My approach right now is to spend as much time on UX and Usability Testing as I can and Framer is the best tool that I know of to accommodate this approach.

Read the entire post on Facebook