Our Switch to Figma

Our switch to Figma and how we use it to collaborate more effectively

Design work in a fast-moving agency environment can sometimes get really challenging. Here over at Martian & Machine, MVP's and various digital products get launched in a matter of weeks. Prototypes are constantly being tested and iterated. We like to surround ourselves with new ideas and innovative concepts all the time - after all, we are designers.

To help us keep the necessary speed and expectations high for everything we do, there is now a small universe of design tools - each coming with its own delight and something special other tools don't have. It was fun to try them all out for a while, but it's not anymore.

What was the result of this? Messy file archives. We had hard times keeping track of actual screens, constantly trying to keep links, videos and screenshots up to date in Jira for others. Handoff was scattered across the project - some screens ended up in Zeplin, some flows ended up in Marvel because we had to show it to a client. 

“Just the complexity of keeping everything and everyone in sync was enough to start the day in frustrations.”

It was time to re-evaluate all the tools we use, to simplify and unify our design stack. Our eyes were set on Figma as a primary solution to our problems.

So, why Figma?

Although Sketch was our long-time companion and we'll probably still use it in a small degree, it's no surprise more teams decided to make a switch to Figma. It was hard to ignore all the buzz created in the design community, but our decision didn't come overnight.

By now, most of us had already used Figma for experiments and small side projects anyway, or at least periodically fiddled with its new features. After amazing last two years of development, they managed to catch up with the feature set of Sketch and do so much more without major setbacks. Our conclusion was that this software is now mature enough for us to be confident it won't let us down any time soon.

Working in Figma - design and collaboration happens in the same place

Figma is an ecosystem of tools, covering more than enough areas to survive our design process in the same place. Along with real-time collaboration abilities, this tool is proving to be beneficial for everyone in the team, not just designers.

Product managers are now able to track the design progress more efficiently, leave comments and have proper discussions about design solutions at the right time and place. Developers can now freely browse through projects, inspect design elements, export assets themselves, most importantly quickly access and click through prototypes.

 "where is (...)", "how can I find (...)" and "is this up to date ? " 

With the integration of Figma those questions were eliminated in the first week of introducing the program. 

Although real-time collaboration sounds a bit repulsive at first - the thought of someone 'stalking you through clouds and websockets' - it improved team communication on design related subjects. Another important feature is the ability to quickly share links to specific frames or prototypes. This also improved traceability of designs we produce and shortened our time to do project management.

Minimal onboarding

It's quite easy to get started with Figma if you've ever done any kind of UI design work. Today all design tools are very similar in look and feel, so there's no worry about getting used to a new type of interface. Main differences can be found in the way some features are used (like components or styles), most of them even improved in comparison with their competitors.

No more 'files'

Of course there are files, but no need to organise them locally anymore. We do occasional backups just in case, you never know what might happen. Also no more duplication of design files, 'v1_finals', whatever way designers used to mark up-to-date designs and tried to collaborate with other designers.

We've used Abstract with Sketch to help us with this, so we already know a thing or two about version control, maybe even too much - and that was the problem. Too many procedures for a small team.

Focusing on design again

More different tools = more procedures required = more file maintenance on multiple locations, preparing the same design to be compatible with other software, have some deliverables that are actually useful to more than one person, upload here, export there...

It's obvious that we began to waste a lot of time trying to satisfy the needs of all these different tools rather than making improvements to our designs. All good practices we accumulated over the years can now shine again.

Getting there

No change ever comes easy, at least not without a plan. Take a trial run first, build something that fits your use case. Try to predict the amount of time available to make things fully operational, involve your design team members and let them experiment as well - see how it would affect the design process. Figuring out the new design stack is the easy part, next step is to get everyone on board. Luckily, we're not a company huge in numbers, embracing changes for the better are always welcome in our environment. Our plan was to start gradually removing at least some of the tools from active usage throughout the first quarter of 2020.

First ones to go were the (external) version control (Abstract in our case), quickly followed by Marvel and other presentation tools. There was simply no more need for these from the start, Figma got it covered.

Next item on the list - handoff. This one is tricky, developers are used to Zeplin and are less prone to change things that work well. For that reason, we wanted for development teams to have a more frictionless transition. Although having a tool dedicated only for handoff is not a bad idea, it can get tedious to constantly synchronise and maintain screens in separate tools.

Lastly, on to design. Like with any other design software you have to tweak your workflow, adapt, and of course do the tedious part - moving active projects from Sketch to Figma. This process is relatively easy with just importing files from Sketch and it will work to some extent. Symbol libraries had to be redone, styles as well. Nothing can ever be 100% compatible and we expected some things to get broken. Bigger teams might need to invest more time and manpower to adapt everything, depending on complexity of their projects, but then again this is not something that cannot be done or stops anyone from doing new designs in parallel.

Figma is a great fit for our needs

From all design time we're given to do any project, we like to invest most of it in the concept phase. This means a lot of pen-and-paper, sketches on whiteboards and wireframes. Before moving on to creating the final designs, adding all the bling and polish, we want to see how things work and test what it would feel like to use a particular concept. 

What we really want to deliver first (for ourselves internally and for our clients) is a clickable prototype - as close as it can get to the real digital product without involving more resources. That's where Figma really shines and allows us to be more productive by providing us with all necessary features in a single tool.

Conclusion

Besides prototyping, assembling screens is faster and much more pleasant, thanks to great improvements that Figma brought to us in the form of a more flexible component system and the improved handling of styles.

What we also observed was a change in the way how the design is now prepared and presented around the company and to our clients. It's way faster to assemble prototypes and to share a link, rather than getting dirty with other tools and plugins.

From a developer perspective, it's much more efficient to extract necessary assets directly from the design and focus on front-end implementation.

Safe to say that the biggest benefit we got from all this tool-switching came in the aspect of better collaboration with the rest of the team and better productivity amongst designers.

It brought all of us on the same page - literally speaking.