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.
🎨 Been a minute since I've been online! Thought I'd kick off posting again by sharing some questions, their answers, and some resources that I came across when learning about Design Systems (DS), Tokens, and Variables 🧰
— Ana (@_AnaBoyer) October 26, 2023
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.
I don't know about you, but I was SO EXCITED to learn that Sticky Scroll is part of @figma's Little Big Updates:
— Ana Boyer (@_AnaBoyer) March 28, 2023
For context, sticky scroll allows you to stick a nested element to the top of a frame when you vertically scroll. Some great use cases include: https://t.co/ma9OVMM6Qi
Designer Advocate Ana Boyer with great recommendations for reducing noodles, creating micro-interactions, and organizing separate designs into flows.
Working smarter, not harder also applies to prototyping. 😉
— Figma (@figma) February 6, 2023
Here are six #FigmaTips from Designer Advocate @_AnaBoyer for prototyping in Figma.
1/ Draw prototyping links from navigational components to reduce the need for repeatedly drawing connections. pic.twitter.com/Ew4A1qjf1K
Well, now we all know how to refer to the Auto Layout alignment control.
In a call today someone called this a cracker and from now on this is the term I will be using when demoing Auto layout pic.twitter.com/FxPejtRFsw
— Ana Boyer (@_AnaBoyer) February 1, 2023
Ana Boyer with tips for using Figma for presentations.
Some #FigmaTips for creating and presenting slides in Figma! 🧵
— Ana Boyer (@_AnaBoyer) January 19, 2023
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.
Ana Boyer on a few ways to archive no-longer-needed mockups.
🧵Figma tip! Some methods on archiving designs:
— Ana Boyer (@_AnaBoyer) January 3, 2022