Everything is Auto-Code
Last week we witnessed a beautiful moment where the prototyping community collectively shit their pants by the introduction of the new Framer, with Auto-Code. From Koen’s post:
Code is an incredible tool for expressing complex interactions, but there are better ways to do visual design. Starting today, Framer gives you the best of both — the power of code combined with the ease of visual editing.
😭😭😭
They get me.
My first website was visually conceived using code, and so were most of the subsequent ones. I loved it, I had full control. Elements were organised using logic and code that made sure there were no stray pixels. No lost empty rectangle with no fill that was a bit too far from the artboard. I was building and testing the limits of the DOM as I drew my elements. I had barely started dipping my feet into user interfaces and suddenly I had all that power. CSS was love.
As projects got progressively complex this practice became harder to maintain. Working with clients and other designers, building UIs for different platforms, a lot of factors made it obvious that in many situations designing in the browser was not solving the problem in the most efficient way. And so I went back to the old ways of using graphic design tools.
Jump to today, we’re mostly using a combination of a visual design tool and a prototyping tool to bring our designs to life, my choices being Sketch and Framer. This setup has been working very well for me, even though several times a week I have small frustrations about having to recreate elements in Framer because I need to manipulate a shadow or control a background blur, for example. Most elements I use are not native from Framer, they are flattened Sketch PNGs.
Enter Auto-Code
With the new Framer you can now create and visually manipulate elements directly on the canvas and on the new property panel.
Doing fine positioning and style tweaks is now much faster and you get immediate feedback on the canvas. And as you do it, the code is being written for you.
But if you look deep enough, Sketch is also writing the definition for everything you draw in code somewhere. Also Photoshop. Also every text editor. And also every app that ever saved a file since forever. We’re just dealing with different levels of abstraction.
In a way a lot of apps allow us to see some code version of what we create.
Every application that has a WYSIWYG interface is writing code, they just don’t show it all the time or let us edit directly. Framer just turned into an application with a WYSIWYG interface that does show us the code and encourages users to manipulate it. Good looking syntax-light code.
The beauty is that we can jump into it at any time and use things from the code world, like loops. Reusable elements. Variables that propagate our choices throughout our project. Dynamic content being pulled from anywhere. Constraints.
It’s possible to achieve a lot of these in Sketch and Photoshop with plugins, but the focus of those apps are different, hiding the code is the point in most visual design tools. I want to see.
I’m impossibly anxious to start fully designing my projects in a single tool that allows me to manipulate the code it generates so that prototyping interactions is even faster. Framer is not fully there yet, Auto-Code is in its early days and there are lot of concepts that need to be brought over from other tools and rethought so that a complex project can be maintained completely within Framer. But reading the team’s answers on this AMA makes me believe that this transition is happening. What a time to be alive.
