A new episode of Figma’s series Bridging the Gap, where Developer Advocate Akbar Mirza chats with Designer Advocates to understand and improve the process behind their collaboration. In this conversation with Ana Boyer, they discuss starting and maintaining design systems that work for different teams.

Designer Advocate Ana Boyer: ​“UI3 prompted us to rebuild our own design system from the ground up. Here’s how designers and engineers came together to create a new foundation for building consistent, accessible products.”

This is a topic near and dear to my heart. Ana discusses the benefits of using color scales — consistency, accessibility, and efficiency.

Ana Boyer on creating a component API — a process of defining how you will approach constructing and naming your components across all of your libraries and documentation that will be consumed by your design and engineering teams.

Ana Boyer helps design system teams ensure designers get library updates not by copying main components into their working files.

Designer Advocate Ana Boyer with a reminder to plan your tokens and variables implementation before creating them in Figma. ​“In general, building then refactoring your variables is much more work than taking more time to plan before implementing. As they say: measure twice, cut once.” (That said, making refactoring easier in Figma won’t hurt.)

Designer Advocate Ana Boyer takes us on a deep dive into typography and gradient variables, sharing best practices for leveraging these new features in your design system.

Ana Boyer wonders, what if we also marketed design systems like products? ​“In my time at Figma, I’ve talked to dozens of design systems teams looking to drive adoption and prove the value of their work. Now, more than ever, it’s important to think, strategize, and execute like a marketer. Here are some of the tactics and strategies for helping you position your design system as an integral asset — whether launching anew or revitalizing existing efforts.”

Ana Boyer with a tutorial on how to create a range slider with Auto Layout.

Designer Advocate Ana Boyer shares some common questions, answers, and resources that she came across when learning about design systems, tokens, and variables. 

Designer advocate Ana Boyer demonstrates the new advanced prototyping features by building an e‑commerce experience.

While I don’t often prototype interactions, I love the demo of all the use cases in this thread by Ana Boyer! Engineer Jediah Katz is also dropping some tips and tricks and Zander Whitehurst made a cool demo. Don’t miss the sticky scrolling playground file as well.

Designer Advocate Ana Boyer with great recommendations for reducing noodles, creating micro-interactions, and organizing separate designs into flows.

Well, now we all know how to refer to the Auto Layout alignment control.

Ana Boyer with tips for using Figma for presentations.

Ana is building off of her tip on creating nested icons that preserve color overrides, and now makes them duotone.

“Prototyping in Figma just got an update. In this livestream, Designer Advocate Ana Boyer and Product Designer Nikolas Klein will walk you through adding videos to prototypes, how to build and edit multi-flow prototypes, faster, and demonstrate how to bring others along. Community members Mirko Santangelo and Jannis Smesny will also join to demo how they use the new features.”

Ana and Miggie are back streaming their experiments with Figma prototypes. This time they cover drag interactions and video among other things.

A Twitch stream of Ana Boyer and Miggi Cardona diving deep into Figma prototyping.

Great comparison of different techniques for customizing components by Ana Boyer. Playing with the examples instead of just reading about them makes all the difference.