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.
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.
But not everything was bright and shiny in Framer. To be able to use it, designers needed to gain some minimum knowledge of front-end development (CSS, HTML5 and some JavaScript). Many of them were not willing to acquire that knowledge and preferred to continue using other programs to create interactive prototypes such as Marvel or Invision.
During the talk, we were told that the founders of Framer were two Facebook designers who, tired of making non-interactive prototypes, decided to create a new program. Only later did they notice the problem that Framer was a difficult program to use for designers who did not know JavaScript. Many designers would log in two or three times and never come back. In the end, the software was used only if it was necessary to create complex prototypes and by designers who knew some code.
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.
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.
That's a wrap for our introduction to Framer X. I leave you with further reference material on initial impressions of Framer X as a potential competitor to Sketch, as well as an article on its benefits for designers and developers.
Originally published in Spanish in “Píldoras UX”.
trendig
