Config Europe: Designing a design tool
A closer look into how the team at Figma synthesizes feedback, prioritizes features, and executes releases.
Config goes virtual 💻
For their second round, Figma took their conference on the road, both geographically and virtually! Big kudos to any attendees from the Western hemisphere that tuned in live 👏 But for sleep monsters like myself, we had the luxury of catching up on all the fun when Figma uploaded all of the talks, which you can view here.
I was fortunate to attend Figma’s inaugural conference held in San Francisco last February (can you believe it’s been a whole year???), which you can read about here. It was then CEO Dylan Fields announced updates to their latest shiny feature Auto Layout during his keynote speech. I had the same anticipation leading up to this event and to everyone’s delight, Figma signed, sealed, and delivered again this time with Variants, updates to Auto Layout, and more! 🎉
Highlighting my favorite talks 🎤
It was amazing to see how wide the variety of topics covered were. Some of my favorites include: gamification of ethical design, improving how we calculate accessibility, and optimizing your week for healthy productivity. But for me personally, one particularly special part about this conference was the insider look into the processes behind building features for Figma. With the launch of Variants, the BTS stories from the team at Figma revolved around how this highly sought after feature came to life.
Mapping Features to User Problems 🔍
by Sho Kuwamoto | Watch the full talk here
Products serving tens of thousands of customers inevitably receive a lot of pressure from their users. Nowadays, the pressure’s amplified due to the multiple avenues available to deliver your feedback: email, Twitter, YouTube, so on. So it’s no surprise how Sho and the team got the idea for Variants (previously called States):
The reason we knew that States was important because [users] would say things like, “Please work on States,” or “I want States,” or… “For the love of god, work on States.”
Gentle reminder that behind that screen, there’s a real human being on the receiving end 😅 As a user though, it is definitely exciting to hear that your feedback is being received. However, it does make you wonder how a team could possibly sift through the giant backlog. Sho reverse engineered their process at Figma and created the following outline:
- Listen to users for pain points
- Identify solutions to user problems
- Differentiate features as tactical or strategic
- Map strategic features to see how they all fit together within the product
- Synthesize and develop principles to guide your product development
I particularly loved the step where he showed a visual map of how a jumbled list of user problems can become sorted into strategic features. In the beginning, the map may not line up well. But as the team moves forward with the process and identifies core principles, they figure out how features fit together and the map straightens out.
This process was interesting to me as it requires an immense amount of trust between both parties. The product development team has to trust their users’ feedback and figuring out how to solve them is what pushes the product forward. Similarly, users have to trust the team to figure out what it is they really want, even though it may be articulated differently. This was clear when States evolved into Variants! The resulting principles are what will continue to nurture this trust.
Fail Hard, Fail Forward — In the Open 😳
by Kelsey Whelan & Nikolas Klein | Watch the full talk here
From conception to execution, Variants went through cycles on cycles of iteration. Although the team had reached a pretty clear understanding of the end goal, the trick was in visually executing how users conceptually understood this feature. As many of us who work in product understand, there’s no better way to reach your goal than through user testing. This process tends to shatter a lot of internal assumptions and enlighten us of real-world use cases.
Although remote user testing was not new to Figma, something different they implemented during the pandemic was opening up the testing sessions with the rest of the company. Members from other teams joined in and were able to directly hear the feedback from their users. Not only were they listening in, but everyone started commentating live in a Slack channel, going rogue against all Slack etiquette!
This display of transparency and vulnerability from the team ultimately developed and encouraged a culture of failing together in the open. During a time of global hardship through this pandemic, opening up your workflow to include anyone and everyone created a more intimate sense of community within the company. Not only did it bring teammates closer, but it also gave permission to everyone else to unapologetically fail and fail forward.
Flexing Closer to Flexbox 📐
by Emily Lin & William Wu | Watch the full video here
Who else has spent a lot of time calculating individual heights/widths of Auto Layout frames to fill their Auto Layout parent containers? 🙋 Since Auto Layout V1 first launched in late 2019, its functionality was already improved with V2 when its ability expanded from just “hug contents” to also include “stretch” in the counter axis. Although that worked in silo for simple components, when combined together to make complex components, frames needed to expand in both main and counter axes.
The team immediately recognized this and intended to launch a fast follow February of this year. However, what was thought to be an easy solution ended up being an oversimplified band-aid over a larger problem. Through digesting both internal and external feedback, more functionality gaps were identified. This ultimately led the team to launch a proper V3.
The iterative process of how they ultimately solved for Alignment and Resizing was enlightening and I highly recommend you to watch the full talk to go along for that ride. What stood out to me most, however, is their decision to completely rethink their solution. A fast follow release may have solved some user problems but not all. Moreover, another important goal for V3 became future proofing Auto Layout. In the same spirit of failing forward, we often have to fail fast. This inevitably leads to tech debt — which isn’t a bad thing! But it does require identifying when to take a step back to tackle it.
I wholeheartedly applause the effort from this team because it was absolutely a more satisfying update! Although there was some learning to do with the new Alignment and Resizing panels, it was so worth it because it ultimately made Figma a much more powerful design tool.
I hope you enjoyed the insider look into what goes on behind the scenes at Figma just as much as I did! Did you also watch the conference? Let me know which talks you liked the most️! ❤️ 💜 💙 💚
Bonus Highlighted Talk ✨
Color 🌈 = Math 🧮
by Henrique Gusso | Watch the full talk here
Although Henrique’s a designer at TransferWise, I had to include his talk on unpacking how accessibility is currently calculated, why it’s flawed, and his mission to discover a better alternative. I believe all designers should be accounting for accessibility, but I am guilty of blindly accepting what [insert your favorite accessibility plugin here] tells me. This talk reminded me to challenge those conceptions and accept that product design is a living, evolving thing that isn’t perfect. It’s up to us, the makers, to responsibly get it there.
