Building a Design System UI Component using Framer X

material.io
Companies often use Storybook to integrate development & design for the design system (Primary Design System, GitHub — left / Grommet — right)

All graphics in Framer X are React Components (Image from Framer X official blog)

Start from making a new Code Component

Add Button Controls(text, type) using PropertyControls of Framer X

Add Text Control to the new component

Add Type Control to the new component

Make graphic styles of the component using ‘React Style(CSS)’

Adding Web Font (Google Fonts)

locate this fonts.css to your project’s code directory

Styling Text Type

Styling Outlined Type

Styling Contained Type


Make Hover Interaction using React State (Hook)

Reloading component with the new state & style when user hover on it

Make onTap Interaction (Ripple effect) using useAnimation Hook of Framer X

Add circle shape Frames and align it with Text

light violet colored circles are over buttons now

Make Scale Animation of the Circle when users Tapping The Button

Share it!

Framer X Store to share in public
Team Store to share privately

Harbor School (하버 스쿨)

We make a new educational way for the digital generation

ruucm

Written by

ruucm

Harbor School (하버 스쿨)

We make a new educational way for the digital generation