Why Figma is the future of UI design in agile teams

Frosnapers
UX Collective
Published in
5 min readNov 21, 2019

A little background information

As the lead designer at Undo, a rapidly growing startup in the Copenhagen Fintech scene I can proudly tell that we recently won the Nordic Fintech Design Award.

Honoured and surprised as we were, we took a moment to reflect on the past six months, what structural changes happened, what went well and what could be done better… We took the time to sit down for half a day and discuss with the entire product team our process, tools, way of work, way of collaboration etc.

Imagine being in a room for 4 hours with a bunch of extremely skilled and passionate people. Intense. It was very interesting to hear what developers and management had to say about the internal design process. What started as an informal chat about the optimisation of our workflow quickly turned out in a vibrant discussion and a design project on its own. The main takeaway was:

“How can we provide a single source of truth for the designs of every feature at every stage of that feature.”

We didn’t know what the exact solution was at that point but there were definitely a few things that needed to be handled better. The amount of times we switch between tools and the amount of times we had to update files across different tools had to be reduced. Furthermore a better way to communicate the progress of the designs along the way.

The tools and process before Figma

To give you an idea, at the time I used 3 different tools to manage, update and keep track of the designs. I would start in Abstract where each version of my files were stored safely. I would then open my files in Sketch to actually do the design work. And finally, I would export the designs to Zeplin where developers could get the assets and other information needed for the implementation.

In theory a good approach that I applied for a couple of years. Mainly in situations or projects were there was a clear brief, a clear deadline and a clear handover or in other words where a linear process was lined out. However in this setting, being an agile startup, releasing features on a weekly basis, this wasn’t optimal at all.

Context shifts, ad hoc tasks, quick copy changes for specific cases and imagery updates became a time consuming overhead nightmare. I was told Figma could change this.

The switch to Figma

For everyone it became quite clear that Figma would be the best way to move forward. Switching to a new design tool is unfortunately not something that happens overnight, especially not when you have more than 10 huge design files connected to different libraries. And even though you can import sketch files and even libraries into Figma, the outcome is not very clean and I ended up adjusting nitty gritty things that took up a lot of time. Impatient as I am I found it actually more efficient to build all the components from scratch.

Apart from a new way to work with libraries we also had to find a new way to structure our files. Figma is very nice to do this. You can create a team and within that team create different projects. To keep things aligned with the company structure I created the following:

  • Growth: All files related to growth — marketing assets, partnership prospect designs, landing page,…
  • Product: All design files related to the app — Android and iOS — every feature gets its own file
  • Customer support: Files like designs for email support etc.
  • Other: for all other stuff, mostly little graphics needed for ad hoc or momentary purposes
  • Drafts: all the designs that are still a work in progress or are not implemented in the app.

On top of that within the team, you can create “team” files. Which in our case are all the libraries: We have an undo iOS UI library and a general Undo brand library. And hopefully at some point an Undo Android UI library.

Furthermore every file also has automatic version control and you can manually commit as well . Since all the files are always updated and live in the cloud, everyone can always get their hands on the latest versions. The viewer and editor functionalities also make sure only those with permission can change things around.

Designing in Figma vs. designing in Sketch

Coming from Sketch, designing in Figma is really not that different. Obviously there are some things to get use to, but in general the UI is almost identical. The differences are mainly in:

  • The way things are saved (in the cloud vs locally): Figma stored all the files in the cloud. Where Sketch stores them locally or you have the choice. This is good and bad. It is nice that the latest versions are accessible at all times for everyone in the team. The downside is that you need a stable WiFi connection to be able to load them or work on them.
  • How to apply and update libraries: This is slightly different from how Sketch handled this and I had to get used to this. Now that I have the hang of it I wouldn’t want to go back. The way Figma handles it is much more flexible.
  • The amount of plug-ins: Sketch was winning this one for a long time. But with the launch of Figma plugins a few months ago I would say Figma is working on its comeback on this.
  • The collaboration features: This is a major win for Figma. Right now it is so easy to communicate about copy, images or assets in the design itself. It makes making changes, ad hoc tasks and context switches a lot easier and definitely has improved my overall design experience.
  • Prototyping and animations: Another one where Sketch missed the boat. It is super easy to build flows and even micro-animations within Figma. This is for sure speeding up our process in the wireframing phase where before we would switch to tools like inVision or Principle. For high fidelity prototypes we still use Principle but I can see myself switching to Figma for this as well once this feature also matured.

Overall conclusion

Figma has resolved a lot of issues we were dealing with. Especially in terms of communication and file sharing the switch has been a big improvement. However in practical terms, the switch also had some downfalls. The files weren’t very clean if imported from Sketch, meaning that a lot of our work needed to be redone in Figma. A big clean up was something we needed to do anyway, so in regards to this it was nice that we could combine the two but keep it mind if you consider switching.

Something I do miss from Sketch is the ability to work offline. It is really nice that Figma is browser based and updates and syncs instantly, but there are still moments where Wifi isn’t that stable…

In general, the overall designer experience of using Figma is very nice. The tool is incredibly smooth and with the launch of animations and plug-ins, there is no turning back anymore on my end.

I hope this article was useful. Feel free to share your thoughts, comments or questions below :-)

✌🏻

/ L.

Disclaimer: this post is in no way sponsored by Figma — I just love the tool

Sign up to discover human stories that deepen your understanding of the world.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Written by Frosnapers

Digital Product Design and Design Ops

Responses (2)

What are your thoughts?

Figma actually has a desktop app which allows you to work offline if you download the authoring file. Granted, it won’t be synced obviously until you get back online. It works reasonably well. I’m not sure how well it works with team libraries if at all.

--

Miss Cellaneous, awesome points about Figma, but would you think though that eventually, Adobe XD may catch up to Figma, Sketch? It seems that every week, there is a new update push by Adobe, which adds more features to the tool… and additionally…

--