Framer X Initial Thoughts

19 Oct 2018
Emily Fraser

Framer X – just another prototyping tool?

 

When I first heard about Framer X, I have to admit I was a little bit sceptical. With new prototyping tools coming out more frequently than I binge-watch Netflix, the perfect design process can differ massively from one agency to another. However, in most cases Adobe still continues to be the creative backbone to most projects.

 

What would make Framer X my hero

 

So, what are the shortfalls in the current programmes? I use Sketch and Adobe and I love that Sketch integrates with InVision so well, it allows you to use ‘Craft’ to make functioning prototypes that can really help to get a sign-off from clients. I have also found that, in most circumstances, clients love to use the comments feature. This feature not only enables them to leave their feedback but also allows me to manage the feedback more effectively rather than having long, never-ending email chains. I would definitely like to see the same level of integration with InVision as I do in Sketch.

 

Sketch is also great in other ways, such as allowing me to make ‘Symbols’ for different elements. This really helps if you need to update one component across multiple screens. In addition to this, Sketch also has ‘Anima’, which is really useful for creating simple animations to demonstrate how certain parts of the design should move or interact.

 

However, changing height components is one feature that I’ve found to be not so intuitive. Currently, when updating components to a different height, you then need to reposition other elements manually, which can be time consuming. The thing that attracted me initially to Framer X was the fact that the elements would dynamically adjust, so the design was instantly modular and effective, or at least that’s what the shiny marketing videos promised me.

 

Initial thoughts on using Framer X

 

The intro screen, the first thing you see when using the tool, is simple, clean and gives you instant links to a whole bunch of resources to introduce you to the tool. I have to admit, as I’m usually the type of person who skips the IKEA instructions and goes straight to the building, I think a good tool should have all the basic UX awareness so that it seems familiar to a designer instantly. So, being the impatient designer that I am, I’m going to go straight into the tool. However, it’s good to know that all these resources exist.

 

 

The initial screen when creating a project is pretty simple, very stripped back. The tool tips, which help you understand what each icon means, are really handy. To the left there are ‘Tools,’ ‘Layers’ and Component, with components being the same as ‘Symbols’ in Sketch. Then top right, ‘Preview,’ ‘Live Preview’ and Support. Simples.

 

 

The store looks impressive, with lots of free resources that you can add to your project. I tried out the Web UI kit to get an idea of how these packages work with the software. It’s really simple to add the ‘frame’ and choose from a number of devices, similar to Sketch. Also, it is also really simple to take components from the Web UI kit, I just installed and added them to the ‘frame’.

 

One thing I liked about the tool when watching the marketing videos was the fact you could add animations, GIFs and videos into the prototype within the tool. This is something you can do through Anima on Sketch however, it requires publishing a preview to actually be able to see the video playing.

 

I installed ‘Giphy’ from the store to see how it works, having previously struggled to get GIF plugins to work on Sketch. I added the ‘Giphy’ element to my design, and voila! I had a series of cat GIFs playing on the prototype, the dream. I am pretty impressed with how easy it was. There are also Vimeo and YouTube plugins, along with a whole host of others, that seem to work just as well in addition to playing instantly in the design tool. I likey.

 

 

Now to test out the Interaction tool. There are two options in the ‘Interactive’ category, ‘Link’ and ‘Scroll’. Link seems pretty self-explanatory but Scroll? I’m not so sure. Trying to use the Scroll tool without watching a video didn’t go so well, so I admitted defeat, I needed to watch a tutorial video. At least the training videos are short and well categorised, so you can cut to the chase. After watching a short tutorial, I learn what the ‘Scroll’ is. This function allows you to dictate a scrollable area, and then link the content you want to appear on that scroll from another ‘frame’/artboard.

 

I also discovered I can add links really easily, but it’s not clear at all how to delete them, every time I clicked on the link, it just allowed me to reset where the link is going to. Not ideal. After looking into this online, there doesn’t seem to be any clear instructions as to how to manage these links. Eventually, I found the link options in the right-hand side, not totally intuitive and certainly should be something covered in the training video.

 

Next up, I looked into the ‘Stacks’ function. The Stacks tool in Framer X is a smarter way to design layouts, all powered by Flexbox. Use Stacks to easily distribute, position, and rearrange layout elements evenly on your canvas’. I have to admit, this feature is pretty good, it allows you to update the page layout and for the other elements to dynamically update with it. This feature is really good and definitely something that I was interested in when I first saw this tool come on the market. It’s easy to use and very effective.

 

Finally, I checked out the preview tool. With Framer X’s preview tool, you can preview the prototype on any device and share a URL with the functioning prototype which takes InVision out of the equation. However, it also takes away the commenting feature that has proved useful for clients to feedback.

 

Conclusion

 

As much as I’ve found Framer X to be an interesting tool, I think the true test would be to use it in a project setting, but as there is only a short trial period of 14 days, it seems unlikely I’ll get the chance to use it as once you start building a prototype in one tool, you’re tied into using it for the rest of the project. Price-wise, Sketch’s license is $99 for 1 user with 1 year of updates and unlimited use of the tool after that, whereas Framer X is $12/month. Whilst not being too expensive, it is a recurring fee so agencies still within their 12 months with Sketch are unlikely to move their teams over to it yet. However, I will definitely be keeping an eye on the software and perhaps in the future, when some of the less intuitive elements from Framer X have been ironed out, it could definitely be a potential contender

 

No Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>