@figmadesign ' s new white boarding tool, FigJam launches today! I’m glad to be able to contribute in this huge team effort by leading the design of the toolbar.

https://figma.com/figjam/ 

I’ll be updating this thread on some of the process and design details https://twitter.com/figmadesign/status/1384905547099553792

We want FigJam to be the most fun way for teams to collaborate. The goal is to make a toolbar that is delightful, approachable, and most of all efficient to use.

Every time you open a FigJam file, you will be greeted by a lovely animation made by @jackiechuichui

Details matter. It dictates how the overall product is perceived.

We put a lot of effort into making sure the icons reflect their latest settings. This provides more context, helping people stay informed. It also keeps the toolbar from appearing boring visually.

Marker tool’s icon changes between an Expo and Muji pen inspired style based on the selected stroke thickness.

To get the transparent blur effect of the ink to display accurately, I paired with @RobbieZhuang to find workarounds that do not break the SVG when exported.

The idea of a docked toolbar initially came from
@ryhanhassan 's exploration during a design sprint.

Here are some of the overall toolbar iterations as we progressed.

Ultimately, we landed on a direction that feels light and doesn’t distract people from their main tasks.

In early stage, I defined each tools’ interaction type and categorize them to gain better clarity on how each tool is best used.

Sketching out the interaction patterns helps me stay consistent and intentional on how we want the tool’s icons to look and behave based on their type

The idea of separating draggable vs non-draggable tool’s placement came from @jenny_wen 's riff. Having distinct visual differences between tool types helps set interaction expectations.

To minimize cursor travel, tools are arranged by the most used/important from the middle.