How Figma is helping a growing tech company scale up
By Emilijan Sekulovski, UX Designer @Pix4D
We moved our design processes entirely to Figma about a year ago, and it’s not an overstatement to say it’s transformed the way we work. Today, at Pix4D, everybody knows what Figma is — even our CEO.
Figma enabled us to bring designers, developers, and managers all under the same roof. It transformed the way we collaborate and iterate design from the earliest stages of product development right through to release.
Why choose Figma?
Since I joined Pix4D as a UX designer three years ago, we’ve tried a lot of design tools. When I came onboard, product managers were already using Balsamiq for quick wireframes. The design team… well, it was new. I was the first UX designer at Pix4D, joining a single graphic designer. So, naturally I followed the product manager’s lead and started using Balsamiq, but soon (after oh, about three hours) I realized I needed to do more, and do it quicker.
In the next few days, I discovered our marketing team used Adobe Creative Cloud. I already knew about their first public beta of a product called Adobe Experience Design CC, today’s Adobe XD.
I loved it.
I could deliver any UX output to my team, it was easy to learn and Adobe was adding features and improving existing ones on a daily basis. Everything looked good — until we hired our second UX designer. We had constant problems working on the same designs. We tried synchronizing files over Adobe’s own Creative Cloud Files, Dropbox, and even Google Drive. We were constantly frustrated, entire prototypes were lost, files were getting overwritten: it was a nightmare for any collaborative effort.
We had to look for a better solution — and fast. We considered everything: Sketch, InVision, UXPin, Zeplin and more. You name it, we probably gave it a shot.
Startups in the growth phase are funny like that: there’s a lot of freedom when you’re picking the best tool for the job, and a lot of pressure to get it right too. Everything and everyone is moving so fast it can become challenging to remember to slow down and choose a great tool, not just a good-enough-for-now tool.
Forget good-enough — none of the tools we tried were even close to what we were looking for. Until we found Figma. OMG, it was THE Holy Grail, ticking all our boxes and some more we didn’t know we had.
There’s no single reason “Why Figma.” Let me share the most important ones for us, based on my own experience in a fast-growing tech company.
A tool which works on any platform
Right off the bat: Sorry Sketch!
Figma works on Macs, PCs and even Linux machines and mobile devices through their web application.
At Pix4D, we have designers working both on Macs and PCs. I’m an engineer in my soul, and therefore work and design on a PC mostly using Figma’s desktop app. It’s blazing fast and it can handle huge design files effortlessly.
Most of our developers work on Linux machines, and managers are constantly on the run (and often working from mobile devices). Figma seamlessly brings all of us together, enabling real-time collaboration on any platform at any time. Which brings me to the biggest reason why we chose Figma.
Seamless collaboration between teams
The collaboration is nothing short of what you would get from any Google G Suite app. People viewing the file are shown as avatars in the top right corner of the app.
Working on the same file is a whole lot easier
When multiple people are working on the same file, each person gets assigned a different color and a real-time named cursor, making it easy to track who is doing what. Clicking on someone else’s avatar allows you to focus on their actions by following their cursor. Okay, that’s maybe a bit creepy, if you think about it… Although it is very useful when demoing something remotely.
Sharing is caring
Sharing in Adobe XD was a huge pain point. In order to synchronize the local changes with the cloud files, you need to update a link… every time. Sometimes it failed, and you need to differentiate between sharing the document, sharing for review, and sharing for development. What a mess.
On the other hand, sharing in Figma couldn’t be easier.
First, you can add people to your Figma team as viewers or editors. Viewers can view files, export assets, as well as add comments. Adding people is free, and you can add as many viewers as needed. At the time of writing this article, we have 34 viewers in our team.
Editors can do everything viewers can do, edit files and projects plus create new ones. Each editor can have their own drafts, which are only available to them and the people they decide to share them with. So far, we have 11 editors in our team.
Once you’re ready, you can publish your file to a project in your team. From then on, all your team members (viewers and editors) can find and open your file.
So far, we have around 20 team projects. Each project containing up to 20 files. Each file containing up to 10 pages. Each page containing up to 100 frames. Each frame… Well, you get the point. We use Figma a lot :)
We mostly share pages among designers and developers. We tend to directly share frames in prototype mode with managers, as well as embedding them directly in Jira user stories or Confluence pages.
Better feedback = better design
Since we started using Figma, feedback on design has increased significantly. At the same time, this feedback is more constructive and focused.
Comments can be added directly in the design. No hassle. It just works. Right there. As simple as it should be.
Sometimes a single comment can trigger a discussion involving everyone from the front-end developer to the product manager.
This is what we love about Figma. It brings everyone in early and promotes collaborative design thinking across the whole company.
A “single source of truth” for all things design
One of the neverending struggles a young growing tech company faces is design consistency. Figma’s team library offers solid ground for exactly that: design consistency across the whole organization. Any team, any designer, any manager gets to shape the design language of the company. Our products are constantly being updated, and so is our design.
Plug ‘n play design components
We are on a mission to streamline design changes to be reflected throughout all our Figma projects. This is made slightly (read: drastically) easier by using components.
Components in Figma are very similar to symbols in Sketch. Components allow us to standardize and synchronize UI patterns, elements, typography, iconography, colors, and even branding.
The complementary power of the components and the team library empowers us to bring these changes efficiently and transparently throughout the whole organization.
And all this naturally leads us to have our own design system developed directly in Figma.
Developing a design system
Here at Pix4D, we started off with a simple, marketing focused, style guide. It contained all the branding, tone and voice, templates, visuals, and so on.
But we were missing a huge part of the puzzle. The product.
And as the company grows, more and more teams are creating user experiences. We responded to this emergent need by grouping things together, adding them in separate files and creating a common Figma project called “Design System.”
There are plenty of awesome articles about building design systems with Figma so we won’t cover creating a design system here.
All of the components contained in our Design System project are available as team libraries, so they can be included in any other file.
Of course, the Design System files are living documents. We are constantly working on them, changing colors in the Product colors file, adding icons to the Iconography file, improving UI elements in the Pattern library file, and so on. Which brings me to the next big feature we rely on: file versioning.
As easy as Ctrl-Z: file versioning
Figma brings file versioning to all your files by default (right sidebar in the image above).
We always have the complete history of file changes we can revert the design back to any point in time, giving us peace of mind when modifying or updating files.
Once the changes are finalized, we explicitly trigger the saving of a new version entry to the history of the file. We can specify a title, usually containing the new version number as well as a description listing the changes that make this new version unique.
Now some of you probably ask why we give our files like really, really ridiculously good names, but anyone who’s a Figma-head will have already guessed: the new name is what will eventually be pulled through Figma’s API into our GitHub repositories.
API amazingness
We’ve arrived at the real magic behind our Design System, the Figma API. It’s the last part of this article and was our last Figma discovery too.
We were already using Figma extensively by the time we stumbled on the API. The API means direct integration with our development teams is possible. This is simply amazing for us: it’s like a magic wand for design consistency!
The Figma-GitHub API link reinforces collaboration, trust, and transparency between designers and developers. We are able to seamlessly update all our products with new colors, icons, and branding.
And all of this from one central design tool, which does much more than what we ever hoped for.
You can think of this as the prologue to our story. Now the creativity and collaboration unleashed with a single tool can open a new chapter of new challenges. I hope this article will help someone learn from our experiences at Pix4D and develop even better, more efficient ways to collaborate on design.
If you have a great experience with Figma, design, or Pix4D, please share it, so we can all learn from you as well.
