Why this can be good for your prototyping
…or how to go from a humble three-screen prototype to a massive juggernaut, combining 100+ mockups, documentation, design systems, client and stakeholder presentations in one interactive .fig file.
When it comes to design, it’s probably not news for you that one source of truth is always better than a dozen of design files, guides and documents scattered all over the place, each of which has to constantly be updated and refreshed. It clutters not just your design process, but also your mind and focus.
I know, I know; I was the same way just four years ago, in fact. But everything changed with Figma. The simplicity and power, which probably allowed thousands of designers to refine and focus their skills on the task at hand overnight.
But — let’s step back for a second… So what does Figma has to do with this tangled atrocity on the cover? And why would you ever want it in your design process? Well — to do this.
Combining the power of clever file structuring tricks and components you can actually build amazingly versatile interactive presentations, which will update automatically and become the main step of your design flow. The only step, really.
But in return — this is what your prototyping tab will become even for a small, 3-screen prototype. Is it a fair tradeoff?
Was that “yes, of course it is!”? Perfect— let’s dig a little bit more under the hood then…
Structure
This is obviously not what prototyping in Figma was designed to do, so how does this all work exactly, you ask?
Well — It’s a bit of a mess, to be honest.
This is a what the layer structure looks like for each screen and each presentation slide. Nothing too scary: just a screen object, wrapped into a special component and placed in the right place, with the right attributes.
Layers with four purple diamons are heart for any screen — the main component, which always stays on the very top of the hierarchy, above the actual presentation frame. But how does it also appear on the presentation slides then, if the component itself is nowhere inside of it? Thanks to a child of the component, of course.
The child will remain there, inside of the presentation frame, in the same position just underneath the real component, changing along with anything you do with the parent. You won’t see it while editing the document, but it will always be there, waiting for you in presentation mode. If this child component was an animal — it would’ve definitely been a dog.
Screen architecture
Start by doing everything that you would regularly do with the screen — plan all of the layout, build groups, nest groups, add a little bit of interactivity, and… Well, that’s it, basically. Almost. All you need after that is to put that screen anywhere except in the empty void, like you usually do. Surround it with the device mockup to your liking, add illustrations, decorations, comments, explanations or documentation and test it out.
Looking good so far!
Each screen component also has to have a specific zone inside of it, dedicated to a “Back” action. If done correctly — this zone helps the user navigation a lot, just to buffer the empty space of the display with actual use.
Years of working with pop-ups and dialog boxes taught every user that clicking outside of the pop-up should close it, no matter what. And you better support that somehow if you want for your presentation to feel good in the hands of whoever you send it to.
Just don’t forget to clip this zone out in the presentation frame (not inside of the component though), unless you want half of your presentation frame to be one giant button.
Presentation frame architecture
This one is even simpler. Just two buttons for next\previous frame is really all you need if you are a straighttothepoint-kind-of-designer. If you are a fancy-waytoodarnovercomplicated-kind-of designer though, just like me — you can also add quick navigation tab and all sorts of other crazy pop-ups, rollovers and clickable dropdows, custom links and chunks of code. Whichever will come to your brain.
You are not just restricted to screens —right? You can build your prototype around any frames and components; use that power. Place those frames around your canvas in a logical flow and link them together with these Next/Previous buttons.
Oh, and don’t forget about these little tag things with the name of the screen on them. You might need them to be able to navigate to the right screen, link additional URLs or act as shortcuts.
Since you already have an interactive mockups right inside of your presentation — just clicking on the screen probably won’t do.
If you wish to play around with the presentation you’ve been looking at all this time yourself, there you go. You can even leave me a comment, if you wish:
I’ve done presentations like this with over a hundred of individual screens, components and slides — it’s amazing how a tool like Figma can keep all of it running perfectly and with relatively little hassle.
As soon as you get into the flow — you just cannot stop yourself from improving and perfecting the flow to make it even more convinient and useful for everybody in your team. And with the ability for people to comment on any part of these presentations, well… It’s just a one-stop shop for everything a UX designer might need, isn’t it?
