This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Harry Hutton
Posted Jul 13 - Read on Facebook

You are designing an app and want to show it to your team via a framer prototype.

- You need to show your app when working normally with content loaded in it
- You also need to show an empty state
- It also potentially has a number of edge cases e.g. error messages / content not available

How do you communicate these alternate states to your design and developer team? Do you include it somehow in a single prototype link? Do you create multiple links? Do you create a static PDF document to document the alternate states?


Andrew Nalband

Harry, this answer really depends on so many factors. How critical is the edge case, how much time do you have, what are your developers like when you don't explain all the edge seems there would be different answers depending on all of those details. That said - I like to build out as much as I can to help communicate what's needed.

Harry Hutton

Hey Andrew :)
1) Plenty of time
2) Alternate states need to be communicated with the team in some way

Really I'm just wondering about the working practicalities of this. ie Would you have multiple links to several different prototypes - showing each of the states? Or is there a way to include them all in one framer link?

When you are working with developers, can a Framer prototype be the ONLY thing you give them, or are you giving them other documents as well?

Andrew Nalband

It's certainly possible to show all of the states within Framer. If I had all the time in the world, that would be my ideal scenario. A Framer prototype could certainly be the only thing you give them, but I can't imagine a scenario where there aren't additional conversations, emails, and clarification. In practice, this sometimes leads to the creation of PDFs or other documents as needed.

Blaine Billingsley

I have done this a couple ways, depending on time and how much/different detail is needed. I have added buttons to toggle various factors (like low/no connectivity for example)

Blaine Billingsley

I have also used Marc krenn's query interface for that approach a couple times which is cool cuz you can link to specific configurations.

Blaine Billingsley

The other way is in use the prototype to show the most complex case of the flow, and then do mocks for the other states. It all depends on how much of a difference there is and what needs to be illustrated interactively.

Andrew Nalband

And it depends on time, which there is never plenty of when you're working on a project. ;)

Blaine Billingsley

There is another module that creates a little configurator panel for your prototype. I've never used it but I have made very similar things on my own

O'Ryan McEntire

Your prototype should never serve as the singular documentation for a project. This forces your dev team to have to scour your prototype for every possible thing they might need. That's not fair to your team.

Your prototype should serve as a contextual example of the concepts and behaviors you are presenting in your separate design documentation.

You should also be handing off some other document that explicitly describes every screen and state.

A pdf is fine. There are also other tools that have other helpful features for design hand offs. Zeplin and InVision are two off the top of my head.

If it's vital to show these states in a prototype you could build a prototype that allows for someone to see an empty state and then fill that empty state. Either by going through a normal use case or adding an obvious demo control or switch that your prototype viewers know is only to switch states for the prototype and not meant for them to build.

For simplicity my team generally just creates two separate prototypes that are handed off with ample discussion and context to the devs.

Harry Hutton

Great answers people. Thank you very much ☺️

Read the entire post on Facebook