Figma Desk

CASE STUDY

2023

OVERVIEW

The landscape of design software is a jungle of panels and dropdown menus. Let’s return home to something familiar: the desk.

NOTE: DEPENDING ON YOUR INTERNET SPEED, THIS PAGE MAY NEED TIME TO LOAD. THE GIFS TAKE A MOMENT TO COME OUT OF HIBERNATION ;)

Designers are whipping up more than just UI in Figma.

Loyal users are making everything from vector illustrations to 3D renderings in Figma—but the app is barely equipped to handle it. But what if it was?

Figma virtuosos are stretching the program’s limited capabilities for work that’s typically done in more powerful apps.

Adobe Illustrator has always been the app of choice for complex design projects, but Figma’s elegance is attracting staunch loyalists who are making work that’s challenging the limitations of the UI editor.


But even Figma’s biggest fans admit that it has its limits, and users often toggle between Figma and other apps during projects.

“When it comes to vector graphics Figma has like 1% of Illustrator's power. Many times all you need when building in Figma is that 1% so you can get by, but for anyone who needs a professional, powerful, fully featured vector graphics program Figma is nowhere near it... as it should be since thats not what it's for!”

COMMENTER IN r/FIGMADESIGN

Standing on the shoulders of giants plugins

Figma’s wide offering of plugins, mini-apps developed and distributed by the Figma community, is bridging the gap between Figma and legacy apps like Illustrator.

Many plugins emulate functions that are not yet available in the Figma Editor, like image tracing and halftone filtering. Many Figma designers use these plugins to approximate the Illustrator toolkit.

  • Noise & Texture plugin by @rogie

  • Vector to 3D plugin by @pissang1

Plugins open as panels in the Figma Editor, and you can only run one plugin at a time.

This is fine for projects that don’t rely heavily on plugins, but it’s a nightmare for more complex projects where designers are juggling many plugins at once. They’re opening, closing, and reopening the same panels again and again and again.

“For more complex projects, designers are juggling many plugins at once. They're opening, closing, and reopening the same panels again and again and again.”

This experience feels archaic, like a holdover from an older era of interface design. Perhaps it should be left in the past with its progenitors: Windows XP, pop-up ads, and Adobe CC (CC stands for cluttercore, btw).

LET’S REIMAGINE THIS EXPERIENCE

How can we better integrate plugins into Figma?

In other words, how can Figma better support its plugin-jugglin’ pixel-pushers?

Introducing

The Desk

The Desk is the reimagined surface behind the Figma Editor, where designers station their favorite plugins, widgets, and tools.

The Desk opens and closes with the keyboard shortcut Option + D.

The Anatomy of the Desk

The Desk has three main components:
(a) Figma Editor window
(b) Docked plugins & widgets
(c) Bottom sheet

A

The Editor window sits in the middle of the Desk. You can edit your project directly from the Desk view.

Editor Window

Plugins and widgets are docked to the left and right sides of the Editor window. You can keep multiple plugins open at the same time.

Plugins & Widgets

B

From the bottom sheet, you can view all docked plugins, dock another plugin, save your Desk as a Desk Setup, and access your other Desk Setups.

Bottom Sheet

C

NEW REAL ESTATE

More space, more tools. Better organization.

Drag-and-drop editing.

Drag and drop your favorite plugins to dock them onto the Desk surface.

When you return to the fullscreen Editor, your plugins are hidden away behind the Editor, along with the rest of the Desk. To access them again, open the Desk with Option + D.

Easy cleanup.

To discard unwanted plugins, simply drag them to the margins of the Desk. Out of sight, out of mind.

HYPER CUSTOMIZED

Desk setups for designers of all stripes.

With the full suite of Figma plugins at your fingertips, Desks can be customized to suit any creation need.

THE UI STACK

For the prototyper

Animate with code, generate patterns, and add images to your wireframes without plugin panels getting in the way of your prototyping spaghetti (it’s chaotic enough as is).

THE TYPE STACK

For the typeface designer

Format text, translate copy, and generate a modular scale for your typeface and more — before you even touch FontForge.

THE DRAWING STACK

For the illustrator

Smooth curves, ease gradients, and add dithers to your vectors. And gone are the days of exporting & importing PNGs between Figma & Illustrator just to add text to a path. #iykyk

SAVE AND SWAP

Commitment issues? Swap setups at whim.

Have multiple Desks on rotation by saving your favorite setups as templates.

IT’S CALLED A DESK FOR A REASON

A sense of place makes room for fun.

Designate one Desk for work, and another for play. Make the background something groovy. Pin a photo of your dog, because nothing’s all that serious.

For work…

…and for play.

Carving out a new surface means more than just better plugin integration: it's a provision for software evolution.

With the Desk, Figma can integrate more tools that continue to bridge the gap between itself and other apps. More tools means better support for its power users, and ultimately means Figma can capture even more of the creative market — and level with industry giants.

What's next?

TALKING TO PEOPLE

This case study is predicated on personal experience and anecdotes collected from friends and Internet users. I want to perform more user research to better explore how to bridge the gap between Figma, Illustrator, and other apps.

FLESHING IT OUT

This project was a sprint, so there’s room to give love and attention to the nitty-gritty: new icons, design system consistency, and tying up loose ends with the flow.

EXPLORING WACKY CONCEPTS

I want to see a version of this where I really commit to the concept of the Desk as a physical space. Imagine if plugins appeared as skeuomorphic objects that rest on the Desk surface! This is a very playful (and heavy-handed) metaphor, and I’m curious how it would pan out in something as thorny as the Figma Editor.

Final Notes

I love exploring new ideas, even if they’re a little risky.

It’s important to know how to scale back, as design falters without the “how” of implementation, but preemptively limiting your imagination is as equally a disservice as an ungrounded concept. I believe that design thrives when it looks into the future, and my hope with this project is to showcase my love for vision-making.

If you have questions on any part of this case study, I’m happy to share more about my design process. Feel free to reach out: I’d love to chat!

Until then, thank you for reading!

More Projects

&

More Projects &

BRIGHTR • SPRING 2020

DUET • SUMMER / FALL 2020