I’ve finally got access to Framer X again! Unfortunately I haven’t had much access to time. Until I do work up the courage to begin properly learning React again, I have some tools that I’d like to share.

First of all, there’s EasyNav.

Taking it back to the design view

I made EasyNav because I wanted a flexible tool that would allow me to quickly make D-Pad navigable prototypes without having to spend too much time with code. It also lowers the barrier of entry to those who want to use it while allowing you to use Framer’s full feature set if you want to.

How it works

EasyNav reads the document and infers navigation from the position of each Frame. So if you draw a Frame above another one, EasyNav will allow you to navigate up to the frame above it. On top of that, it also allows you to override those default behaviours if you wish to block navigation for whatever reason. You can find more instructions in the example project on the Github page: EasyNav for Framer Studio - Github

TVKit

This project was made to give us a set of standard patterns to use for prototyping at YouView. I’ve removed all of the YouView stuff but it still leaves you with quite a lot of power and has also taught me a great deal about javascript. I’ll post some gifs to show the basics of it:

At YouView we have set these up to work with our APIs meaning we get all of the cloud metadata that we’re not showing here. This means we have carousels that work with Search, Discover, the Main Menu, the Miniguide and any combined mix you might want. These components are also fully interactive. One of the problems I’d started to notice however was how we could navigate between the components, this is where I created Navigables.

Navigables work off of a fairly simple premise, choose the direction you want to go in, then choose the next Navigable you’d like to highlight. An example of this might be

myNavigable.onUpOut(-> highlight.setContext(otherNavigable))

I’ve found it really useful for quickly spinning up prototypes as it allows you to start sending layer-based events based on keyboard input. It also works great with a FLIRC and other controllers.

You can find more examples and code here.

If you try any of this, let me know! I suspect my documentation might trip you up here as I haven’t been the most studious of documenters so give me a shout if you run into any problems.

I’m going to try and find some time for Framer X now, though I’ve got some research coming up and I’ll likely have to fallback onto TVKit as it’s served me well up until now!

---

Published 3 June 2019