Improving prototyping with Figma

Let’s talk about prototyping. By design,?it needs to be ugly. Prototypes are a quick way to share an idea, see whether a flow will work, and suggest something believable that doesn’t exist yet.

We do this because developer time is expensive, and drawing pictures is cheap. If you have an idea and want to draw it in pictures,?Figma?is the way you’re probably going to do it. Figma has two main modes:

• FigJam?is a flowcharting feature in Figma that also enables you to draw collaboratively on a whiteboard canvas. People typically use this to do a short-term collaboration or to explain a process.
• Figma?is a more traditional vector drawing tool that lets you build high-fidelity layered images to hand off to developers to create product features in code or to create detailed vector illustrations.

Like most tools, there’s no “right way” to use it, but if you hand off blocky low-fidelity pictures of a software process, there are going to be more questions about how to bring it to life than if you present beautiful pictures. Except beautiful pictures take a long time to create, even when you have components you can import from a library of items.

A need to get better at prototyping

Recently I needed to get a lot better at using Figma. As a product team, we wanted to move features to become development ready faster and needed to take some pressure off of our UX resources.

Here’s a simple example that illustrates some of these techniques and highlights the advantages and limitations of each technique. Let’s say you were working on a portion of an application and wanted to change the action on a drop-down menu to transform it from a single selection to a multiple-select option.

This example component from a UI library demonstrates the initial state of a single select picklist:

Now, let’s build some ugly prototypes.

Showing the example with a “paper” drawing

First, we’ll take the easy method. Drawing on paper or on a tablet (this example comes from ProCreate on an iPad) lets you share the idea of selecting the menu and showing a ?? or a highlighted selection to indicate that the item is selected.

This is probably the fastest way to get to an idea. It’s easy to share and you can make almost infinite iterations. However, drawing an example has a few issues:

• It’s potentially encrypted (ok, that’s a handwriting joke, but it might be legitimately hard to read)
• Making changes requires you to redraw or create more scribbles on top of this design
• Scaling this is possible and will get distorted quickly, as it’s not a vector illustration
• Mashing up designs from two people will quickly look different, as they have different handwriting

This is truly a one-time sketch. It doesn’t scale. How can we do a little bit better?

Moving to a flow chart solution: FigJam

FigJam is a collaborative drawing feature built into Figma. It lets you use simple shapes and colors to whiteboard concepts and bring illustrations and ideas together in just a few minutes.

FigJam is limited on purpose. Its goal is to get ideas to a place where they can be acted on, not to create finished vector illustrations for developers. It does give you scalable shapes and the ability to add type and makes the prototype easier to share, scale, and change.

Here’s an example of our multiple select menu component prototyped in Figjam. Let’s say that after our first discussion, we changed our design from using a check mark to select an item to a row highlighting scheme.

FigJam’s pretty good at creating basic diagrams and at blocking information roughly to where it will be in the final design. This is optimal for information flows such as a true flow chart where it’s more important to convey what’s happening than to offer pixel-perfect fidelity.

As you can see, it’s also really hard to duplicate the actual app experience with FigJam. If you want to use screenshots of the interface, you could draw on top of them with arrows or simple vector drawings, but it doesn’t feel very polished. FigJam examples are clear enough to discuss but not detailed enough to build.

Using Figma to create mid-fidelity and high-fidelity examples

How do you create better results than FigJam? Build a prototype in Figma.

Figma uses all of the vector tools that can create a high-fidelity drawing for your team to respond to and build your solution. This works whether you are building items from scratch or cutting and pasting a screenshot from your application into Figma and adding boxes and arrows on top.

This solution in Figma?looks like the actual application. This makes it easy to have a discussion about what will change and what will remain the same in this proposed new design.

There’s another secret that I uncovered here: the ability to import elements directly into Figma.?Story.to.design?published a?Figma plugin that lets you point at any element in a web application or website?and import those items as layers into Figma.

When you have all of the vector layers of a web app, it’s easy to make changes, copy and move elements, and add the red text and pointing arrows that annotate a successful prototype design.

What’s the takeaway??Prototyping is ugly, but it can be much more effective when you use vector tools for prototyping. Whether you’re building a low-fidelity version of your idea or a high-fidelity version, Figma gives you great tools to communicate and collaborate with your team. Figma’s plug-in ecosystem also gives you tools to create an unfair prototyping advantage by loading application assets directly into Figma layers.

This essay originally appeared here.