Building a Design System UI Component using Framer X
Let’s say about making Design System Components in your team, and if there are debates that are the endlessly circling between designers & developers “How to manage our components in the system efficiently together”
Here’s how it typically goes:
Jessica: We made these buttons with variant styles. Let’s make it as our standard button types
Ben: Yap we’ll make this one to production code using HTML, CSS. Could you give exact pixels & colors using Zeplin?
Jessica: Sure, but you should know our buttons have interactions when user hovering or tapping, I’ll send it with video
Ben: Umm... How could we apply exact animation curves you used?
Designers & Developers then would face situations that each other are making a little bit different things
then, arguing about some details on their production component
But is it really a problem of details?
In this workflow, they should solve problems called communication between different tools they use
Jessica: We now have many components on our system. I want to see it at the same time with how it exists really in our service
