prototyping with framer x without programming skills
Last updated: 23.02.20
Framer’s main benefit consisted in creating animated and interactive prototypes. A renewed version of the design tool now empowers code-averse designers to thrive.
A design workshop to prototype with Framer X
As soon as we learned that the Ironhack team was organizing some design talks in the auditorium of the Matadero arts center in Madrid, we at Píldoras UX didn't hesitate to attend the event. We were eager to learn more about the new Framer X prototyping software.
One day before the event, all attendees were given access to the beta version as a surprise. The organizers also recommended us to bring our laptops, since they were going to give us a workshop so that we learned how to use the new program.
Why Framer evolved to overcome coding literacy
For those of you who don't know Framer, I'll tell you that this program broke into the design scene a few years ago, offering a new way to design navigable prototypes with possibilities never seen before. Its great advantage was that you could make animated prototypes that were almost identical to a real application.
Because of this, the founders announced a few months ago the creation of Framer X, an application that offers the same possibilities as the parent program but is however much easier to use.
How does Framer X work?
At first glance, the interface is a bit reminiscent of Sketch, not only visually but also in its ease of use.
In her presentation, Aroa Gil explained that you can either import designs from Sketch or even design directly with Sketch. The software also has advantages such as being able to move elements within a design while maintaining spacing, thus saving designers a lot of time. Framer X aims to allow designers not only to animate the prototypes but also to design them directly in this tool.
In the left sidebar, you can find several menu options: tools, layers, components and a store with access to components already in use.
The components surprised the audience because they were something new in Framer; these can be of two types: design or code. Framer X components are fully interactive and reusable items that can include everything from live maps to real data and media players. You also have the option to create your own components with the advantage that Framer makes them responsive. By pressing command + K on your Mac, you create a master component (equivalent to a symbol in Sketch).
The existing components in the library are all responsive and the tool lets designers change the colors and text on them just like you do with a Sketch symbol.
The Store is free and also boasts a private area. It features basic as well as more complex components such as those for YouTube or Spotify. These really work just by changing the URL, which is great!
And here comes an interesting point... Framer X allows designers to work visually and generate React code without a developer. They can create UI elements and animations that send TypeScript for the transfer. I can imagine this being a comfortable way for visual designers to jump in the deep end of working with code.