Prototyping is a key part of product development, allowing you to get valuable feedback on how users interact with your designs. Just earlier this month, we shared tips for remote usability testing and announced an integration with Framer to bring you more powerful prototypes. (We even dedicated a week to prototyping back in 2018).
Beyond getting formal product feedback, prototypes are also broadly helpful as a communication tool. You can translate your vision to a prototype, share work, and get input from other collaborators, stakeholders, and teams. Depending on where you are in the development process, they don’t always have to be high-fidelity—in many cases, informal prototypes can be more impactful than something more polished.
Here, we share the benefits of lightweight prototypes and some ways the team at Figma is using them.
It can be scary to share something that still feels like a work in progress. But inviting early feedback helps you quickly course correct (if needed) and can save you time down the road. There are a few areas in particular where building and sharing lightweight prototypes can make a meaningful difference.
Prototypes can be a helpful gut check as you build out your UX content strategy. For example, a quick look at a flow should reveal whether or not the copy in a header, body, and button all match up, and that it’s clear what action the user should take. Since you’ll likely have more than one person writing copy and microcopy, this is a good time to look out for inconsistencies with the voice of the writing. Even if you don’t have a defined style guide, getting a sense of how everything fits together ensures that the tone feels right, even if just directionally.
While you certainly want a well-thought-out prototype during the developer handoff, it can also be helpful to share early thinking. Aside from giving the development team more insight into your vision, they’ll also be able to tell you if something isn’t feasible, which potential roadblocks you might hit, or if an idea will require additional exploration. Plus, remember that prototypes are a blueprint, not the end result—the more context you provide, the easier it’ll be to bring that design to life.
Even when you’re building something lightweight, you’ll want to be as specific as you can, mapping out paths and interactions (like On Click, On Drag, While Hovering). Doing so will help you communicate what you’re trying to build, resulting in better feedback and more accurate testing.
In addition to using prototyping for product workflows, we at Figma use them as a communication tool. Now that we’re all remote, sharing work and information—both inside the company and with our users—is more important than ever.
While many use cases come to mind when we think about prototypes, presentations may not be top of the list. But at Figma, we exclusively use Presentation View to share slide decks.
Here are some examples:
If you’re looking to build a slide deck, open a new file and create a frame for each slide—there’s even a “Presentation” setting in the device frame dropdown, which displays the prototype to a size that fills the screen, in its entirety. Or, start with a template (this version was built for a pitch deck, but you can customize the charts and frameworks).
Once you’ve added content, share your slides by clicking the “Present” button. You can adjust your Presentation View to “Fit” so that the slides snap to the viewer’s screen dimensions. To present without having to create connections between slides, navigate through frames using the on-screen arrows, the arrows on your keyboard, or the Enter/Return key.
With everyone working remotely, if there’s every a hiccup with your VC connection, you can always do an audio-only call and follow along on someone’s screen with Observation Mode.
Wherever you are in your workflow, prototypes can help you share ideas, get feedback, and better communicate with your team. Learn more about prototyping in Figma or get started with Presentation View. For more tips on managing distributed teams, check out our resources on remote design.