Animations

Figma User Interface

Here are two (2) suggestions for Figma Designer to help make it a bit more user-friendly and magical to use.

Panel Expand / Collapse Animations

When toggling "Hide UI", the interface abruptly disappears and reappears (on the right side of Fig. 1a. ) 

It'd be delightful if the UI elements were swept away (dark green position graph) from the center of the screen and subtly faded out of sight. (light green opacity graph) as indicated below in Fig. 1b.

Fig. 1a.

Fig. 1a.

Fig. 1b.

Responsive Panel Colors

Figma thankfully allows users to set a background color for the whole project, which is a welcomed feature coming from Sketch, which locks you into using a white background. 

Unfortunately when using a dark background, the layers panel (left sidebar) and the inspector panel (right sidebar) are blindingly bright. Not only are they pure white, their typefaces and elements are thin and light.

To make the layer and inspector panels more readable, I propose that the UI of both change in accordance to the set background color of the project. I prototyped what this could look like in the column on the right. 

Screen Shot 2017-08-11 at 11.41.09 AM.png

Facebook Gallery Expand

When somebody adds multiple photos in a Facebook post, the gallery is shown in a nice pretty mosaic view on your timeline. If there are more photos in the album than are shown, theres a small "+number" on the bottom right image.

Current Behavior

One might think clicking the "+n" would expand to show more photos in the mosaic. Instead, clicking the "+n" only opens the last photo (red) in the pop up window.

Here's a mockup of what I wish clicking the "+n" button would do: expand the album mosaic to show the additional photos.

Ideal Behavior


Somewhat related to this: I'd love to see Facebook add a filmstrip to the bottom of the photo viewer pop-up window. It makes it easier to navigate through albums by giving you a bird's eye view of the context of the album.

Thanks for checking out this article, I welcome feedback and suggestions in the comments, and feel free to connect with me on Twitter, etc.