How Trello’s Remote Design Team is Using Figma
Every few years there is a tidal shift in the tooling used by Designers for web products. I’m old enough now to have been an evangelist of Fireworks, Photoshop, and more recently, Sketch. I even wrote this post about how great working in Sketch was. 2017 Stu was pretty smitten by the Sketch thing. Fast forward to 2019: I have been completely won over by Figma (along with most of the Trello Design team) and it all boils down to how well it works with a remote team.
Revisiting the old way of working…
Back in 2017, I would design a comp in Sketch, push my work up to Abstract to keep track of my versions, and then shared my work with colleagues and stakeholders on Invision. If I wanted anything slightly fancy in terms of interactions or transitions, I’d open up Principle and make a video of my idea to share around.
Once it came time to actually ship the work; I’d bundle everything up into a folder of assets, craft extensive annotation docs and then push all the work up to Zeplin to show engineers how the thing worked.
Awesome process, huh? Yep.. it worked but then Figma came along and replaced all of those apps for me. This thread from Marc Hemeon best explains how I feel about the advantages of Figma. Now that I’ve sold you on Figma, I’ll shift gears and illustrate how I use it with my team.
Figma is Open
One of my favorite Atlassian values is “Open Company, No Bullshit”. This value means “Information is open internally by default and sharing is a first principle.” Figma directly reinforces this value by enabling me to be in a constant state of sharing as I work. Working inside of Figma, my Product Manager, and Engineering partners have constant access to the work I’m doing.
My work doesn’t exist in a file somewhere that I have to export later for consumption. This means everyone on my team is able to see the work develop at each stage of the process. If I need to point someone to a screen I’m working on, they are always seeing my most up to date work.
At this point, you might be saying “Wait… if I’m constantly sharing, how does anyone know what is final?” Glad you asked. To streamline our process, I created a Design Annotations library that allows me to mark files as Exploration, Draft, Finalized, Parked, etc. I even added a specific blue sticky note for engineers to make their own notes within the files.
Figma is Easily Understood
My R&D team recently had an offsite in Austin where we came together to huddle on process improvements and our current pipeline of work. Since Trello is ~75% remote, we typically only get 6 or 7 days a year together.
While together, I held a ‘Figma Happy Hour’ where I led our team through the basics of Figma with an eye to streamlining our Design to Dev handoff. If you’re a designer handing work off in Figma, this is an awesome exercise to run with your team. During this session, we covered the following topics which felt relevant to our common collaboration points:
🌐 Navigation
A general real estate tour of the app aimed at familiarizing the team with the general controls of the app.
💻 Code Mode
A tour of the view-only interface that shows basic CSS info related to each element in Figma. If you’re working with mobile engineers, they’ll be pleased to know that Figma also generates simplistic iOS and Android code. More can be found here if you’re interested in digging in deeper.
💬 Commenting
Encouraging the team to comment directly in Figma to make sure we’re all on the same page.
📏 Dimensions
Showing how using option + hover can expose the relative dimensions of any element in Figma. This one is huge… no need to make extensive anatomy specs when you give your engineers the power to see the full file.
🎨 Assets & Exporting
A general view of how to export assets from the file without being reliant on me to send the version they need.
💥 Process Improvements
Running this session was a great opportunity to assess how we run handoffs between Design and Development. If you run a similar session, take this opportunity to understand the inputs your Engineering partners need to do their best work. We found that having more direct access to the design files via Figma was a huge help to our team.
Moving Forward…
As we wrap up this post, one thing I want to make clear is that the other tools mentioned in this post are completely wonderful and continue to drive us forward as an industry. I have friends that work on and with them (no hate or drama).
That said, I believe that certain tools are better suited to the Remote work environment. My collaborators are spread across three countries, 12+ states and a boatload of time zones. Working with our team in Figma allows us to work more directly with a shared perspective. As we get more and more comfortable with this tooling, our team is hoping to move away from using extensive Design specs and rely more heavily on using Figma as our primary source of truth and communication about Design work. We’ve begun to restructure how we iterate, critique, and handoff our work.
Using Figma successfully with your team? I’d love to hear about it!
Did you enjoy this post? Why not give it some ❤️ or a share? Want more of the same? Consider following Designing Atlassian.
