How we made our Figma workflow 15% more efficient
Here at Deliveroo, our Experience team uses Figma as a canvas to capture, iterate and communicate our thoughts in one place. In addition to actual product design, any of our files (especially our “Working” ones) might contain:
- Project context (e.g. the problem, user journeys, etc.)
- Relevant links created outside of Figma (e.g. PRDs, user testing videos, timelines, etc.)
- Content explorations and rationale
- Engineering specs, technical limitations & Jira widgets
- Early design iterations
- Localisation changes
While we all have slightly different approaches to communicating details and organizing the contents of our files, as illustrated in the list above, most (if not all) of us annotate our thinking in some form within Figma.
To save everyone time, we built a library of “file management goodies” to bring more context to our designs and help people across the business navigate our files more efficiently (Tanya Hirst, Designer).
Having easy access to sticky notes, quote blocks and other goodies has encouraged people to be more diligent about actually annotating their work, which has positively impacted how we collaborate with engineers, PMs and one another.
Especially on big projects, it has come in very handy in keeping my files quite tidy. Asynchronous communication with engineers is much smoother as well, as a result. (Early Attoh, Designer)
The most popular section of the library is the Documentation page, which has 6 categories to help us structure and document work.
- Sections
We use banners to separate flows in our files.
According to the Nielsen Norman Group, chunking out information into groups can make it easier for people to process and retain. Separating user flows or other distinct concepts into clear sections can also make navigating your file easier. Choose from 5 different color options to bring your ideas to life.
The section banners and highlights have been gamechangers for improving the way we work. After a full day of context switching, I’m able to land into a Figma file and immediately be able to orient myself and become immersed in the designs (Sarah Roach, Product Manager).
2. Flow details
We use these components to document the start of a flow and its status (e.g. WIP, done, idea, etc.). Some people prefer to use these instead of the section banners, and some use the two together. The flow detail component can be useful when showing variations across device type.
3. Screen details
Similar to the flow details, we use these to document specifics about individual screens. They’re helpful for differentiating between a design that’s live in the product today, and an idea you may have to improve it in the future.
4. Notes
Our library has a few different types of components to make note-taking easy and help differentiate between designs and annotations. Choose one, or use them all together to communicate different types of content across your file.
5. Highlights
We use highlights to point to little things that need attention, like localisation, copy changes or totally new things.
6. Linked resources
We wanted a better way to bring research, documents and other relevant resources into Figma. So, we created a variety of goodies to link out to different types of external content and context.
The file management library has been a hit with the team!
Never thought I’d catch myself excitedly rubbing my hands together after seeing something named “File management.” (Oli Puttick, Designer)
These components make us more efficient. Let’s look at the numbers…
It takes on average 3–5 seconds (let’s call it 4) to grab the Highlight component from the Figma asset panel (I timed myself 😁).
By contrast, it takes approximately 20–30 seconds (let’s call it 25) to make a similar annotation from scratch. If we look at the total Highlight instances across Deliveroo’s Figma in 2022 (3,787), we would have collectively spent ~26 hours creating individual annotations to communicate design or other changes in our files.
3,787 x 25 sec = 94,675 seconds. 94,675/60 sec = 1,577.91667 minutes. 1,577.91667/60 min = 26.2986111 hours
Thanks to the Highlight component, we only spent ~4 hours!
3,787 x 4 sec = 15,148 seconds. 15,148/60 sec = 252.466667 minutes. 252.466667/60 min = 4.20777778 hours
Some things we kept in mind while refining our own system:
- Annotations should “stand out from [y]our actual UI elements, so they’re easier to spot at a glance” (Tanya Hirst, Designer).
- However, [components] shouldn’t be too “overpowering and take the focus away from the screen” (Grant McAllister, Designer).
- Try using color and typography to strike this balance.
If you’re looking for ways to automate your workflow (and your team’s), download our library, and feel free to reach out if you have questions or want to learn more about our team.
