Design Everything
How Framer is bringing the power of code to designers everywhere
Framer is one of the most powerful creative tools today. Because it is code-based it is extremely flexible, allowing people to design everything from mobile applications to VR experiences, from games to Apple Watch prototypes. There is a good reason it is one of the most loved tools of Silicon Valley’s top design teams.
Unfortunately, being code-based has also meant that Framer has had a very high learning bar. If you didn’t know Javascript, Framer required you to rely on templates, help documents, community questions, and many Google searches to make it work. For many, this process proved too frustrating and they gave up on Framer completely.
Today, that all changes. With the new Framer designers can now create and manipulate objects with the simplicity they expect from their design tools while still retaining the power and flexibility of code. There are a few reasons why we’re very excited about this:
Accessibility
The new Framer brings an incredibly powerful design and building tool to many more designers, engineers, product managers, and makers because it is easier to learn and use. It’s like when operating systems went from a command line interface to a graphical user interface and made computers accessible to millions more people. This is that path for advanced design tools.
I’m pretty surprised by how little I need a standalone visual editor — Framer takes me 90% of the way there by marrying code with the ease of use of direct manipulation for the most common properties (size, position, color, border etc) — Josh Puckett
Speed
By letting you directly manipulate objects the new Framer allows you to explore your ideas way faster. Think of the difference between using a scroll wheel on a blackberry and an iPhone touch screen; the latter is a much faster way of interfacing with content. For designers that spend much of their day in this part of the workflow the new Framer has potential to significantly increase their output speed.
“I’m already finding myself moving twice as fast when putting together high fidelity prototypes. Before I had to rely on sketch to make sure that my layout was set up correctly, but now I can just quickly drop in an image and position it as I want, and animate it to the correct spot without any guess work or code.”
– Noah Levin
Ideation
For many, the new Framer interface will significantly improve their ability to come up with new and better ideas. The reason is simple — explicit and accessible choices incentivize exploration. For example, when selecting a layer you are now given a menu of manipulation options — color, opacity, blur, grayscale, etc. Without this menu you might draw upon your existing knowledge or habits to manipulate that object. Seeing the choices in front of you, however, opens you up to exploration: “What if I tried making this object black and white? What if I tried blurring it to create depth?” The menu options act almost like prompts urging you to explore possibilities.
Framer now lets me try see variations and ideas much more quickly, which leads to more interesting prototypes.
– George Kedenburg III
Knowledge
One of the “byproducts” of Framer has been that it actually teaches many designers to code, an extremely valuable skill. This version is even better at teaching people as you can clearly see how your manipulation affects the code. By making Framer more effective at teaching and more accessible we hope to bring the knowledge of code to many more people all over the world.
What I’m most excited about though is how this will help me teach Framer to designers who are new to programming. The barrier to entry just got way lower now that you can create animations without having to touch much code at all! Such a great way to ease the transition from visual editing to bringing things to life with code.
– Noah Levin
Framer Tips from Our Experts
We asked some Framer experts to share some Framer tips they want more designers to be aware of –
Utilize Loops — Josh Puckett
Editing directly while in a loop is amazing, and can be incredible powerful. If you’re working on something that’s repeated such as items in a list, grid, or collection, constructing them with a loop allows any changes you make via direct manipulation to be applied to every item within the loop. Unlike traditional visual editors, this means you can make a change once instead of many times.
Name Sketch Folders for Framer — Noah Levin
I often name my folders in sketch with the intention of grabbing them in code faster / in groups when needed. For example, with big tap targets, often times you want to draw rectangles that you can click, but make sure that the user can’t see them. So for that example, you can use indexOf() to hide all of your click targets, saving you time later on:
for layerName of sketch
if sketch[layerName].name.indexOf(“Target”) != -1
sketch[layerName].opacity = 0I’ll also do this with buttons where I want the same pressed state animations to apply, or On/Off switches where I want to toggle views.
Framer is Javascript — George Kedenburg III
I think a lot of times people forget that a Framer project is really just a website. Any cool javascript or front-end thing you’ve seen or can find on the web, you can do in Framer. Don’t feel limited by the docs!
Build Flows — Chris Camargo
Even though it’s not well showcased, Framer is an awesome tool for building deep flows with rich interactions that go well beyond isolated micro-interactions or animations. And since it’s all code, you can enlist the help of modules written by the community and create really complex interactive components and fully functional prototypes by just writing a fraction of the code it would require, had you written it yourself from scratch. Repositories like http://framerco.de are great resources for modules and components that you can apply to your own prototypes.
Ask for Help — Jordan Robert Dobson
Always remember you can take your prototype questions to the 12,000+ people in the Framer community. Just make sure to give a solid example of what you’re trying to do to get quick help. There’s a lot of talented people, beginners and experts, coming from numerous backgrounds related to design and they’ve all been at the same place you’re at and are willing to help. You just have to ask and present the problem clearly. If you can’t share your prototype break the problem down.
As your prototypes get more involved, use print() and console.log() to prove what you think is happening is actually the case. This is very important when first exploring loops and events. Using those two methods helps you to think through the problem as well as explain your thinking to others.
