Figma: The Inmates are Running the Asylum
How Figma normalises bad design on an unprecedented scale.
One of the books that helped shape the age of User-Centred Design is a well-known book by Alan Cooper about Usability, from a time long before Experience Design.
The book is about software products that fail because engineers design them around technical aspects and makes a point that to have a successful product, the focus should be on usability and user-centric design.
Some 15 years later, Figma, the biggest UX/UI design software, became an example of what this book warns about: the asylum run by inmates.
It is built around technical aspects and feature sets, with sporadic attention given to UX, UI and user-centric design.
Being number on design tool, It is and used by majority of designers puts Figma in the position of authority that everyone look up to. Figma is a catalog of bad UI, UX and ignorant product management. Figma normalises these flaws and this effect is magnified. It’s a destroyer of design in the world.
We design in Figma, yet the Figma itself is not designed.
When designer uses Figma daily they stop noticing how bad those things are. Patterns are not just normalised, they are ingrained into subconscious of designers.
If I ask you right now to name few examples of bad UI/UX in Figma, without looking? If it’s hard to remember any, that’s because they are ingrained at subconscious level. You see them 10 times every day, and you stop noticing. With better designed software, like macOS for example you will remember inconsistencies because they stand out.
After using Figma for awhile, these things are committed in your subconscious memory. You may not even notice how in your work you repeat those bad design decisions. And you may even have a feeling that those have some reason or authority attached to them.
Using badly designed software affects designer in multiple ways. You may have difficulties coming up with new ideas, feel your creativity going down.
Having Figma’s flaws committed in subconscious memory, you may not even notice how in your work you repeat those bad design decisions, producing design with questionable or plain bad decisions without realising it.
And we don’t know what effect this will have on the future, being a bad influence on new generation of designers, since all they know is Figma, and its authority over young minds is strong.
Solution no one wanted.
In 2012, Figma founders were creating an app based on a real-time collaborative platform when they stumbled upon the UI design market. They weren’t looking to build UX/UI software; their interest was to be the first with real-time collaboration.
Collaborative real-time design wasn’t a problem that needed to be solved at that time. There weren’t that many designers working in teams. And because technology, network speeds, and processes weren’t there yet, collaborating through Figma with other departments wasn’t a need.
We all just wanted a “Sketch, but for UI.”
Back at that time, we all just wanted a “Sketch, but for UI”. Instead, we got a “UI design tool to prove that it’s possible to have it in the browser, with real-time collaboration.”
I don’t know about you, but in all the years of using Figma, I can count maybe on one finger how many times I used real-time collaborative features. I’m not talking about multi-user project sharing, but actual real-time cursors of designers working together.
Real time collaboration works for collaborative software development where you set out your approach and then work towards executing it in the most efficient way, with all parameters known in advance.
In design, real-time collaboration may be a fit for reviews and feedback, but for actual design work there’s not much that will benefit from it.
Let’s look at some Figma’s problems:
UI for ants.
This became Figma’s famous “calling card”: the one-pixel controls. You often have to precisely click on a 1px wide area to change a numeric value. Click-and-drag is attached to the input control’s vertical border, which is 1px wide. You must click with robotic precision at exactly that pixel. At the same time the mouse button is pressed, potentially moving the mouse off that pixel at the very last moment.
And in some places, the active area is done correctly, while in others, it’s a 1px hunting torture. You can’t remember which is which, and it’s a sad kind of lottery every time.
How did it even pass any acceptance testing? How did this happen to be in a released product? How can it remain unfixed for 5 years, if not more?
Perhaps it was not communicated to the developer that the click area is not the same as the visible part of the UI control. Maybe initially it was designed and implemented correctly, but then some regression appeared.
But still, not fixing this for years?
Do we classify issues as less significant if it’s about something that’s physically small? Maybe in the mind of a product manager, this became a tiny, one-pixel issue that got lost!
Regardless of the reason, it’s an example of the normalisation of having no empathy for users, not following through, and perhaps not having a product manager who really cares.
Mega-menu for no reason.
The mega-menu has multiple unrelated items for no reason. I don’t even know why it exists. If its primary function is browsing components, why are plugins included? Who is so bored with choosing components that they think, “I would really like to browse some plugins right now… if only there was an adjacent sub-menu for that…”?
There is plenty of space in the toolbar to have its own icon and menu for plugins, components, and widgets.
The plugins menu’s empty state is an opportunity to examine what might be the most uninspiring and lazy graphics: an outlined puzzle piece with a solid bookmark.
“Save plugins for quicker access”, you say? Challenge accepted!
Simple search:
Mega-menu for no reason.
The mega-menu has multiple unrelated items for no reason. I don’t even know why it exists. If its primary function is browsing components, why are plugins included? Who is so bored with choosing components that they think, “I would really like to browse some plugins right now… if only there was an adjacent sub-menu for that…”?
There is plenty of space in the toolbar to have its own icon and menu for plugins, components, and widgets.
The plugins menu’s empty state is an opportunity to examine what might be the most uninspiring and lazy graphics: an outlined puzzle piece with a solid bookmark.
How about that philosophical quote. “Nothing tried or saved yet”.
“Save plugins for quicker access”, you say? Challenge accepted!
Simple search:
We have saved plugins and searched, pulling some out of the saved list, but not all of them. As if it wasn’t enough confusion with similar names and tiny icons.
Looking at how plugin browsing is designed, I wonder if the person who designed it talked to the person in charge of the plugin market. Because if they did, they would discover immediate problem with having an endless list of plugins SEO-named after the same things. How to differentiate between them? Having tiny and somewhat blurry icons does not help either.
If only there was a plugin preview or page to read about it without having to run. And there is such UI!
The plugin item has preview mode which indicates that there was a seed of a good design solution in there, it just wasn’t explored. I think the whole plugin menu was supposed to be master-detail. But then someone said, — let’s cram all that into one menu-dialog!
And why make three dots to open a tooltip that is a button to open plugin details? Instead of familiar detail disclosure pattern that’s been around for many years.
“plugin russian roulette”
When you click on the plugin, in some cases it will be a preview, and in others plugin will run. Can you remember which is which?
Choosing plugin is a game of “plugin russian roulette”. Click on it, and then try to remember — should you have clicked three dots in this context? Too late now! And you wonder if it will ruin your design immediately or prompting you to undo and reopen the mega-silly menu to look for that plugin again.
There’s no consistency in plugin SDK because some plugins require pressing a button in plugin UI, while others will immediately perform their magic on whatever you had selected.
It should have been more opinionated framework, maybe with plugin UI kit. In creator-driven market you want to systemically organise creations.
This plugin ecosystem seems like s project abandoned about 3/4 of the way.
The whole plugin and designs exchange “Figma Community” is a fascinating subject for another story.
The icon for “you’re not leaving here”
In top right of menu we have this symbol, an arrow that goes around and in.
The symbol not found anywhere else, before and since.
So it’s an arrow that goes around and inside? It looks like something is being put away, minimise, perhaps?
But it’s “detach menu”. The pointless mega-menu is so large they have to add this functionality now.
Funny that this “detach” puts menu in a “do not move” state. You can detach but don’t move it anywhere to the side. only if you want to leave it covering the canvas! Which is opposite form what you would expect to happen.
Red flags
When you see some function presented in a product twice, usually it’s a “red flag”, which suggests that either there was poor communication in a team, and lack of strategic design leadership.
Here we have Components menu implemented twice. They’re even close that you can open them both side by side:
How bad is such duplication? A user will wonder: what am I supposed to do, if I get used to menu on the right, what if they remove it later? Is selecting from menu on the right supposed to be quicker, that’s why they added it? Or there’s a functional difference between them? Can’t tell, visually they’re same.
So… they just made this same menu in two places, for no reason at all? Just to mess with us?
And to mention main navigation sidebar:
There’s no visual hierarchy or grouping order, looks like it spontaneously came together with things added by different people for different reasons.
- “Your teams” — is that a section name or a button? Seems to be completely bogus: it’s not clickable and there’s no actual teams under it or near it.
- Here’s “Teams”, but is it list of teams below? The first is the team and it has an icon, but why projects look same and are on same hierarchy level? I guess they never tested it smaller customers when name of the team is often same as project.
- “+ Create new team” button, is it that a frequently used, important function, to have it constantly take space here, where we need space? How often we use ”Create new team”?
Develop MODE; “It’s no Good” or “Useless”
As a design problem developer handoff is very interesting to solve, and it’s a great opportunity to redesign Figma’s modes in meaningful way. You can look at user’s account role for example, and show them relevant UI functions.
It’s bad enough that prototyping is a tab that creates a “mode” while you have it selected. I wish Figma solve general problem with modes. But they just piled on with “Dev mode”.
When it was announced it looked weird, out of place. Like designers decided to get revenge at developers, declaring them being too stupid, and therefore this ”dev mode” is needed for them. And then develop mode was designed so that it’s more complicated than it actually needs to be.
Maybe they just haven’t got time, with all the money counting? Product manager says “Just call it whatever, “developer… dev. mode” for now, until we have proper UX design for it. And make a switch to enable it”.
Months later — “We need to present this stuff to public. Make it look like it was intentionally designed like this — make that switch really fat!”
It’s equity market capitalism eating the design.
When you created a startup with goal of selling it, and making money, you would be consumed by chasing investors while product gets reshaped to cater for investors, no longer being the tool for the people as was intended.
Chasing after “enterprise features”, adding AI just because, and integrations with other “enterprise” software nobody asked for, sounds familiar? Notion is on the similar path, when you can’t do many of basic editing tasks, but let us update you on our new “enterprise features”…
Figma stumbled into this position by accident and now is setting lower standards and destroying the design craft.
