Figma UI Refresh – Apr 2019

Figma just released a new aesthetic to their design tool. I use Figma every day for several hours, so I care about any changes. Normally, I love change. Change is good. Even when it’s bad. In this case, there are some things to like, but overall, I think they made a mistake. Bottom line: I am about 10% slower in normal use because of the4se changes. I’ll explain. Take a look at the top right of the Figma UI below.

NOTE: I use a 4k monitor. It makes everything small. My MacBook Pro does not know how to scale the interface properly. End result is that everything is kinda small.

Old Style
New Style

Take a look at the tabs. The old style is uppercase with lines to help define which of the tabs is currently ON. In the new style, they are title case and smaller. The on state is subtle and hard to notice. Usability of tabs is an important basic pattern for user interfaces. It should always be clear what is is selected and the tabs should be a prominent element since they are defining the information underneath. I think Figma failed on both counts here.

Now let’s look at some more of the panel.

Old Panel
New Panel

The main difference is the removal of all the lines. This is more aesthetically pleasing and also more efficient is space usage. Unfortunately, it suffers from the same problem as the tabs. It’s harder to find where to click. I have to be much more precise in my mouse movements. Additionally, the sections (like Constraints) is harder to see in all lowercase. I think the use of lowercase is just a mistake. It makes it hard to pick out and hurts the texts ability to do it’s job. It it supposed to communicate the content of a section. The new design makes those headers feel weird and unclear.

As a comparison, take a look at Adobe XD.

Adobe XD Panel

I don’t use Adobe mainly because I think their components don’t work properly and I love the multi-player aspects of Figma. However, the aesthetics of the panel are quite pleasing. Notice how they balance the minimalism with enough lines and signals to communicate their meaning. The uppercase treatment and larger font-size helps define sections.

If I were in Figma’s shoes, I would copy/steal the best parts of the competition. Adobe XD’s UI is one of their best assets. If they were to improve components and introduce multi-player, I would seriously consider switching.

Side note: Designers are a terrible user base. We are incredibly picky and totally disloyal. We jump on whatever cool tool we see. Sketch has enjoyed a period of popularity, but their time is ending.

Ok, last Figma detail – the left hand nav.

Old Nav
New Nav

The key is the total diminishment of the contrast. The ON state is clear. LOUD PURPLE. In the new version it’s totally minimal. tiny light blue. It’s just too hard to see and hard to read.

I’ve noticed this trend recently to whitewash the UI and remove all color. I think it a terrible mistake. I don’t think a UI is better because it is devoid of contrast or color. I actually think it’s worse.

Summary

The old UI had flaws. It isn’t beautiful, to be sure. However, the new version is really not an improvement. It’s a step in the wrong direction. I would encourage Figma to look at the XD look and feel and then get inspired and flip it on it’s head. Make it your own.

Last side note: Spectrum is a seriously underpowered community for Figma. Spend 10 minutes in the Adobe forums and then 10 minutes in Spectrum and you will see how obvious the difference is. You can’t sort. Ideas don’t have specific homes where you can vote and see status of an idea. It’s just a mess. I would have put this feedback there, except it would have been a nightmare to upload all the images.

Really last one: I love Figma and want them to win. I wouldn’t be using it all day if I didn’t. All of this feedback is meant with love.

%d bloggers like this: