How we migrated our design team to Figma
Part 1: Tools, costs, and learnings from other design teams
As the coronavirus hit the travel industry earlier this year, the design team at Agoda looked at how we could save costs without sacrificing the quality of the work we’re doing. The collaborative features and the opportunity to shrink the cost of multiple license fees to just one were two compelling reasons to review Figma and eventually propose a plan to migrate our whole design organization to the new tool. Here I’ll walk through the research we did and how our working group planned and executed the migration to Figma.
The compelling promise of Figma
The rise of Figma in the design community over the recent years has been exciting to follow. Many designers in our design team had already started to explore the tool in their spare time and were positively surprised by its capabilities.
Meanwhile, as our design team had grown rapidly, a number of issues impeded our ability to work efficiently and stay aligned across the team.
Figma offered solutions to most of them:
- Real-time collaboration
Working on the same project and providing feedback is very cumbersome with Sketch. Being able to do this seamlessly would be a big win for our team. - Focus and efficiency
Being able to design, prototype, gather feedback, and handoff specs within the same tool would reduce context switching, mistakes (ops, forgot to upload to Zeplin!), and save loads of time. - Performance
Sketch in combination with Abstract was starting to seriously slow us down in our everyday work as files took minutes to load, commit and merge. For many of us, Sketch was lagging and crashing on a daily basis.
Analyzing the cost of our design tools
To get a better sense of how a move to Figma would affect our toolset and costs, we documented all the design tools we used, analyzed the annual cost and whether or not they could be replaced by Figma:
Sketch
- 99 USD per year and license
- Used for UI design
- Is replaceable by Figma
- Verdict: Cancel
Abstract
- 180 USD per year and license
- Used for version control and file management
- The file management aspect is replaceable by Figma, the version control is not. We need to investigate if an alternative workflow would be feasible.
- Verdict: Cancel
Zeplin
- 130 USD per year and license
- Used for developer hand-off
- The hand-off is replaceable by Figma
- It’s worth noting that Zeplin also charges for view-only users such as developers and PMs. This easily makes the license fees skyrocket when working with bigger tech teams.
- Verdict: Cancel
InVision
- ≈100 USD per Year and license
- Used for developer hand-off and prototyping
- Both hand-off and prototyping is replaceable by Figma
- Again, the cost can easily skyrocket as view-only users are charged as well.
- Verdict: Cancel
Principle
- 129 USD per year and license
- Used to animate micro-interactions
- This is not replaceable by Figma
- It’s worth noting that a license can be shared across multiple devices and therefore be shared by multiple colleagues, thus driving down the cost.
- Verdict: Keep
Framer
- 240 USD per year and license
- Used for advanced interactions and prototypes
- This is not replaceable by Figma
- Verdict: Cancel
- Only a few people on our team have the skill set to code prototypes. The main use case for these prototypes were user labs, however, the pandemic has prevented us from doing this at the same scale as before thus we decided that Framer is no longer an essential tool
Whimsical
- 144 USD per year and license
- Used for user flows, wireframes, and other early-stage UX work
- This is not replaceable by Figma
- Verdict: Cancel
Miro
- 192 USD per year and license
- Used for user flows, wireframes, and other early-stage UX work
- This is not replaceable by Figma
- Verdict: Keep
- Miro and Whimsical are two very similar tools, and since most of our team is already using Miro, we recommend to keep it and cancel Whimsical
Figma
- 540 USD per year and license
- Used for UI Design, developer hand-off, and prototyping
Conclusion
As we compare the current and proposed toolsets, the total saving is roughly 350 USD per year and license:
- Current: 1214 USD per year and license
- Proposal (Figma, Principle, and Miro): 861 USD per year and license
The cost savings per designer is good, but the biggest savings are made on the Zeplin licenses where we no longer need to pay for developers and other stakeholders, requiring view-only access. It’s not uncommon for the designer-developer ratio to be 1:10 or larger, so considering this in a large organization, the cost savings are tremendous.
Learn from other design teams
With the cost review done, we got the green light to move ahead and continue investigating how the migration could be done.
Luckily we were not the first design team to migrate to Figma. As we started to research how other teams had managed the migration, we were pleasantly surprised to see how much other companies had shared on their transition. We dived into tutorials, blog posts, podcasts, and youtube videos.
Liferay provides a generous repository of Figma resources and insightful articles on their design website. In the example above, they use color-coded thumbnails for each file to display useful information such as project status, stakeholders, and author.
Spotify’s approach to design systems — a family of systems, layered like a cake. The core layer spans across all products and features, such as branding elements, logos, colors, and typography.
The next layer is platform-specific and provides components specific for web, app, and other platforms.
The final layer provides unique systems for each product or segment and allows designers more autonomy in crafting their own components and socialize them throughout their product. They complete the system, like sprinkles on the glazing of a birthday cake.
Credit Karma has one Design Systems Team in Figma with separate projects for assets, components, layouts, OS devices, and more.
Each component is divided into an individual Figma file, where everything about that component is documented in detail — all research, iterations, symbols, states, and dos and don’ts can be found here.
This approach allows for easier versioning, less risk of braking components, and more documentation per component without making it overwhelming. But it also means that designers have to link a large number of libraries to every project (one per component).
Shopify has embedded a checklist in their working files on Figma to help designers cover all the bases as they are designing on different features.
To speed up work and to keep designers aligned, some larger design organizations take it a step further and build their own plugins and extensions.
Uber built these nifty Mac OS extensions which include icons, assets, spacings, branding guidelines, and more. Updates can be sent via push notifications to the whole team.
At Agoda, we built a Sketch plugin to populate our designs with hotel names, facilities, airport codes, room photos, and more. As a part of the migration, we’re currently rebuilding this plugin for Figma.
This might not be worth the efforts in smaller teams, but in teams of 50+ designers, this can prove to be a real time-saver in the long run.
For each product, Spotify has a dedicated project where they host all their specs — the source of truth for that product. This makes for a clear separation between the live product and works in progress.
Getting a glimpse of how other design teams work with Figma provided us a wealth of ideas to explore. To be able to explore these ideas and do so in an organized manner, we decided to establish a formal working group.
Establish a working group with clear responsibilities
What started as a small team of designers from one of our product teams quickly expanded to a working group with designers from different product teams across our organization — Consumer and supply product designers working on both web and app were represented in the working group. So were designers from our design systems teams.
With designers from a wide range of products involved, we could challenge each problem from many different angles and split the responsibilities better. For some of us, this was the first time we had an opportunity to work together with other designers across different teams — exciting times!
We divided the work into the following workstreams and assigned an owner for each:
Organization and setup
- Team, Project and file structure
- Design System and UI libraries
Workflows
- General workflows
- Master file management (our source of truth)
Communication and governance
- Communication channels and contact persons
- Maintenance plans
We could now diverge and dive deeper into each focus area. To keep aligned and share learnings we created a private slack channel. To stay focused and move fast we had weekly syncs with clear action items and follow-ups.
References and inspiration
We wouldn’t have been able to pull off our migration without all the resources shared by other designers to the community. Here are some of the pieces that inspired us and helped us succeed:
Read
- Components styles and shared libraries
- Tips for a better developer workflow
- How Spotify organizes work in Figma to improve collaboration
- Uber design platform
- Design At Scale: One Year With Figma
- Our first 6 months with Figma
- Waiting for a sign to start building your design teams component library
- 5 ways to structure your workflow with pages in Figma
- How Shopify facilitates collaboration in Figma
Watch
Read next, part 2: Creating a more collaborative and efficient process when migrating to Figma
