menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Figma

Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!

Channels
Team

We refreshed Figma's UI

April 4, 2019 at 4:58pm
The Figma community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

We refreshed Figma's UI

April 4, 2019 at 4:58pm
Some of you may already got a sneak peak at this, but we're excited to launch this for everyone today! Make sure you refresh your documents to see the new UI if you're not already seeing it.
wrote a great post take takes a deep dive into the process for those interested to learn more about the thinking behind the effort:

April 4, 2019 at 5:07pm
I love it! Thank you. Really appreciate to see system font vs. Roboto, I dreamed about this but thought it would never happen. I'm truly touched, the new UI is gorgeous!
like-fill
2
great, but it seems it comes with bugs as well :(
  • Cannot resize the page/layers section anymore;
  • Cutting and pasting detach an instance automatically.
like-fill
1
Is it just me or the files overview doesn't have the new design? There is still border around left column and so on.
I'm gonna be honest, I have mixed feelings with this refresh. Visually, I like it. Unfortunately the new font doesn't render all too well on Windows, but I'd like to chalk this up to Window's terrible font rendering. The new blue accent looks better to me than the previous cyan we had. The iconography in the layers panel and throughout I like quite a bit; I wasn't a fan of how thin it was before. I do like the text labels for Layers vs Assets (previously components) and that the search bar stays at the top of the Assets panel (one of my biggest gripes of the last design).
For what I really don't like, there's two main flaws that stick out to me:
  • The removal of borders around inputs
  • The change in color of the buttons for creating a mask/component/boolean functions
Even though I know the UI of Figma as I've been using it for at least a year, all the values in the inspector panel don't feel like I can edit them. I know I can, but the removal of the border makes the value seem more set in stone than something I can change. Of course visually, it looks a lot cleaner, I think the value they provide in usability far offsets the benefit of looks. Pretty much the same thing goes for the button in the center of the toolbar. I imagine the philosophy behind this change was to make them more in line with the buttons on the left to select the different tools. The main difference is these buttons' functions. The buttons on the left of the toolbar correspond to a choice of a tool to pick. Thus, leaving all of them grey besides the one you've picked (highlighted in blue) makes sense. You're making a choice between multiple different options. This is in contrast to the function of the middle buttons, which is to do an action directly. When having something selected in the canvas, these buttons appear, but appear grey, which to me indicates that they are disabled, as that's what the grey on the left also leads me to believe. In the previous design, these were green, indicating that they were actionable. Now, I'm not sure if I'm able to perform any of the actions on the selected item. The indicator for if an option is doable is if the option appears, which I guess makes sense, but is a large shift from the previous behavior of showing every option and greying out which ones are not applicable at the moment.
While I know I'll get used to both of these changes, I don't know if they've had the intended effect or even a positive effect on the UI of Figma. Of course, I still love Figma as a product, but from a UI standpoint, I don't think these changes did much good. I'm no expert on these things (though some day I hope to be) so maybe I'm totally wrong, but these are just my initial thoughts on the redesign and possible risks I think this new UI could run into.
Edited
like-fill
21
Great write up and really liking most of the new updates. Things I am not huge fan of so far, that I am sure I will get used to:
  • Really miss the borders around inputs
  • Team library hidden under assets now takes two clicks to access. The ergonomics of mouse movements to access seems much more expensive. Perhaps I am just overly critical here since we use it quite frequently in our teams workflow
  • The contrast is ridiculously low in some places (labels in the overflow menus)
Edited
like-fill
10
Local fonts stopped working for me! Can't load any of them.
what I mean by the font being nearly unreadable
like-fill
10
I've been using Figma for awhile now and am still checking out the refresh. It feels cleaner, but I'm very concerned that the Pages section is no longer draggable. Please tell me that is a bug.
like-fill
5
I don't think so. I think it now adapts to the height of your list of pages and you can either collapse or expand.
like-fill
10
On win10, the font is very poorly read =(
like-fill
4
Hey guys It looks great, but I think you simplified too much. Not having any separation between all these controls makes it a lot harder to use. Definitely bring back subtle outlines or bkg (maybe they can get darker on hover). I was on board with the redesign until I saw the text panel which made my brain hurt. (See screenshot above)
Also, the purple used for component color in the layers panel is a bit light, hard to read.
Edited
like-fill
25
That feeling when you just got used to..
1) Borderless inputs — please, NO. It's a visual mess. Make it 0,0001% gray but they must be visible always. 2) Labels for Layers and Assets make noise and there are too much clickable elements in this area (top-left). Left-bottom icons were so good to target. 3) Hide Library button — bad idea, i press it hundred times a day 4) Violet components names are too noisy, colorfull and distractive. Black is OK, bold for masters OK. I don't use regular layers, only components — now it's pain for my eyes.
New UI looks closer to Sketch, desktop-system style. For me it's not good — previous Figma had minimal, less noisy, iPhone-style look and feel.
like-fill
22
I'd like to see redesigned prototype arrows also - check out framer, they route around and go behind frames so it's less messy
like-fill
3
I tend to bounce around pages a lot, especially within library files. Dealing with a max height for that list is going to be very frustrating.
like-fill
2
like-fill
20
Font rendering
Love the new UI changes, Surprised me at first like anything that's changed, but really easy to wrap my head and eyes around it. Love it!
Hype hype hype, at first second when I saw the post. I saw the post on mobile, I couldn't see the interface. The hype still there.
Arrived at laptop, opened Figma.... Disappointment. I read only half of the article title: "refreshed figma", I thought you'll brainstorm, research/study the feedback and you'll come with a refresh at UI and UX for the product, instead it is a cleaner interface with same the problems and cleaner this time is not better because it doesn't have enough white space (or negative space, however you want to call it).
Also, there are visual bugs added as well. :/ (On Prototype tab, hover at Device input, the arrow jump on the right side -- weird) It looks like somebody in a hurry tried to finish a task.
I don't understand what issues does this redesign resolve, but I'll return to the article from the blog and find out, I hope.
I didn't criticize your work, I tried to give a constructive feedback. Anyway, congratulations because you try to make a consistent ui, congratulations for iconography and I hope you'll take into account that Figma as a product should be efficient at first (brainstorm the ux part more).
Edited
like-fill
9
I wonder if any testing was done before this update was rolled out. I've been using Figma for about 1.5 years, and suddenly I can't intuitively navigate around like I used to; in fact I feel completely disoriented by an interface that has been sandblasted to oblivion. I hope the Figma team listens to the feedback here and can keep some of the improvements (though I'm not really sure what those are yet...) and reintroduce aspects that worked just fine (borders around the inputs/controls). Additional functionality and continued improvements to the prototyping tools would have been much more welcome than a UI downgrade. That said, I really support the Figma project and hope these issues will quickly be worked out.
Edited
like-fill
29
Another vote for borders around input boxes.
like-fill
34
Show more messages