How Trello’s Remote Design Team is Using Figma

Stu Smith
Stu Smith
Oct 1 · 5 min read
A fanciful illustration of people moving colorful Trello cards around
A fanciful illustration of people moving colorful Trello cards around

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.

Screen grab of Figma’s collaboration features
Screen grab of Figma’s collaboration features
👆 Collaborating with my PM on the same file even though we are two time zones apart!

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.

Shared library of annotations for Figma
Shared library of annotations for Figma
🚀 We enable this as a shared team library for all designers to use
A screen grab showing the use of annotations on a design in Figma
A screen grab showing the use of annotations on a design in Figma
✏️ Annotations IRL

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.

A screen grab of the code panel in Figma
A screen grab of the code panel in Figma

💬 Commenting
Encouraging the team to comment directly in Figma to make sure we’re all on the same page.

A screen grab of the commenting experinece in Figma
A screen grab of the commenting experinece in Figma

📏 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.

An animated image showing how inspecting different elements works in Figma
An animated image showing how inspecting different elements works in Figma

🎨 Assets & Exporting
A general view of how to export assets from the file without being reliant on me to send the version they need.

A screen grab of the Figma inspector UI
A screen grab of the Figma inspector UI

💥 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.

Designing Atlassian

Tales from the Atlassian design team

Stu Smith

Written by

Stu Smith

www.stusmith.co • www.dribbble.com/stusmith

Designing Atlassian

Tales from the Atlassian design team

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade