Presentation of Framer X Beta at Iron Hack’s Saturday event

Last Saturday, 8th of septembre 2018, I went to an Iron Hack event. Iron Hack is one of the most important community of digital professionals and students here in Madrid, since its main activity is to teach processes and best practice to the future UX-UI, web developers (they mean front end engineer. We really should pay more attention to the vocabulary since, in reality, everybody involved in the developement of a product IS a developer…), and Data analysts.

They also organize paying events, open to the public (you can check their meetup page), during which ones a specific topic is talked about. Last Saturday, prototyping was the highlight of the morning, several speakers shared the processes and major real life problems encountered between programers and designers. That’s always nice to see that we all go though the same shit and listen to the way each other are overcoming those issues.
That being said, what has really captured my attention was the Framer X Beta presentation. Framer X is a new version of Framer which aim is to close the gap between designers and engineers I have just talked about.

I was mesmerized  to see how people was overwhelmed by some small functionalities and so calm before the important, not to say, game-changing ones.
The most visible the functionality was, the most impact it had; designers are still their own best clients I guess,… In fact we could hear claps after a fluid drag and drop funcionality demonstration, while embedded interaction in the components and the possibility of customizing or creating some, let the public cold.

Let me explain those improvements which make Frame X the most efficient UI software so far.

  1. The fluide drag and drop functionality has been integrated as a native interaction available directly in the workspace / main frame panel. It makes it easier to change the layers position as the other elements instantly moves around it in order to avoid overlap o void spaces.

    demo Frame X Beta drag drop funcionality
    The fluid drag and drop frame in action.
  2. The interactive components and the design store, which gives designers’ access to a set of living* components from well-known compagnies like Youtube, Spotify, Unsplash, IOS,… (of course, Framer makes it possible to create a company’s own set of interactive components) are a gigantic step forward to simplify the propotyping and its conversion to a final product.

*But what’s about the living components, as I call them?

Those are components which include code, they are not just a image. The code allows them to be animated or customizable, for instance, a loading component will actually be moving, a switch will show the transition on click, and the youtube video have an open url and the native control panel so that the designer can play the right content, and pause it if he want’s to.
So with we don’t insert in the design some fix images, but a fully interactive component.

Demo of the interactive component. See that when the video components is selected, it is possible to change the image from the right panel (source / path url).

The live prototyping is also pretty awesome because, not only we can create one by linking the layers between each other by clicking the initial element, component or view and the final one (as it’s the case in Sketch), but you can also add an effect on them, something that I was desperate to do until now! For instance applying a bouncing effect to a button by clicking on it.

Those big improvements are due to the introduction of React whitin the component. And to be kind of totally revolutionaly, Frame X Beta, offers the possibility for designers and front end programmers to cutomize their own component. Interactive, and codified components are NOW available, which means more freedom for the UI designer, and short cut in the process of programming.
React is a perfect solution for designers like me who are familiarized with javascript, the code is so much cleaner, it is also great for people willing to be more in control when translating the prototyping to a final product.

One down

What’s easily accessible in Sktech, I mean categorizing symbols (called components in Framer) thank’s to the nomenclature, is only possible in Framer X Beta by customizing the code. I guess they will work on it soon, because that seams to be so basic comparing to the huge new functionalities of the X version.

React code Frame X Beta
En code excerpt from the Framer X Beta demo which shows how to customize the Frame X UI panel. It reminded me of the widget creation process in WordPress, on a lighter scale (here we only edit only file.)


With the Framer X Beta, the gap between design and front end programming is shutting down. 

Spread the love

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *