A journey to improve prototyping with Figma
I'm improving my skills from box-drawing to layer creating in Figma. It started with Figjam and is now a journey to plugins - Everything Starts Out Looking Like a Toy, #129
Subscribe now for free to join curious folks who get the “Everything Starts Out Looking Like a Toy” 📊 newsletter
Hi, I’m Greg 👋! I write essays on product development. Some key topics for me are system “handshakes”, the expectations for workflow, and the jobs we expect data to do. This all started when I tried to define What is Data Operations?
This week’s toy: a meme search engine that searches the content of the meme, not just the style and presentation of those images. Find that meme is possible because an engineer put together commodity hardware (old iPhones) and some clever OCR tricks. Whether you want to find variations on the This Is Fine dog or search for something else, we’ve got you covered. Edition 129 of this newsletter is here - it’s January 23, 2023.
The Big Idea
A short long-form essay about data things
⚙️ A Journey to Improve 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.
Links for Reading and Sharing
These are links that caught my 👀
1/ Platform vs. Pipeline - this 2016 Harvard Business Review story discusses the benefits of the Platform play, where you create a reinforcing cycle adding value through the use of the system. Instead of just creating a popular product or a series of products, you build a broad approach that invites multiple parties to create and compound results.
2/ How long should your PLG trial be? - the folks at Revenue Cat have done a study of 10,000 subscription apps to test conversion rates by trial duration. You might not be surprised to see that slightly longer trials produce better results.
Across a broad group of products, there isn’t a giant difference between a medium-to-short trial and a pretty long one. But if you choose a short duration for a trial, that puts more pressure on your organization to deliver excellent support and training content.
3/ Finding awe - there’s been a lot of negative news this year already, and this article will remind you of the importance of getting outside to experience awe. Experiencing awe - the palpable sense that there is something bigger than ourselves - is a key way to destress and live a happier life. Go outside!
What to do next
Hit reply if you’ve got links to share, data stories, or want to say hello.
Want more essays? Read on Data Operations or other writings at gregmeyer.com.
The next big thing always starts out being dismissed as a “toy.” - Chris Dixon
Brilliant toy is brilliant