Trouva’s transition to Figma from Sketch
New year, new tools! At the beginning of the new year, Trouva’s Design team reviewed our workflows within the organisation. At Trouva, we believe transparency and openness are key to making things more simple; they break down silos, which leads to better outcomes. Our Product Design team realised we weren’t designing in the open. A look at our primary software tools — Sketch and Abstract — uncovered some of the reasons why. While both tools made it possible to get the work done, they made it extremely hard to share UX flows with other teams (because they were forced to install specific software) or add notes to finished mockups. Moreover, we ended up with multiple “sources of truth” with comments made in multiple platforms (Invision, Abstract, Sketch Cloud, etc.). This made it confusing to follow discussions. We were keen to look for alternatives.
Why Figma?
Figma was already a strong contender since a couple of us were already fans from using the tool at previous roles (myself included). It looked like the ideal solution to help with increasing transparency, designing in the open, and engaging the team throughout the process.
We used our Design Guild meetings to start talking about advantages and disadvantages of Figma when compared with Sketch + Abstract.
- A great feature set, as described.
- A tool that allows us to document and share our entire process: project goals, user experience flows, user interface design and the final “prototyped solution”. Making it easier for other teams to understand how we get to the solutions we present.
- Commenting and prototyping all happen in one place (Figma itself); 1 tool for everything
- Ability to install on Mac, Windows and Linux; as well as Web Browser support for stakeholders who don’t need to use Figma on a day-to-day basis
One of the disadvantages we discussed was how well it’d work without an internet connection, but that seemed very minor since we spend the majority of our time online. Finally, we calculated a savings of $375, more or less, with Figma.
We decided to move ahead with the transition!
Starting the migration process
Switching tools can be logistically difficult. It comes with a loss of time spent on-boarding, a temporary reduction in productivity, and a short term knowledge gap for the wider business. We knew we could solve for the above since some of the team was familiar with Figma. We also knew the timing was just right. Squad work was restarting and our Sketch + Abstract contracts were ending soon. We moved quickly to start the process. Here’s how we set up Figma at Trouva:
1. Project Organisation
When we open figma.com, we see 5 projects and a description. Each contains a link to a folder inside Google Drive with the Abstract exports (so people can see our old iterations).
“How to” files. We created tips and a guide to use Figma to help team members get started with it.
Design System. This contains files from Trouva’s verticals (consumer, retail), logos, colours and helper files. Our design system is one way to keep track of components that need to be standardized across the team.
Consumer and Retail projects. At Trouva, we mainly split the work between these two verticals. There’s the “Consumer” vertical, where we try to improve the user experience of trouva.com and the “Retail Operations” vertical, which focuses on the efficiency of operations with boutiques.
Brand project. This is where our Brand and Marketing team plans Trouva’s campaigns, emails and social posts for social media! It’s great that they’re also using Figma because we can easily collaborate together, share assets and provide reviews when needed.
2. File organization and workflow
In this article, we are going to focus on the organization and workflows from the Consumer vertical. When entering the consumer project, we have files divided per page at Trouva.com. We also have a Consumer sandbox where we do small tests or quick explorations, larger exploration projects and an inspiration file where we track competitors’ and our favourite flows and user interfaces.
Apart from each file’s name, we also use a colour scheme to quickly identify the projects that we are looking for:
#242038 — For live or built pages
#5F5C6E — To represent work in progress
#6976EF — Playground files (sandbox and inspiration files)
#D4B483 — Design concepts or big exploration projects
#EBEAEC — For archived projects
If you look closely, you can also see that we show the project type and status on the thumbnail. This allows us to check what is inside each file without opening it.
When entering the file, the main structure is presented usually by:
For discovery projects, we also create a board or page where we define our goal, user needs, existing components in place, inspiration, list of ideas, prioritization, testing and measuring.
3. Introduce Figma to the wider team
Once our Figma files were organized, we scheduled 30 mins with Product Managers, Engineers and our Brand and Marketing team to demo this new design tool. During the meeting, we shared and presented the “How to” files (mentioned earlier). This walks through how to:
— Navigate Through Our Files
— Comment Our Designs
— Test the prototypes
— Inspect designs
— Export assets
— Add / See Libraries
— Structure our design system in Figma
By doing this, we felt that everyone became aware of the big changes we were making, how to use the new tool and how to find content they were looking for.
4. Update product design documentation
At the end, we updated our internal documentation to make sure all teams had the opportunity to learn and use Figma. This is important for new hires and people who may have missed any trainings or updates.
We’d love to know how other design teams organize their files and projects. If you have any suggestions or if this was helpful to you, reach out!
