From Furniture to Screens
How furniture making has influenced the design of Figma
I studied Furniture Design at RISD before moving to the Bay Area to design the design tool now known as Figma.
When you ship furniture, you rarely have the chance to fix your mistakes. The design and execution need to be as close to perfect as possible. The digital world is different (duh, Pease) — you have daily opportunities to make improvements.
Furniture gives function to what is otherwise empty space. The primary purpose is to support the act of living, whatever that means for each user. Furniture itself is not the focus; the life you create around it is what matters.
The challenge of Figma is to design a product whose ultimate value is how well other people are able to design their own products. This means that Figma should fade away, and enable users to focus solely on their ideas.
Here are a few ways furniture design principles have influenced the way I’ve gone about designing Figma over the past two years:
Tools
It is possible to do a lot with a very basic toolset. A hammer can be used to build a small cabinet or an entire house. With Figma, we’ve tried to whittle down our primary drawing tools to the most foundational yet versatile set, tools that are well-equipped for tasks both simple and complex.
Our pen tool, for example, has been rethought to feel and function more similarly to a physical pen. Vector objects in Figma are drawn as networks of points, rather than traditional paths, meaning you can connect any point to any other point. This change allows for a more flexible and natural drawing process, shifting the focus from procedure to production.
The Figma editor should feel like a tightly knolled workbench. The basic tools you need to get started are simple and well organized. Having the right tools in the proper places is a prerequisite to building.
Control
Tactile familiarity goes a long way towards feeling in control when working with hand tools and digital tools alike. Keyboard shortcuts are a familiar opportunity to give users this physical control and increase efficiency. The product detail I’m most proud of is a key command that addresses an annoyance in selecting nested items on screen.
A common desire is to select the content of an element without selecting the element itself, like selecting the buttons within a toolbar without selecting the toolbar.
When you command+drag, Figma uses a heuristic to figure out which items are the container and which are contained, and it will select only the contained items. This allows you to box select all the icons in the toolbar without selecting the toolbar background itself. I have found this command to be incredibly useful and a significant time saver as it lets me work with the elements in the scene without having to think about layer hierarchy.
Color
The principle that furniture should facilitate living was informative to the original visual design of Figma. Just as furniture should fade away when in use, it was our intention early on to create a system to ensure that the visual style of our product wouldn’t distract users from the aesthetics of their own designs.
A previous version of Figma embraced an “unskinned” visual style, relying almost entirely on a monochromatic palette. It was effective for a time, but as we added functionality, it became increasingly difficult to clearly differentiate between UI components.
At this point, we reconsidered our strategy. It wasn’t that the UI had to totally “disappear,” but instead should go unnoticed. To do this, our current visual style uses color as an additional layer of semantics. For instance, green is used for actions and blue for selection. These groupings across the layout of the tool help inform users at a glance, shifting cognition from how to what they’re drawing.
Design Across Disciplines
To create innovative solutions for design tools, we must continually challenge our collective frame of reference. In his post Grid Systems for Screen Design, my teammate Johan Prag pointed out that “some of the most interesting solutions may come from looking to the past.” I agree and move to cast this net even wider. The best principles of design transcend disciplines. Let’s look not only to the past but also outside of our immediate field to move design tools forward.
