Why we chose Figma as our primary design tool
Simon Harper | Senior UI Designer at Purplebricks
The design team at Purplebricks recently made the move to using Figma as our primary design tool.
You cannot mandate productivity, you must provide the tools to let people become their best.
- Steve Jobs
“Does anyone know why the height of text boxes don’t match the line-height of the text?” [1]
“I found out character spacing is set in milli-ems — how do you convert that to pixels?” [2]
“Hey guys, can you update the app so I can open this file, it says one of you has it open in an older version. Thanks.”
“Am I missing something or does this not have rulers?” [3]
These are just a few examples from a growing discussion thread between a group of our designers on Slack around our use of Adobe’s XD application. These questions may not be as profound as the thoughts of Steve Jobs, but they raise the same point.
As our team continued to grow, so too did the XD related thread in Slack. It didn’t take long for us to come to the realisation that a re-evaluation of if XD was indeed still the best choice for our ever-growing and multi-faceted design needs. That’s not to say that XD hadn’t been effective — it has some great prototyping features — but as an expanding team within a growing digital department, we need to have one eye on the future, and it seemed less and less likely that that future included Adobe XD.
As a design team at Purplebricks, we are lucky to have dedicated support from Design Operations, or Design Ops. Part of the Design Ops discipline is to ensure that as a team we have the right tools and resources in order to be able to work efficiently, and ensure a high quality of design output.
Our Design Ops Manager helped to facilitate team wide discussions on the topic of tooling, which in turn helped us to identify gaps in our current setup and our necessary requirements as a multi-disciplined design team, consisting of UX design, UI design and Copy.
Our design must haves
The outcome of our discussions was a list of functional elements that we considered to be must haves, alongside a group of nice to have features (things not considered essential). The things we identified as core functionalities in enabling us to work as an efficient Design team were:
• Strong prototyping functionality
• Pixel perfect accuracy
• Component support
• Shared libraries
• Reliable collaborative editing
• Sharing and commenting
• Versioning
• Developer handoff
We have a winner
Comparing the must haves against the features of a list of possible designs apps we compiled (including Sketch, Axure RP, Framer, Protopie and more…) Figma came out as the clear forerunner. We decided to proceed with a short-term trial to test Figma’s suitability and, to be honest, we haven’t looked back since. It met all of our key feature requirements but surprised us with a lot of other things along the way.
What we love about Figma
Strong prototyping functionality
Our team is focussed on building and testing ideas and solutions in a lean manner. Figma’s prototyping tools are straightforward to use, but this initial simplicity hides some really powerful functionality. Widespread support across UX testing platforms is another plus point and something we had sometimes struggled with previously.
Accurate design tools for UI
For many designers, Sketch is often regarded as the best tool for pure UI design — but Figma really shines here too. All the basics are present and correct. The typography support, which was seen as a particular bug bear in XD, is particularly impressive. There is lots of granular control, but more importantly type is accurate to what you would expect to see on the web (this being one of a number of advantages of Figma being built on web technologies).
Strong component support
As we continue to develop our design language and build our design system, it was important to have strong component support, and again, Figma doesn’t disappoint here either.
Features like Auto Layout, recently updated and newly super-charged, as well as the new Variants feature, really allow us to build truly flexible and reusable components — the lifeblood of any design system.
Small touches, such as being able to add notes and documentation links within components, are really useful, especially when considering facilitating both a growing design system and team. These touches show that the Figma team have built a tool with design system support at its heart.
Shared libraries
For a design system, shared library support goes hand in hand with component support. Figma has great flexibility when it comes to organising and sharing component libraries. Have it all in one file, split across multiple files, use pages to organise components, or for those coming from Sketch, use the familiar slash naming conventions. On top of this, it also offers the ability to share token and atom level elements like colours, styles, type styles, and even grids. All this adds up to allow us to manage our library in a way that makes our components easily discoverable — something that can be overlooked in a design system and easily become unmanageable as the system scales.
Reliable collaborative editing
In a time where we have been working almost entirely remotely, the ability for team members to work concurrently on a single document has become increasingly important. Figma allows us to have multiple editors working on a file at the same time, and even follow and track what each other are doing. And since our files are all on the web, this all happens instantaneously. No more waiting for files to sync and conflicting app versions.
Sharing
The sharing in Figma is truly flexible. It allows us to share designs and prototypes for review with anyone across the business and control access as required. Some of us have even started using it as a primary presentation tool, in place of purpose built tools such as Microsoft Powerpoint or Google Slides.
Additionally, support for iframe embeds opens up new possibilities. For example, embedding a prototype or design within our product documentation on third-party platforms like Confluence.
Versioning
Version control of files is built into Figma, sorry Abstract. This gives us all the control we need to track changes and roll back if necessary.
Developer handoff
Handoff with developers within Figma is as easy as just sharing the document — no need to create a special link. And with the increased fidelity, we know that what the devs see is what was intended. Additionally, any notes or links attached to components appear in the Inspect panel for quick access to notes or documentation, further smoothening the process.
Bonus buys
In addition to checking off our shopping list of must haves, Figma also satisfied some of our nice to haves, as well as providing a few additional surprises, including:
• Pages — Those in our team familiar with Sketch often lamented them not being available in XD. Well, they’re back with Figma, and with them comes better organised documents and multiple prototypes within a single file.
• Mobile device mirroring — The conveniently named Figma Mirror checks this off. Available on both iOS and Android, an additional plus mark.
• Plugins — Again, a favourite of those coming from Sketch is the plugin support. Figma has a large library of plugins that extend it’s functionality, including many of those favourites of Sketch users (though sadly, but not surprisingly, no Sketch Runner — my personal favourite 😢).
• File browser — Something that was a bonus was the file browser in Figma. This allows us to work openly as a team. Our files are organised and aligned to products, making all our files easily navigable by product stream, and shareable too.
The move from XD to Figma has not only alleviated the issues we were encountering, but has really improved the way we work together as a team.
It’s been impressive to see the way the team at Figma has rolled out new features and improvements, making it feel like they really care about their product and its users. The recently released Variants feature was probably one of the most powerful features in Figma to date. Equally impressive was the seamless way it was integrated. It’s so simple to update existing components to take advantage of the new variant capabilities. More importantly, it maintains backwards compatibility so nothing gets broken in in any existing documents or workflows. Recent Auto Layout improvements were also super useful. Having seen some of the upcoming features promised for Figma, such as interactive components, I am confident that we haven’t just made a good choice for the present, but for where we are headed in the future, too.
