4 reasons we love Figma at Deliveroo
Content-first design, telepathy and more thoughts from a Product Designer/Content Designer duo
aka
and is one of the latest tools on the design block. Compared to Sketch, it’s in its infancy, so why have we chosen to make the jump during a time of such growth in the content, research and design team?Why Figma? The tl;dr version
It’s simple — we believe it’s the best tool for real-time collaboration and bridging the gap between content, design, engineering and well, uh… anyone with a link.
It boils down to these four things:
- Content-first design📝
- Design telepathy ✨
- Wider collaboration 👨👨👧👧
- Potential 📈
Read on to find out what it’s been like for us making the switch from Sketch. And to find out what prompted one Content designer to tweet this:
Before we begin… just one caveat. Figma suits our needs and our size but Sketch may still work better for other teams. If you don’t have a fully established design system or don’t need content and design constantly synched, you may not want to switch. Sketch, it’s us not you.
The problem
Do you remember the days when you’d send word docs to your colleagues? They would edit it, append their initials to the file name and send it back. Some docs were never seen again, lost to the ether. Google docs changed all that. Now you could work on the same doc at the same time.
That’s great. If you work with documents.
At Deliveroo we’ve used Sketch since day one… but recently, we realised we were coming up against some familiar problems.
- Sending different versions of the same file or having conflicts
- Losing work amongst Slack messages or email chains
- Never knowing what version was the latest
And there were also some more design-specific problems, especially with the Content Design team growing:
- Trying to synchronise Latest_content_RC_v6.sketch with Final_design_SK_v3.sketch
- Figuring out which of the final content we’d left out of the design
- Conjuring up weird workarounds to highlight changes in content since the last revision
Despite our best efforts, content was often coming second. Enter Figma…
1. Content-first design 📝
Figma is to design tools, what Google Docs is to Word. It’s a web-based design tool that allows anyone you want to access up-to-date designs via their browser.
This feature alone has allowed content to have an earlier and more significant impact on the products/features we design.
When we as product and content designers had to work across two versions of the same file, neither of us could do so completely effectively. Despite constant communication, we were technically siloed by the software. Interfaces were constantly evolving and so was the content. We were always out of sync, with someone playing a time-consuming game of catch-up.
Most of the time we had to collaborate was spent on aligning work rather than experimentation and focusing our ideas.
Now, the “content and design sync” song and dance is pretty much gone. Instead, we can quickly iterate in real-time.
That’s especially exciting for one group… Content Design. And that’s because, Figma has really put the designer into content designer.
Designing content in rapidly expiring files or spreadsheets is hard. Sometimes you can fall into the trap of finessing content to go into a design, rather than using content as a design medium itself to solve problems.
With a fantastic component library thanks to our UI infrastructure team, the safety net of versioning and built-in comments, content designers can now tweak components, reorder elements and introduce new screens or modals whenever they need to. This can happen all under the watchful eye of the product designer who can ensure everything is still user-friendly and consistent with our design system.
Tip: name your versions using ‘⌘+⌥+S’ if you make any big changes. This’ll make it easier to roll-back if you change your mind.
2. Design telepathy ✨
When you can see each other’s cursor whizzing about the canvas, you can almost predict what your teammate will do next — like design telepathy.
As you see some content being written, you’re already designing the best way to deliver it. Or when you see a new interaction/feature come to life, you’re already designing the content it needs.
This riffing off of each others ideas comes so organically using Figma. This is super handy because the Deliveroo team has grown so massively that getting time in meeting rooms is a challenge. Designing in Figma is like designing around a whiteboard in high fidelity — no meeting room necessary!
Tip: don’t forget to speak to each other in person once in a while, it’s nice 😉
3. Wider collaboration 👨👨👧👧
When we’re not communicating via brainwaves, comments have been a revelation. You can leave yourself TODOs or tag your teammate when you’ve got a new idea. They’ve also been great for capturing notes during crits and research sessions.
Outside of design, engineers can leave comments about new endpoints we may need and Product managers can leave feedback on direction. And everything lives in the one tool tied directly to the design. Previously this was scattered throughout other tools like Slack, Zeplin, Wake, Workplace, Jira and real-life conversations.
With one file as a source of truth for content and design, there’s never any risk of engineers building stuff based on out-of-date content. They can use Figma to see the specs and go from there. So it’s not just feedback that’s reduced to a single tool, it’s designer, content and engineering collaboration as a whole.
Tip: invite engineers to the project at an early stage so they can validate any design decisions as you go.
4. Figma’s potential: what excites us most? 📈
Making our style guide more accessible
As a design tool with a familiar web based API, there’s no reason we can’t build some really cool enhancements that suit Deliveroo’s needs even further. Someone’s already built a spell-checker using Figma’s comment API.
If something exists that can check spelling, we could create something that checks content against the Deliveroo style guide. Like code linting, this “content linting” could catch any content errors defined by us and make designers and engineers feel more comfortable writing copy when needed.
If someone was to use the phrase “restaurant branch”, Figma’s comments could remind them that we don’t refer to “restaurant sites” as “branches”. This ends reliance on yet more separate tools and documentation. Separate to style, we could use it to ensure our content is always inclusive. For example, it could remind writers to remove any gendered pronouns if detected.
We’d need to invest some time in building it, but in a world where content designers are already spread thin, this could free them up to work on substantial pieces of work rather than combing designs for adherence to Deliveroo’s style.
Making content better in other markets
We’re currently in 12 markets at time of writing, but we can only design content in English right now. This can lead to content breaking designs once translated if strings get too long.
Something that would allow us to see our content in other languages at the design stage could help us fix these problems early on. Not to mention, this would free up our lovely translators to focus more on localising our content to create great native experiences, rather than translating from scratch.
Making content-first design the norm
Call us dreamers, but maybe we could eventually get to the point where design was automatically rendered based on our content. You could write content using markdown which Figma would convert into designs based on how you’ve defined the content elements. Again this relies on a really tight component library, but would help us ensure we’re designing for the content and not writing content for the design.
Who knows what else the future might hold for Figma and Deliveroo…
We may sound like a couple of fanbois, but…
As content and product designers, collaboration isn’t optional. We need to be planning flows and screens based on the content our users need. And we need that real content from the outset to shape our design decisions. Figma has removed the difficulty in making that happen — that’s literally game-changing.
If you fancy getting in on the action, we’re hiring. So don’t be shy.
