Being a lone designer at the company can be exhausting. You’ll need to gather feedback and quickly iterate a few projects simultaneously. To offload myself I’m fortunate to work alongside great front end developers who can mock and iterate on ideas and designs.

In turn, to offload them I provided a (simple) design system containing type, colors and our most common components. I did this in Figma, which is my go to tool, as a shared library.

To improve the collaboration further I wanted the entire development team to be able to use Figma. There’s three reasons for this:

  • everybody should be comfortable testing prototypes and leaving feedback early and often during the design phase
  • be able to use Figma as deliverables
  • include everyone early and let them contribute to the design

To achieve this I hosted a workshop for the development team of six. The workshop was two hours and consisted of three parts.

Introduction

The experience with design tools like Figma varies greatly between individual developers, some of whom had never used a tool as such. Therefore, a short introduction describing the purpose of the tool and why we choose Figma over Sketch or Adobe XD was necessary.

I generally described and showed the most important actions and features, such as type, drawing forms, frames, prototyping, code (how to see certain values), and commenting. How and when to use them.

I won’t go into more detail since others have written better and much more about onboarding design tools and their features.

Hands on (let’s play)

I find it hard to pick up tools without trying them, and after all this was supposed to be a workshop. All of the participants had prepared an account for Figma before the workshop and brought their computers. (For this part it’s really convenient that Figma runs in the browser!)

For the core of the workshop I prepared a game of Pictionary. The participants worked in pairs in Figma (two users in one file). One would draw a word the other would guess using the commenting feature. Read the rules of Pictionary if you’re not familiar with them.

We ran a couple of turns before we ended up using the projector where all participants where guessing just for fun.

Before wrapping up, we experimented with the prototyping feature to mashup different “answers” into sequences.

Summary

We ended the workshop with a brief discussion around the workshop and Figma. Could they understand the tool better? Would they be more comfortable giving design feedback to designers? What improvements could be made to the workshop?

Take aways

It’s too early to tell if any of my overlaying goals are met, but I believe the developers will give better feedback. Figmas commenting feature is very useful, since anyone can test your prototype and leave feedback at specific places - and the feedback is kept inside the design tool, not in Slack or email.