What a collaborative design tool like Figma brought our team
Within our product teams at Picnic, researchers, designers, copywriters, and developers work closely together. For example, at the daily stand-up, where we all share what we’re working on, and where we as designers hear how we might be able to assist our colleagues in their work. Or at the weekly UX-kickstart, where we share progress and make decisions with our fellow designers. Or when we do demos at the end of a sprint, and team members show what they have been working on and we celebrate what we’ve achieved together. The developers let the latest feature see daylight for the first time and designers show the freshest prototypes. Whatever it is that we do, we do it together.
But, not that long ago, the design tool we used didn’t reflect our collaborative work environment. We used Sketch and the files were all saved on our company Dropbox. Each project had its own structured folder including Sketch files, Principle prototypes , and all other related files. For a business owner, this is like entering a maze. And if the copywriter wants to work on a project, he has to make sure the designer has saved and closed the file he wants to open. Otherwise, conflicted copies end up all over the place. You can compare it to a locked archive cabinet, that only the designer can open. Everyone who wants to take a look at the progress or start the next iteration has to ask the designer for the keys.
Luckily, we are still a small team of designers. This makes it relatively easy to experiment with new tools and implement them into our workflow. So we looked into the world of design tools and we gave some a spin. We tried Framer X, Figma and the beta of InVision Studio. All great tools with their own advantages, but after weighing the options, we decided to go with Figma. Why? Let’s take a look.
Multiplayer designing
Figma is like a multiplayer game, we’re all online working together in the same space. We no longer have conflicted files on our Dropbox anymore (yay 🎉) and we can all work on a project at the same time. Today still, it feels like magic when there are multiple cursors moving over your screen, building up a new app feature. But besides multiplayer designing, it’s also easier to check in on your colleagues work-in-progress. I can open a project and leave direct feedback, try out something and leave it behind as a present, or copy and paste some screens for my own work.
Sharing progress with business owners
In Sketch, you can export the latest flowchart as a PNG and share it with the team. But don’t be surprised if the Project Lead who was on vacation shows-up at your desk two weeks later with a list of remarks. You’ve already entered the next phase of design and might have tackled many of these comments.
With Figma, business owners, developers, and project leads can have viewing access and can always see the latest version of the project. They can also peek into earlier iterations to see what has been tried before. They could even pick-up the pencil and create sketches themselves to communicate their ideas.
“But when everything is set up, it works like a charm”
Co-op mode with copywriters
Another great thing about multiplayer designing is that it’s seamless to work together with our copy team. But beware, inviting others to work on your projects takes some preparation such as structuring your files and clearing up the design process. But when everything is set up, it works like a charm. For copywriters, it’s more natural to work in actual designs. It’s easy to see if the copy fits in the UI because you get a better understanding of the complete feel of the screen or feature. This is better for workflow, copy-pasting is minimized, and errors are reduced.
Component overrides
Besides live collaboration, there’s a lot more gold in this treasure chest. For example, I really like the component overrides (psst: check out my blog on the creation of our own component library). Figma allows you to change colors, text and things like border-radius while leaving constraints fixed. This allows for minor changes while keeping the component connected. And all changes to the master are still visible.
Other stuff we really liked!
Searching for components: Figma provides a search option for searching components, which is much easier compared to the structured menu of Sketch.
Versioning: One of the downsides of working with many people in the same file is that, sometimes, stuff magically disappears 🤷♂️. With versioning, you can go back in time and find what was lost.
Less hardware dependency: New tools require bigger hard drives, faster processors and more RAM to keep up with all the innovations. Everyone loves a fancy new laptop, but wouldn’t it be great if our machines last a little longer? Compared to for example Sketch, Figma uses less CPU and also runs on Windows. This didn’t make us pick Figma, but it’s certainly a nice benefit.
Point of improvement
Intuitiveness: One of the things we miss from Sketch is the intuitiveness of the tool. Especially the layers panel. I used this a lot and found it easy to understand and navigate. But in Figma, you can get easily lost and it’s more difficult to discern the difference between groups, layers, and components.
Final word
At Picnic, we are really happy with the tool transition. It fits our workflow better. By collaborating inside the tool, we’ve also improved our productivity; giving feedback to each other just makes us go faster. And last but not least, everybody, company-wide, can join the party and see what’s going on in design land.
