Figma: A Product Review

Written by Stella Yang

Preface

Around two months ago, I never considered myself a designer. My strong suits were product management and engineering. But during one of my recent side projects, we needed a designer - and none of us were designers, so I stepped up to the plate.

Figma is the magical tool that turned me into a designer.

And yes, I know Figma isn’t taking Product Fellows. But I love the product so much I wanted to write about it. In fact, I love it’s flexibility so much, I decided to format my blog post with it! You can also read it here of course.

What is Figma?

Figma is a collaborative design and wireframing program that runs on the web.

With Figma, you can easily create designs, turn them into interactive prototypes, and share them, all from your web browser. It’s like a combination of Sketch, Invision, and Google Docs all in one.

Let's take a look:

Rather than describing all the features upfront in this section, I’ll tell you about them as I walk through why I love Figma so much.

Why do I love it?

Figma stands out to me for two main reasons.

1. Incredibly low barrier to entry. Unlike other professional design software, Figma is FREE to use. It’s also very easy to learn, particularly in comparison to other design software.

2. Collaboration. Multiple designers can concurrently edit the same Figma document! Product managers can comment directly from Figma! They’ve even built out tools to help engineers match code to the designs.

Low Barrier to Entry

Design can honestly a pretty hard field to get into, and part of why I love Figma is because it dissolved those barriers for me. In the past, I had tried other design software like Sketch and Adobe Illustrator. Some of these have prohibitive costs. Others were simply hard to learn how to use. With Figma, I had none of those problems.

Free to Use

Figma is free to use! Let’s check out one of Figma's competitors:

Adobe Illustrator: $21 / month
Adobe XD: $10 / month
Adobe InDesign: $21 / month
Adobe Dreamweaver: $21 / month
Complete Adobe Suite: $53 / month

First of all, why does Adobe have at least 4 products used to make designs?
Second of all, $53 dollars per month??? That really adds up.

But Figma is FREE! Forever! Yes, I’m serious. So how on earth do they make money?

Figma makes most of it’s money off of corporations. With the Starter plan, you can have up to 2 collaborators on each project (which is plenty to show off its amazing collaboration features). But if you’re a company, you probably want to pay for Figma’s advanced collaboration features. Rather than describing all of their pricing schemes myself, click on the image below to visit Figma’s pricing page.

Figma has literally lowered the costs of getting started with design.

Easy To Learn

This is Figma's toolbar: And this is Illustrator's toolbar:

Because of the simplicity of Figma’s interface, it’s very easy to learn how to use the platform. Although Figma doesn’t have all of Illustrator’s capabilities, you can recreate many of these more advanced features with Figma as well - they’re just not all crowded in the main toolbar.

Figma also has extensive, easy to understand documentation that you can check out for yourself here!

Collaboration

This is where Figma really shines. Collaboration is part of Figma’s core product, and it’s incredibly well done. Aditionally, Figma has made collaboration amazing not just for designers, but also for everyone else who touches the design process as well.

Concurrent Editing

Previously, if you wanted to work with someone on a design, you’d have to save the file, send it to them (over email? Dropbox? Google Drive?), then they’d have to download the file to make changes to it. Version control was an absolute nightmare. And what if two people wanted to work on the same design at the same time? It was basically impossible.

Enter Figma. Figma is like Google Docs for design. It has made collaboration not just easy, but seamless. Two people can make changes to a design at the same time. Version control is done automatically. Figma has made collaboration so much easier for designers.

Word : Google Docs :: Other Design Software :: Figma

Other Collaborators

Figma cares about everyone who cares about design - including people who may not be designers. For them, Figma has a built in commenting system where you can easily add comments directly on top of the design.

Figma has also built out tools that help engineers write software that better matches the designs. It easily gives engineers access to color information, component size, and component positioning.

Design is something that touches everyone in the product life cycle, not just designers. Figma has made tools to help them collaborate as well.

How can Figma improve?

Of course, there’s always room for improvement. Here are three ways I think Figma could improve:

1. Figma’s mobile app is very limited
2. It’s hard to learn about Figma’s advanced design techniques
3. Various small product improvements

Mobile App

After you make a design, what’s the biggest user need? The ability to share the design with others. Figma does a great job with link sharing - rather than downloading files, anyone can view the designs through a browser link.

But what if I’m on the go and I want to show my designs?
What if I don’t remember the link’s URL?

That would be a great time to pull out my phone and show the designs on Figma’s mobile app! Unfortunately, Figma’s app doesn’t allow you to directly show designs from your phone. Instead, you can only mirror a design that is being displayed on a computer, which sort of defeats the purpose of being convenient and easy to access.

Creating a mobile app where you can at least see the designs would make life much better for the many designers and product managers who want to show designs on the go. I understand it would be a lot of work to add editing functionality on a mobile app, but I feel like displaying should be fairly simple.

Advanced Learnability

It’s very easy to learn the basics of Figma. The more complex nuances however can be hard to learn.

Here’s one anecdote. One of Figma’s features is called a “component.” Basically, if you edit the master instance of the component, all of the other instances will also change. Why is this helpful? Because I wasted so much time editing individual copies when I wanted to make a slight tweak to the design!

After I was very frustrated with my copy and paste and edit situation, I decided to look up a solution. Of course, Figma already has components! I just didn’t know about it.

So here’s my suggestion: If Figma detects user behavior that indicates they might be looking for a more advanced feature (i.e. copying and pasting a component and then editing them the same way later on), Figma can then suggest that they try that advanced feature (like components).

Other Improvements

Anchor Tags: Anchor tags allow you to jump to a certain scroll position. Unfortunately, such a feature currently does not exist in Figma. It does exist in other prototyping competitors however. This means I’m unable to actually make the table of contents in the Figma version of this post functional :’(

Spell Check: There’s no way to spell check (or grammar check) your copy on Figma.

Conclusion

All things said, Figma is an AMAZING product.

It’s so easy to use, and it’s totally free to try it out. The collaboration tools they’ve built out are unparalleled, and make life so much easier for designers, PMs, and engineers alike.

If you’re ever looking for a design tool, I’d highly recommend you check out Figma!

Addendum

Here are some of the designs I’ve made in Figma:

Free For Food - An app that shows you which of your friends are also free to get food right now! This is the project that prompted me to start using Figma.

urop.guide Poster - A flyer I made for a website I developed that helps MIT students find undergraduate research opportunities.

Free For Food Website Landing Page - A sample landing page for FFF’s future website.

Feel free to leave comments on any of the designs. I’d always love to receive feedback on them!