Prototyping in Framer: Takeaways on the Design Tab
Just recently Framer started a sequence of upgrades related to its Design Tab. Will it become more friendly to designers?
Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →
Current state
Framer’s Design Tab was first introduced in June 2017, and so far a handful of items drives differentiate it from other tools:
Relative layout and parenting system
With automatic behaviors for position, scale and hierarchy of layers, Framer allows designers to build responsive layouts.
CSS styles and filters
Taking advantage of CSS exclusive items, the Design Tab offers several elements right out the box:
Framer's property panel
- 4 different border styles
- Individual radius and borders
- Shadows and inner shadows
- Blur and background blur
- Brightness and contrast
- Grayscale (desaturation)
- Saturation and hue rotation
- Inverted, and sepia colors
The updates
Many of the current features came from updates in the months following Design Tab's initial release:
- Gradients, TextLayer, Blending modes, Blur, Shadows, Filters, Border styles, Export, and CSS copy.
However, a recent community pool revealed that this agenda has slightly deviated from audience's interests:
- Sketch import, Path tools, Symbols, Design for coded layers, Gradients, Project management tools, Export, JS/CS code switch, Component reusability
The Export update in October 2017 is a sign that Framer would rather battle against Sketch than integrate with it completely.
This is an especially strong message, given that Sketch importing was a clear winner in the community pool.
The good news is that, in time, designers will have a powerful alternative to Sketch and Photoshop.
The downside is that schedules are too uncertain to motivate exuberant user engagement at this date.
The boost
November came with big news: Framer teamed with Accel, raising 8M series A capital to boost its growth.
This is serious business. Accel is behind the growth of services such as Facebook, Dropbox, Spotify and Slack.
And the message couldn’t be clearer: "make Framer your go-to design tool from start to finish".
The promise is to target all kinds of designers: product, web, hybrid and rookies. So, yeah, this is inspiring.
Conclusion
The Design Tab is an excellent beginning, but Framer has been taking its time to develop a perfect environment for designers.
Framer’s active community is quite vocal to participate and demand new features, but updates respond vaguely to it.
Recent funding will add stamina to what we currently have. So it’s probably a big time to invest in Framer skills.
Next
Code foundations
The building blocks of Framer’s code. How to identify each and understand why they are used everywhere.
