Export Smaller, Ship Faster • Austin Lee

PROBLEM

Why did I choose Figma??

In March 2022, I used Figma for the first time to collaborate on project. Figma immediately stood out because it eliminated the back-and-forth emails with different file attachments. A single shareable link was a game changer.

The more I used it, I realized that Figma was more than just a “collaborative interface design tool”. I was able to create posters, pitch decks, and even resumes all within Figma. From this point on, the Figma application has been open on my computer 24/7.

But while designing my resume, I noticed that the exported PDF sizes was surprisingly high. There was no option to adjust the output, so I used Adobe Acobat to “Reduce File Size”. This continued to be an issue when I worked on web-design. Whenever I exported a frame, it needed to be compressed again to reduce the file size.

So when I read KP's design prompt, this pain point immediately jumped to mind. As a big fan of Figma, I want to see how the export feature could be redesigned to provide a better experience for designers and handoff.

USER FEEDBACK

Plugins vs External Compression

On my hunt to find a solution, I started by learning more from other Figma users. The 2 current solutions are:

Option 1: External apps or online tools.

There are tons of great and free options to compress files outside of Figma. The downside for this option is another layer of work just to share a file.

Screenshot of people on Figma Forum sharing various external file compression options.

Option 2: Internal plugins for Figma.

There are quite a few existing plugins for Figma that allow for compression. Some include TinyImage Compressor, Downsize, and Olive Press.

These compression plugins are popular and have tons of users (TinyImage Compressor has over 120k users)! However, an issue with this option is that the plugins vary in functionality and some are even hidden behind a paywall.

Screenshot of people on Figma Forum sharing various file compression Figma plugins.

COMPETITIVE ANALYSIS

The Showdown: Figma vs Sketch vs Adobe Xd

I then looked externally to learn how other popular design applications handle file export. I decided the best way to compare would be to design and export the same exact design on all 3 applications.

Screenshot of the same design on Figma, Sketch, and Adobe Xd.

I designed a simple outdoor scene: a sunny day, a patch of grass, and a cloud. In order to test the compression, I included text in the background. I figured Figma's “Guide to exports in Figma” page would be appropriate for this role. This was the scene I created:

The outdoor scene I designed to test compression.

I then exported this drawing from the 3 applications as a JPG, PDF, PNG, & SVG. Below are the results:

✅ — Option to Compress?

JPG

637 KB

654 KB ✅

287 KB ✅

PDF

9,400 KB

22 KB

456 KB

PNG

154 KB

203 KB ✅

179 KB ✅

SVG

5,900 KB

16 KB

15 KB ✅

Additional file export options?

—

TIFF ✅

WEBP ✅

EPS

—

The results show that Figma had the highest file sizes for 2 of the 4 files (both being vector-based). Surprisingly, both of the other applications provides options to compress the output. Sketch even offers additional file types!

THE MAIN INSIGHT

A potential strategic business move that keeps users on Figma, exclusively.

Based on the trends from online forums and results from my experiment…

1. Users are leaving Figma to use file compression tools not available natively in the application.

2. Figma compression plugins are not accessible for all users. Users are either unaware or these solutions are too expensive.

3. Direct competitors offer file compression options during export! Sketch and Adobe Xd export certain files at sizes significantly lower than Figma.

THE FINAL DESIGN

A New Export Experience...

The main aspects that differ from the current export workflow is (1) more customizability and (2) more cohesive design with other Figma panels.

PNG export settings.

JPG export settings.

SVG export settings.

PDF export settings.

The file's scale and suffix has been replaced with an expected file size.

It seems unnecessary for the scale adjustments to take up important screen real estate when 50% of file types don’t support this feature. It makes more sense to move it into the additional “Export Settings” window.

Having an expected file size is something that’s useful and good to be conscious of before exporting and sharing!

Added estimated file size.

The original hamburger menu has now been replaced with an option to remove that file from export.

Figma currently only allows files to be removed in reverse-chronological order. So if you had 50 files ready for export and wanted to remove the 25th, you had to remove each one until you got to the 25th file. This redesign allows you to remove any file in 1 click.

Added ability to remove a single file.

Flexibility to export at any dimension.

Quality control for JPGs.

The "Export Settings" window has been moved to the left side.

The original hamburger menu from #2 has been replaced with an icon and moved to the left side. This change is reminiscent of the Effects Panel, which is directly above. This redesign also results in a more cohesive layout and design of the panel system.

More consistent with other panels, like Effects Panel.

Now you can see exactly what the resolution is and at what scale.

Currently, certain file types (PNG/JPG) allow for exports at different scales. This redesign takes it to another level. If you need a specific resolution, go ahead and enter it! Curious what 0.75x actually exports as? Now you know!

File compression!!!

This the reason why I began this project. Certain file types (PNG/PDF) now allow you to check the “Reduce File Size” button similar to Adobe Acobat.

Ability to export at a reduced file size!

JPG will allow you to control the quality on a scale of 0-100.

Every single other competitor has an option to adjust the output quality. It’s now time for Figma to implement it too!

Not displaying any “unavailable/locked” options.

SVG and PDF offer fewer customization options than PNG or JPG. So instead of showing grayed-out options, all adjustments are all moved to the "Export Settings" window. Now the panel is less cluttered and straightforward!

A cleaner interface without irrelevant information.

CONCLUSION

Why should Figma invest?

File compression natively inside of Figma will allow for smaller export sizes so “teams can deliver better products, faster”. It’s a strategic business move that keeps people using Figma exclusively without relying on plugins or using other services. This is beneficial from both a user-retention and productivity perspective.

This redesign also improves usability and adds customization. It brings Figma’s export workflow onto a level that matches competing design applications. In the end, my proposed export redesign creates something that aligns with Figma’s mission of connecting everyone in the design process and making designs accessible.

Looking forward, with more time as well as access to Figma’s resources, I would love detailed insights on what percentage of users utilize the Exports Panel to learn about the impact of this redesign, and if it would be considered a priority. It'd be important for me to spent time learning more about file compression and the feasibility to implement inside of Figma. I'd also like to conduct interviews with Figma users (including non-designers, new designers, and professionals) to validate and iterate on my designs.

LESSONS LEARNED

What I’d learned from this design challenge!

1. Worked within an existing design system. A lot of my previous work has been developing a brand and product from scratch. This challenge was unique because it allowed me to assess the existing strengths of Figma and what opportunities could be made to improve the user experience and crease a more competitive product.

2. Understood existing design decisions. As I brainstormed how to implement my ideas, I realized multiple times why things were done the way it is. My ideas were challenged and allowed me rethink ways to implement without breaking the existing workflow.

3. Researching competing applications! I got to learn more about the differences between popular design software. This helped me better understand why and how to approach this redesign.