Collapse Artifacts in Figma

Figma, Sketch, and other UI Design tools have what I like to call an “anarchy canvas”, a functionally infinite canvas, with no built-in mechanisms for organizing, which forces designers to use spacing and positioning to communicate relationships between objects.

One of the many problems that arises with this anarchy canvas is that designers leave artifacts surrounding the final screens. I will be specifically focusing on the problem of artifacts in this piece, a broader critique of the anarchy canvas might be warranted in the future.

A screenshot of a few screens for ParkHub with their associated artifacts floating around them.

Typically, these artifacts are either removed once they’re no longer needed, or are moved to a “playground” page, to separate them from production-ready screens.

Both of these solutions have significant drawbacks.

With the first solution, the inspiration screenshots are lost to history. What was the designer thinking? What were they trying to emulate? When we remove inspiration we remove the context surrounding the decisions that were made.

With the second solution, we disconnect the artifacts from their relevant elements, again, destroying useful context. The artifacts can be copied by themselves, creating orphans of inspiration, or the artifacts can be copied along with their relevant elements, but this runs the risk of the relevant elements becoming out-of date as the production screens continue to be developed. To prevent this, the designer will have to update both places.

* Typically in Figma, master components exist on the final page, which is convenient in tying them to the relevant screen, but it makes it hard to find the master components without right clicking an iteration and clicking “go to master component. Sketch handles this differently, when you create a component (called a “symbol” in sketch) it sends it to a different page. Annoyingly, that different page also adheres to the “anarchy canvas” principle, where each new element is arbitrarily appended to the right of the most recent symbol.

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