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
Ben: We could use Storybook, and this is the tool for components
Jessica: Cool, but how I can update comments of this component? Should I get access for storybook GitHub repository you guys made?
In this case, Developers could manage its production level components frequently, but Designers are hard to get access & modify those components though it was just commenting on the button.
Designers should know about how to update modified things following the GitHub flow in Developments team
But how about making a component for the design system in this flow
Start from same canvas and making components at the same time
Developers can make codes for graphic styles
and Designers could add interaction on that
Then they could add type controls with dropdown panels or radio buttons to separate different styles in their button component
Over time, making components at this same canvas could dramatically less communication time & problems between designers & developers
Do you think it’ a dream workflow?
But now you could do this in Framer X
I gonna explain details, building a button component of the famous Material Design system from Google
Material Design System button has four types
- Text button (low emphasis) — Text buttons are typically used for less important actions.
- Outlined Button (medium emphasis) — Outlined buttons are used for more emphasis than text buttons due to the stroke.
- Contained button (high emphasis) — Contained buttons have more emphasis, as they use to use a color fill and shadow.
- Toggle button — Toggle buttons group a set of actions using layout and spacing. They’re used less often than other button types.
In this example, I’ll clone three types(Text, Outlined, Contained) in Framer X
Here is the final result of this article.
Start from making a new Code Component
You can add a new code component from the left Code Panel of Framer X
and it makes a component with sample codes
Add Button Controls(text, type) using PropertyControls of Framer X
Now, add properties (text, type) and use addControls for text input panel, type dropdown panel
Add Text Control to the new component
Add Type Control to the new component
Then in codes, return different styled components by types using simple if/else operator
Yeah, now you can control text & types to change its appearance very easily
Make graphic styles of the component using ‘React Style(CSS)’
Now, let’s add more detailed styles using React-CSS(inline styles in React) syntax
Adding Web Font (Google Fonts)
Styling Text Type
Styling Outlined Type
Styling Contained Type
It has basic Material button styles by three types now 🎉🎉
Make Hover Interaction using React State (Hook)
The useState hook from React enables to control states of the component easily.
I made a state called hover and setHover function to change it
When user over their mouses to the button, setHover changes it’s hover state, reloading its component with new styles
It results below interactive styles
Make onTap Interaction (Ripple effect) using useAnimation Hook of Framer X
Add circle shape Frames and align it with Text
I added a little component called ‘Circle’ and wrap texts with Frame to align with this
The style overflow: hidden is for cropping circles that overflow buttons
Make Scale Animation of the Circle when users Tapping The Button
Declare circleAnim variable using useAnimation hook and add it to Circle Component as animate property
It enables control of all properties of the Circle component with animation
And I used initial property — scale : 0, cause It should have scale animation of Ripple effect that starts from 0
(More details about this animation properties in the official documentation)
Then I made a function ‘onTap’ that controls scale and opacity property of the Circle
These codes start from making scale property of the circle as double and changes left, top position to point user clicking
Transition is applied differently by properties cause, left and top properties don’t need to have duration when it changes
The second line of the animation code initializes properties at the end of the animation
And simply add this awesome animation function to all frames as onTap property
Now it has a cool Ripple effect interaction 💪
If you’re interested in making it shared in public or privately in your team, just look around the powerful Store system of Framer X
All you have to do is just writing documentation(Markdown supported), adding an icon with a thumbnail and clicking the publish button.