Ongoing debate over new Figma UI

over 2 years ago from Mattan Ingram, http://mattaningram.com

  • Ryan MackRyan Mack, over 2 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, over 2 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, over 2 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, over 2 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