How Framer X Enable Me to Create Large Screen Prototype

Tem
Tem
Sep 6, 2018 · 4 min read

What is Large Screen Prototype ?

Mobile app is screen base and large screen app is view base ( view is part of a screen )

For example, since mobile screen is smaller, a common design pattern is to use one screen as navigation list, and then transit to another screen to show content detail, but in a larger screen, we can have both navigation list and content detail shown at the same time.

There is a lot of tools out there to design animated and interactive user interfaces. I don’t make prototype very often in the past, because of 2 reasons:

1. To reuse a design patterns is painful

2. Most of the prototyping tools aim to rapidly build mobile prototype, not for larger screen prototype.

I used to design Web and Desktop Apps for my company, I tried a lot of prototyping tools, none of them can create fully interactive large screen prototype easily.

Most prototyping tools have build in transition, but they can only transition from screen to screen, if you want to change some layers on part of the screen, you need to hide one layer and unhide another layer manually, it needs doing a lot of tedious jobs, which is very painful for me.

New Approach

When Framer X was introduced, I knew this is huge, obviously it can solve the design pattern reuse problem better than other competitors. But I’m not sure whether it can solve the large screen prototype problem in an ease way.

A Basic Use Case

To demonstrate what I mean, I use a basic structure. A navigation bar on the top and a body view on the bottom.

When I click each tab on the navigation bar, the corresponding view will be shown in the body view.

The Problem

As I mentioned above, when I want to change only a part of the screen, I need to hide one layer and unhide another

So when I click a tab, I show the active view and add display none attribute to hide the inactive view.

User won’t see the inactive view and can not interact with the element inside it either.

But the problem is, Framer X wrap each component in a special div, although I’ve hidden the view, there is still an invisible wrapper that prevent user from interacting with the element beneath it.

In the example below, I expect to see a hover effect on the card, but since Tab1 Container is on top of Tab2 Container in the layers panel, the warpper of Tab1 Container prevent the hover event going down to Tab2 Container

The first solution I can came up with is to move the active view to the top of the layer hierarchy, but unfortunately there is no such hierarchy properties.

The next approach is to move the inactive view outside of the screen, but I have no idea how to access the wrapper.

The Findings

After some guessing and digging, the answer is Code Overrides!

I found that both the wrapper and the component will call the same code overrides function, so I just have to figure out which is wrapper’s call, and than return the value I want to change.

The wrapper have many props so you just have to pick one that is not identical to the props of your component, in my case I pick componentIdentifier.

Then I just need to return { top: 3000 } in the Code Overrides function, and the overlapping layers will not block the user interaction anymore.

My next problem is, after I change the value, how do I change back? I thought I should store the original value to somewhere but it turns out to be complicated and unnecessary.

Framer X does not manipulate the top properties directly, instead, it use css transform to move the wrapper, so I just need to return the props I want to restore and the wrapper will be placed back to the original position. ( Thank you Framer Team :)

I think this usage is part of the feature that Framer Team will introduce in their document when Framer X officially launch, but I am so excited when I discover Framer X has my most wanting prototyping ability that I want to share it now!

Tem

Written by

Tem

Product Designer @ Shenzhen seeking for a new job oppertunity

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade