26

Ongoing debate over new Figma UI

4 years ago from , http://mattaningram.com

Figma just updated the UI of their design tool: https://www.figma.com/blog/ui-refresh/

This update has not been very well received by designers who use Figma as can be seen in Spectrum posts like this (I'm in there a bunch): https://spectrum.chat/figma/announcements/we-refreshed-figmas-ui~fa767089-1921-44b2-88ab-9f2cd5eaafec

The primary reasons given (beyond font bugs in Windows) are just how overly minimalist it has become to the detriment of ease of determining what is a label or input or easily visually scanning the layers panel. Very little was done to the overall structure of the UI, but all outlines around inputs were removed, labels got smaller and faded gray, layers and their icons are smaller, harder to read, and now components are in faded purple which is even more difficult to read on a white background.

It seems like these changes go against almost all the basic rules of design usability and accessibility. It's hard to look at (much worse contrast and small font size), it's hard to tell what is an input or not, and most egregious in my opinion is it's hard to tell why they made this change.

If the overall UI was revamped to allow for new features or to address major issues users had with it (biggest visual complaint was that it was a little bland) that would be one thing, but even with their blog post about it is unclear why all visual hierarchy and function identifying design elements had to be removed.

Apparently this was tested against users, but I cannot imagine any users with visual accessibility needs finding this more usable than what we had before. I think it also speaks to how often user feedback is biased by aesthetic changes, where they will say something is easier to use because it looks prettier than before.

Any other Figma users here equally frustrated and confused by the new UI, and can anyone from Figma provide some context as to why this change was made and how testing was done?

37 comments

  • Sacha GreifSacha Greif, 4 years ago

    If they've done testing then I trust them, but I personally think it's a step back in terms of usability and discoverability.

    I also think there's a real bias among designers once we get familiar with a UI, where removing stuff always looks "better" to us because we only see the visual improvements without perceiving the decrease in usability for users not as familiar with the product as we are.

    It's also the reason why so many logo redesign consist of taking a well-known mark and simplifying it or removing part of it. It seems like a natural evolution towards more "elegant" design, but at the same time slowly chips away at what made the mark successful in the first place…

    12 points
    • Zsolt Kacso, 4 years ago

      Interesting point, however, in both cases would you say the target audience are people already familiar with it and for them it works.

      0 points
      • Sacha GreifSacha Greif, 4 years ago

        I would say the more familiar you are, the better it will work for you. So it's a spectrum going from designers working at Figma who are 100% familiar with the product and can manage fine with no borders whatsoever, all the way down to new users who have never opened a graphics app in their lives.

        I'd say most of us fall somewhere along that spectrum, but personally even as a regular Figma user I much prefer the old UI.

        3 points
        • Denis RojcykDenis Rojcyk, 4 years ago

          I'm not sure. I know the product very well, have been using it primarily for over a year now. I was really familiar with it, but now I spend an unproportional amount of time just looking for the inputs and not getting lost in the structure.

          I would argue it might be the opposite. The less familiar you were with it, the better it will work for you.

          1 point
    • Mattan IngramMattan Ingram, 4 years ago

      Eli Schiff does not approve of your trust: https://twitter.com/eli_schiff/status/1113992202286510080

      He doesn't reply to me on Twitter anymore because I kept teasing him about his politics (I don't block people on Twitter), but I do tend to agree with his take on things like this.

      Our obsession with being nice to a fault means it's difficult to have real conversations about the value and process of redesigns like this. I don't want to hurt the feelings of the designers who worked on this, but I also want to make it clear that this is not just standard backlash to any kind of change.

      -1 points
    • Ktrn DsrsKtrn Dsrs, 4 years ago

      I am probably one of the very few who were really happy with the UI update. And I wonder how would have be my reaction 1y ago when I was not that much familiar with Figma. Probably the face that I know the interface by heart create a bias for me...

      0 points
  • Ryan MackRyan Mack, 4 years ago

    It appears they conducted several phases of user research and found no major issues. They were also anticipating backlash amongst the community, which isn’t new. Don't have to look back too far to remember how Jony gutted skeuomorphism which turned out to be a big step forward for the world.

    I wish we knew more of the nitty gritty in the challenges both the users and the Figma team were faced with and what led to the decisions that they made. We can only critique with what information we have, so hopefully we'll learn more soon. Personally, I haven’t had any usability issues.

    8 points
    • Mattan IngramMattan Ingram, 4 years ago

      I don't have very much faith in user research these days. Not on principle, but more in practice. It's rare that companies have hired UX researchers as opposed to just having designers or customer support do it. Without details about the number of testers, accessibility needs of those testers, and how the testing was executed, we have no idea if it was good research or not.

      We have been developing accessibility guidelines and standards for years now, but Figma's UI refresh means we they can just ignore that because some testers liked it?

      The number of times I can think of where I have run new UI by users who were enthralled by the aesthetics and strongly assured me it was much better only to find out later in production that it didn't actually solve their problem, they only imagined it did.

      Considering there is very little structural change to where controls are in the new UI, I would be very surprised if reducing font sizes, lowering contrast, and removing input indications would improve a new user's ability to learn the tool compared to the old UI.

      6 points
      • Ryan MackRyan Mack, 4 years ago

        I guess we’ll have to see if/how Figma responds. For now, and particularly as designers, we can only be empathetic with the team until we know more about what went into the decisions. It's what we do.

        We can only hope that they—a team that has raised $83 million—would know how to filter bias in their research and conduct the tests on both existing users and new ones. But it's totally plausible and does happen that biased decisions are made.

        As technology adoption increases and interfaces permeate our daily lives, it’s only been shown that less is more when it comes to interfaces. We probably wouldn't get very far if no one ever pushed standards and guidelines to see where improvement lies. So, if anything, we can look at this as an experiment from figma and learn from it. Unfortunately, sometimes that comes at the expense of users and/or their business.

        1 point
        • Mattan IngramMattan Ingram, 4 years ago

          Generally I agree, but it is frustrating that they essentially gave the UI a new coat of paint without actually addressing any of the major issues and missing features we have been asking for. So when that coat of paint doesn't seem to make much sense and isn't explained beyond "we needed to refresh and we tested it" it can be worrisome.

          I still can't search my layers panel for a specific element, and now the layers panel is lower contrast, smaller text, and deeper indentations than before so what was already difficult is even more difficult now.

          I can't recreate my web designs 1:1 with Figma because it does not have box-shadow spread, single edge borders, content that resizes elements, etc. I want to see that team effort and money going into things that will keep Figma competitive into the future. I switched from Sketch to Figma for some very good reasons, but I am already beginning to look at tools like Modulz or Hadron because they reflect a more modern view of design and they actually work the way the web does.

          1 point
          • Ryan MackRyan Mack, 4 years ago

            Yeah, the frustration is understandable. This could've been a low hanging fruit for them and something that's been on the roadmap for a while and still not inhibit progress on new features. The innovation and engineering mindset Figma brings is refreshing and don't foresee them slowing down on that front.

            1 point
            • Mattan IngramMattan Ingram, 4 years ago

              I think the Figma team is great and their hard work shows, but I am beginning to believe that at a core level attempting to recreate the environments you are designing for will always fall behind a tool that works in the environment you are designing for.

              I wouldn't be surprised if in the next few years there is a large switch for web designers from tools like Sketch/Figma to tools like Modulz, Hadron, Webflow, etc. and eventually the same thing will happen for native designers.

              Trying to recreate all these web features in Canvas means you will always be a step behind a tool built with HTML and CSS.

              1 point
              • Ryan MackRyan Mack, 4 years ago

                Yeah, agreed. That's the beauty of competition.

                The line between pseudo design [like mockups/comps] and actual implementation is slowing blurring for tools as we inch closer to creating and implementing in real time, re: no-code movement. Though, web standards had to reach a point for apps like you listed to become viable and as those standards improve, the apps will too, bringing in more users.

                2 points
                • David ThornDavid Thorn, 4 years ago

                  Nothing meaningful to add except I love seeing more of these discussions back on DN.

                  3 points
  • Ollie BarkerOllie Barker, 4 years ago

    I use Figma occasionally and Sketch constantly. Perhaps I'm biased by using Sketch for work but I've never liked the Figma interface, for many of the reasons already posted. I feel like I have to figure out the interface every time I use it, while Sketch I just understand it.

    6 points
    • Artur Eldib, 4 years ago

      this is, obviously, because you use Sketch more often.

      2 points
      • Andrew C, 4 years ago

        I don’t believe this to be true. There is a learning curve on both initially but you get over Sketch’s fairly quickly. Figma has done an OK job but most of the new design tools suffer from UI indeference.

        1 point
  • Andrew C, 4 years ago

    Yikes. Whoever thought removing borders from inputs needs to head back to class.

    I wonder what the testing on this was like? I’d love to read a case study on this.

    6 points
  • Andrew Richardson, 4 years ago

    My only issue at this time is that the 'Pages' UI seems oddly obscured, which is something I was already having to constantly tell people that it existed.

    I can understand the accessibility concerns though as it was a thought I had when I was evaluating the new design. The removal of "Tab like" structure seems a bit optimistic about how people would interpret those without a strong visual metaphor.

    While I absolutely love Figma I cannot say it's UI is better than Sketch's and I don't think these tweaks did it any favors in that area. Sketch does a much better job of creating contrast and clear grouping of UI elements, while Figma kind of muddies all those things a bit.

    3 points
    • Mattan IngramMattan Ingram, 4 years ago

      I also have the issue with having to tell people about the Pages panel.

      Here is the right panel with the same element selected in Sketch and Figma respectively. While Figma's panel is certainly cleaner aesthetically, Sketch's is significantly easier to parse visually and if they just adopted Figma's ideas of tabs (such as for prototyping) they could clean up theirs a lot too. I also like that Sketch shows more information up front such as the color and values for dropshadows (not to mention they have shadow spread and Figma doesn't).

      Sketch vs Figma Panel

      13 points
      • Brandon Carson, 4 years ago

        And you can actually read the labels on Sketch versus whatever weird aliasing is going on with Figma. Honestly one of the biggest reasons why I never could get into it.

        1 point
      • John Williams, 4 years ago

        I've been using Figma for 2 years. Their new UI still makes me hesitate when I need to edit the form fields whereas Sketch is immediately obvious. It's a step back in usability.

        3 points
      • Ktrn DsrsKtrn Dsrs, 4 years ago

        I still have an easier time with the UI of Figma than the one of Sketch that I find too busy :-[.

        My transition to Figma from Sketch was so easy going and flawless that now when I use Sketch, I have a hard time using it...

        0 points
  • Jennifer Nguyen, 4 years ago

    I've been using for Figma for a year now and I definitely noticed the changes right away, my first reaction was "this is different" but not in a bad way but not in an improvement way either. The change hasn't affected my worfklow at all, I'm still able to do the same things as I've done before because I've already been conditioned to where everything lives. For the most part, things are still in the same spot with exception of a few items. So the lack of borders don't bother me since I know where everything is. I do wish they prioritized fixing other things instead of doing this UI refresh but hey, we all know that's not up to the designers but the higher ups.

    1 point
  • James Young, 4 years ago

    I suspect I'll get used to it with continued use but I have to admit my first impressions on all the borders around inputs/elements wasn't that positive and it made it harder to quickly jump to different areas to perform simple tasks.

    Without any sort of borders, everything is very low contrast.

    1 point
  • Zsolt Kacso, 4 years ago

    I personally like it and honestly if you're just picking up Figma, you'll just have to figure it out :)

    1 point
    • Mattan IngramMattan Ingram, 4 years ago

      I'm not just picking it up, I'm very familiar with Figma. The low contrast, tiny font size, and tinier icons adds a lot of strain to my eyes. I can't imagine what it must be like for someone without great vision or is new to the tool.

      1 point
      • Ryan MackRyan Mack, 4 years ago

        Correct my if I'm mistaken, they've increased contrast by bolding labels and making the panel background color pure white versus a tinge of gray. The font sizes haven't changed significantly other than uppercase labeling. One could argue it has improved usability—parsing panels seems to be a bit easier now.

        Ideally they would implement an accessibility preferences for increased contrast, font sizes, etc.

        Old vs new figma panel comparison

        2 points
        • Mattan IngramMattan Ingram, 4 years ago

          Your image is broken (I was able to grab the URL and look at it).

          The section labels are bolder (and no longer uppercase), but the actual input labels are less bold and those are the ones that matter way more. Also changing them to lowercase makes them a little less differentiated from the input labels below them.

          It's good they made the panel white, but go compare the old layers/pages panel to the new one. The contrast has gotten a lot worse, and has much smaller text and icons (and oddly much bigger indents for each layer of hierarchy).

          0 points
          • Ryan MackRyan Mack, 4 years ago

            Hmm, personally, I think the contrast is a little better on the layers panel now that the labels are bold; the gray backgrounds for frames always threw me off spatially. And visual hierarchy was a big bump in improvement for me with the increased indentation.

            Again, we don't know the nuances of the problems they were solving. It's easy to point at the changes and call them detrimental, but for all we know they could have fixed a lot of issues people were having before. We just don't know at this point.

            Because you're really having usability issues, you're already doing the best thing by voicing it directly and in the open so they have more data to go off of.

            0 points
        • Andy MerskinAndy Merskin, 4 years ago

          Maybe a good solution would be to reveal the borders when you hover over the entire panel, not just the input element your cursor is over.

          The more I look at these side-by-sides, the borderless ones are immediately much easier to read and scan through if you're just viewing, but when interactivity is involved, I'd want borders to indicate where I can confidently click to change input.

          0 points
      • Jennifer Nguyen, 4 years ago

        Example

        Sorry to hear that you think the contrast is bad but objectively speaking, it does pass the contrast minimum if you inspect the element in chrome browser tools (or plug in the colors in your favorite WCAG tool)...

        -1 points
  • Ryan QuintalRyan Quintal, 4 years ago

    As someone who's only logged roughly 10 or so hours with Figma, I barely noticed a difference.

    0 points
  • Michael Dorian Bach, 4 years ago

    A friend and I were discussing this here at the studio. Hard to pinpoint why it feels weird but he said "It doesn't feel like I'm using a tool. Like my work just blends into everything else. Catches me off guard." I think that is my sentiment too. Maybe we are used to what tools and inputs are suppose to look like and reacting to that. Things definitely feel less clickable / discoverable. Not sure if it's a reaction to change or truly a step back in usability.

    0 points
  • Radley MarxRadley Marx, 4 years ago

    It's clear they're targeting retina monitors because of their thin lines and typeface. My only concern is how easily the design will translate to dark mode (when iOS does dark mode, everyone will be doing dark mode, including web).

    0 points
  • Mr FannybatterMr Fannybatter, 4 years ago

    I’ve been using Figma since launch. No problems at all with new UI. I design on a 13” screen so I welcome a cleaner interface.

    -1 points