Fast paced prototyping with Framer X

Jake Bishop

So what is Framer X? Essentially Framer is an application that allows for UX/UI (User Experience/User Interface) app design in a straightforward way. For a more detailed explanation of the application, we asked Jake from our design team why he chooses to use Framer for his design work? (Spoiler – it’s for rapid prototyping).

FRAMER AND SKETCH?

To kick it off, Framer has a similar interface to Sketch, another application that allows for UX/UI app design prototypes and is a well-respected platform. With Framer being so similar to Sketch, it cuts the learning curve when switching to the platform, adding to its overall speed and usability. Framer works similarly to Sketch then, however, it allows for more complex (high fidelity) prototypes, complete with scrolling and interactive elements, that usually have to go through an application such as Flinto to achieve in a prototype. Framer allows for high fidelity (detailed and intuitive) prototypes, which can then be passed onto the developers. The speed of designing using Framer gives the team a rapid development stage (the stage of prototype design and development) getting to a viable product efficiently (if you are lost on the stages of app development, take a look over our getting started blog)

app prototype development using framer to create designs
app prototype development using framer to create designs

THE PRO'S

Framer also allows for an organised workflow, making usually mundane tasks such as scrolling or linking fast and simple. This organised and all in one approach gives Framer a strong advantage over Sketch, as it allows for complex prototype design in one place. Framer also has other features such as the components store, which allows you to bring in premade assets to your prototype for commonly used features. This is massively useful for saving time and reusing assets across prototypes. This also ties in with other features from Framer, such as automated layer nesting, stacks and components. These also help loads with time saving, especially with features such as the layer nesting, which automatically brings together layers that are placed in the same object, meaning that you can quickly move objects around without having to manually link or group the layers. Framer is also built around the React framework, this is great for developers, and gives Framer masses of potential for designers that have an understanding of React. This also improves the overall time frame and allows for a more intuitive design/development stage.

application development using framer to design prototypes
application development using framer to design prototypes

THE CON'S

However, Framer isn’t perfect, there are a few things that can make the experience frustrating. For example, the performance of the application can be infuriatingly laggy when working with many frames, something that is often the case when working on complex prototypes. This can lead to slowdowns when working on large projects, a designers nightmare.

 

The other thing to bear in mind with Framer is the fact that having knowledge of the React platform is greatly beneficial for more complicated features, limiting your abilities if you aren’t familiar with the framework. However, if you work alongside React developers, you can really take advantage of the application and use Framer to its full potential. A great example of this is when Jake and Marco created an interactive live video stream, allowing users to comment whilst the video was playing. This feature was built so it could be repurposed, saving even more time in the future. This heavily utilised React, and would not have been possible without the framework, or Marco’s developer experience. 

 

Overall, the benefits of Framer really do outweigh its performance issues, which are constantly being improved upon with updates and fixes. Framer is a great work in progress and definitely seems like it is the future of UI/UX  design, especially for teams using the React framework.