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.
Prototypes in practice
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.
Test your copy
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.
Add context
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.
Communicate interactions
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.
Communicating at Figma, in Figma
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.
Presentation View
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:
- Running All Hands: Our company-wide meetings usually consist of many small segments led by people across teams. Whoever is presenting at an All Hands meeting jumps into a Figma file, adding slides to the master version once they’re ready.
- Sharing information: Whether it’s getting feedback on quarterly plans, presenting research findings, or exchanging ideas for how to keep your team close while everyone’s working remotely, Presentation View is the foundation for how we circulate information internally.
- Guiding customer conversations: In addition to custom pitches, our sales team has started making one-pagers for customers in Figma. Instead of copying the link to a PDF, we send them a prototype URL and ask them to click through it. This format supports animated elements like gifs, which makes it more engaging than reading a static file.
- Speaking at events: At our first user conference, many of our keynote and breakout sessions speakers built their presentations in Figma, using this template. This format also works for virtual events, especially now that so many events have moved to an online-only presence.
Presenting in Figma
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.
Related Content
