Prototyping for TV using Framer Desktop
How we built a multi-page prototype in Framer Desktop at Channel 4, paired with a real remote control
Intro
Disclaimer: This article is based on my personal experiences prototyping for TV interfaces using Framer Desktop. There are many other tools that can be used for this purpose (e.g. Marvel, Webflow, Protopie, Axure, XCode the list goes on…). In my experience no tool is perfect, with each one offering strengths in different areas. Look beneath the surface and you will find that Framer Desktop, armed with specific store plugins, is an interesting proposition when prototyping for TV interfaces.
Some things to consider
- Intuitiveness of the UI — how easy is it for beginners to pick up, and what extra flexibility does it provide for power users?
- What features are available that could be useful when prototyping TV interfaces?
- What handoff features are available, and how reusable is the code that you make in the tool?
Intuitiveness of the UI
If you are used to tools such as Sketch, Figma or Adobe XD then Framer Desktop certainly has a familiar feel to it. Since Framer Web was released, the UI has had an overhaul — with a nifty new Insert menu. This menu gives you access to hundreds of store packages, written by Designers and Developers in React that you can install with a single click. For more advanced users, or for people familiar with React, the Framer Desktop (and Web) UI can also be tailored to your needs using ‘Property controls’. Not to be confused with the overrides panel in Sketch (Framer has it’s own concept of ‘overrides’), Framer’s properties panel allows you to create fully customisable components specific to your needs. What does this mean in practice? As every code component that you make in Framer is essentially a React component, it means that you are able to change the properties of a real React component (CSS styling, logic and all) using Framer’s UI. This means you can hide the complexity of your components behind a friendly UI, pleasing beginners and power users alike. Once you understand this, you start to see that Framer is a little bit different compared to other tools.
Useful features when prototyping for TV
As well as a modern Sketch-like UI, Framer provides some unique features that can really help when prototyping TV interfaces, such as:
- Integration with any controller, whether that be with a traditional remote control or more modern methods, such as voice
- A focus state manager (provided via a plugin called Framer Sunbeam)
- The ability to plugin real data via an API
Now that we know it is possible to use a real remote control, how do we actually go about pairing one and getting it to work with Framer? And which of the 1000’s of remote controls should we use? Read on to find out more…
Connecting a remote — Flirc or not to Flirc?
Some of you may already have heard of Flirc (https://flirc.tv), a cute little USB dongle that plugs into your PC or Mac that intercepts the signals from a remote control and translates them into key presses on your computer. Flirc can certainly make the communication between your remote and Framer easier. The hard part is picking a suitable remote control, and making sure all the buttons work well enough for it to be useful when testing.
At Channel 4, we spent a week researching different remotes to test their capabilities and ease of use when user testing. Some remotes, such as the Fire TV Stick (1st and 2nd gen) did not work with Flirc at all, due to them being RF (radio frequency) and not IR (Infrared). Others, such as the TiVo remote, worked but either had too many buttons or had issues with the back button. In the end, we found that later generations of the Amazon Alexa Fire TV Voice Remote worked the best due to the uncomplicated button layout and ability to pair with our Mac via Bluetooth* (no Flirc required — sorry Flirc!).
I know what you are thinking, does using an Alexa Voice remote mean that we are able to control our prototype using voice commands? This is certainly possible if you install something like React Speech on Framer Desktop and upload your file to Framer Web (I will add a link to an example file at the end of this article), but Framer are also working on navigating via voice right now using a plugin by Jordan Dobson (hi Adobe XD…Framer had a voice control feature way back in 2016! Check out the articles here and here).
Fancy playing around with Amazon’s voice recognition? How about Google’s? With React powering Framer, anything is possible, as long as you know a friendly React developer to help. I don’t know about you, but it is an exciting prospect to think of the possibilities of a UI powered by voice and Framer Motion 2. Watch this space for developments in this area!
Framer Sunbeam
For those of you not familiar with focus state behaviour, dust off your remote from under your sofa and load up Channel 4 on your TV. You may notice that navigating using the arrows on your remote control jumps to the nearest item (known as a ‘focusable’) automatically. Known as focus state behaviour, many of the popular prototyping tools on the market do not offer this feature. Sure you can fake it by writing lots of logic, but who has time for that? At first glance, it seems that Framer Desktop does not provide this feature either. But dig a little deeper and you will find Framer Sunbeam in the Insert Menu, a focus state manager designed specifically for prototyping TV interfaces and game console UIs (and written by Framer’s very own Vladimir Vovaguguiev).
Once we have this installed, and our remote is paired with our Mac, our setup is nearly complete. But one question remains: ‘How do I setup different pages and navigate between them, just like on a real TV? Can’t I just drag some Frames onto a page and link them using Framer’s built-in interactions panel?’. At the moment, it’s not quite as simple as that**, so let’s talk about the final piece of the puzzle: adding multiple pages and connecting them in a meaningful way using Switch so that we can navigate between them using our remote control.
Switch
What then, is Switch? Switch is a store component written by another Framer developer Tisho Georgiev, describing itself as ‘a utility component that lets you switch between different states’.
Why then, do we have to use Switch if we want to navigate between different pages, can’t we use the built-in navigation and interactions panel? In short, at the time of writing Framer’s built-in navigation system does not work fully with Framer Sunbeam. Switch on the other hand allows us to connect multiple pages (Frames) to it, and ‘switch’ pages when focusing on a menu item, or by pressing a button on our remote such a ‘OK’ or ‘Back’. As well as using Switch for the main navigation, we also ended up using it for the main ‘Hero’ component, plugging it into real data — which leads us onto another one of Framer’s useful features — the ability to power components with real data.
Real data
At Channel 4, the ultimate goal was for anybody to be able to update the content of the prototype, without having to know how specific components were built. With a bit of help from Framer’s customer success team (hi Iain!), we were able to setup some of the components to pull in real data from a remote URL or, should the user wish, a local JSON file picked from their file system. This could also prove to be useful down the road if the team wanted to test different imagery or the positioning of carousel rows.
Component library
As the prototype matured, it became clear that component-based design was important for consistency, maintainability and speed so efforts were focused on getting an interactive version of the UX team’s component library published on the Framer Store. With the whole world being online during Covid-19, plus the fact that large image assets were involved when attempting a publish, meant that it took us a few attempts to get the library published. Optimising the images using Image Optim helped, but we also had some success hosting the images remotely.
Handoff
Now you may be thinking, it’s all well and good prototyping in Framer, but how useful can it really be in terms of the handover process? I’m glad you asked…because if your development team is using React, then Framer really does present an opportunity to close the gap between design and development. Remember that every component that you make in Framer, whether it be a design or code component, is a React component. Not only that, but if your developers have some ready made React components, then it may be possible to import them into Framer using Framer’s Component Importer tool (see here for more info). Having the ability to prototype and test using the same components that your developers are using is a pretty neat feature.
The last point worth mentioning here is in relation to animations. Thanks to Framer’s handover feature, it should be fairly trivial to copy over animations used in Framer to your development version (if you are using Framer Motion). Check out the video here to see how it can be done using a simple button. If you are still not convinced to use Framer Motion as your main animation library, then fear not — you can still export your prototype to HTML and your developers can copy the CSS used.
Conclusion
What did we learn in the process of building this prototype, and what were the outcomes? We learnt that, armed with the correct store plugins and controller, it was possible to build and test a multi-page prototype using Framer that was close to the real thing. Being able to test and refine animations in Framer gave us insight into what might be possible in the development version, even if Framer Motion was ultimately not used in the end as the output produced real CSS. Being able to use real data meant that we could update the content of the prototype with relative ease, and will prove valuable in the future if the UX team would like to experiment with different row positioning or imagery.
It will be interesting to see where things go in the future, not only in terms of the potential controllers that could be used, but also how powerful current code-only features of Framer Motion 2 might make it into the UI in the future.
Useful resources
TV prototyping case study using the previous version of Framer
TV prototyping at YouView using the previous version of Framer
Nielson Norman article about TV prototyping
Link to Framer’s feature requests, that mentions more interaction triggers
Please leave a clap / comment if you would like a Part 2 of this article, where I go into more detail and share some examples of the code used.
Thanks
Special thanks to Andy Brockie (UX Design Lead at All 4, who had a lot of patience during the making of this prototype), Ven, Pete, Josh & Mark at Channel 4 for input and guidance (and awesome design work). Special shout out to Iain Kettles from Framer who provided help and guidance on several key aspects, as well as Tisho, Vladimir, Addison and Steve for being so helpful :-).
*Note that in order to pair successfully, the remote had to be reset, sometimes a number of times before it would pair correctly!
** Hopefully soon it will be possible to use the native navigation with Framer Sunbeam in code