ItsJonQ / g2

✨ An experimental reimagining of WordPress components
http://g2-components.com/
MIT License
105 stars 12 forks source link

Establishing Design Principles (Crafting the Figma Experience) #259

Open ItsJonQ opened 3 years ago

ItsJonQ commented 3 years ago

This project is currently missing a substantial piece of the larger Design System puzzle - that being design resources + principles. Nowadays, that is commonly embodied in Figma files accompanied with written style guides and design documentation.

A think a good starting point would be to create a Figma file that is constructed in a manner that resembles the (system) design of the React components. That being one starts with foundational values (e.g. colors, typography), expanding to visible UI elements like Buttons, Cards, Inputs, etc...

The challenge isn't to construct the UI Figma components themselves. But rather, to design the user experience around these UI Figma components.

(Much like how the G2 React components identified dev. experience as one if it's core principles)

These challenges include resolve around consumption, maintenance, understanding, and extension.


I started speaking with @JanaMW27 . We're going to take a stab and figuring out the foundations for this Figma file ❤️ .

I think there are a lot of unknowns given the scale of this project, especially as it relates to the working relationships between design and development. I'm excited to see how this unfolds!

To start, I've created a (rough) story with Color + Typography details: https://g2-components.xyz/?path=/story/design-system--colors