tw-rl

🤩 @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 👇

Figma @figmadesign🚀 Just announced at #Config2021: FigJam. FigJam is a new online whiteboard for teams to ideate and brainstorm together. Check it out: twitter.com

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.

One challenge when designing for FigJam is trying to define its own visual language AND making sure the whole product still feels like it's from Figma. While exploring different metaphors for non-draggable icons, @jenny_wen pushed me to be consistent by drawing them in sets.

At Figma, everyone is encouraged to try bold new ideas. Often in a form of remixing each other's work. In the end, it becomes "our ideas" instead of just "mine". This changed the way I view collaboration work forever. Check out @nikolasklein’s talk on Collaborative Creativity

Niko @nikolaskleinFloored by all the feedback I received after yesterday's talk about Collaborative Creativity! Thank you so much!!! ♥️ Quick recap below. The talk was recorded and will be published in a month and here are all the slides: twitter.com

An example of Collaborative Creativity: @willyvvu, our engineer (v talented designer as well) shared his vision for the toolbar during the early design phase. I remember getting super inspired by his ideas and it definitely had an influence to the toolbar we are seeing now.