Posted this in Discord originally, but wanted to produce a more permanent trail, so I’m posting here, too.
2021-10-29T22:00:00Z
Today I finally took a more systematic approach to designing our UI pattern library. Here are some infos and facts, for anyone who might be interested
I started with a copy of Chakra’s UI kit, and started infusing it with our fundamentals —a.k.a. “branding”: typography, colors, shadows, grid…—to it, so that the styles retain Chakra’s original style names, which correspond to coded patterns’ style names, AFAIK. This will correspond to https://chakra-ui.com/docs/theming/theme
This approach will hopefully make it even easier for devs to implement the designs, once the work is finished.
Short-term, it will bring order in terms of there being just one Figma file for all styles and UI components, which will replace several smaller files we use today. It’s not such a big mess today, but neither is it a good place to be, considering this will need to scale in size and complexity, as we proceed making new designs.
Today I implemented Typography - with both typographic scales for headings, and combined one, for body text. Here’s a link: MetaGame UI Pattern Library (Figma)
As I move forward with this, I will add a purple background to every section in Figma that has been made MG-ready. Any of the sections, or UI elements that won’t be needed for our existing design quests, will be removed from the file, so as to keep it clean and lean.
That’s all for now. Let me know if you have any questions or comments.
Next steps
- Continue inserting fundamentals (as described above)
- Take a deeper look into how I could maintain our Storybook without needing to bother a builder about it