Design Asset Consolidation & Synchronization

TravisWyche commented 1 year ago

Overview

We propose to combine all RaidGuild assets into a synchronized Visual Design System and lay the precedent for maintaining it in a decentralized fashion. This will involve allocating design assets into the existing RG Figma space, cleaning up the organization of this space, and synchronizing it to the existing Storybook component library. We will generate documentaion to allow for decentralized and iterative changes to these assets.

Problem

The Figma is a nightmare.
The Storybook is not conducive to design iteration.
There is a lot of inconsistencies in the existing component styles.
Some of the styles need to be updated.

Hypothesis

By streamlining the assets and articulating a coherent SOP for how to push updates in the future, we will invite iteration and ongoing stewardship of our brand in a progressively decentralized manner.

Solution

Clean up the Figma. Standardize colors, fonts, components, etc., into pixel perfect designs. Migrate extraneous material to other locations.
Pull in existing components from the Storybook library. Standardize styles across the library.
Compile and organize from code>design to synchronize the Storybook to the Figma. Document the usage of plugins/integrations to add to the RG handbook (or wherever is deemed most appropriate).
Define and document a clear process for adding/editing brand assets for other Raiders.
Update the RG style guide.

Team

Double-headed Goblin's aka Travii's's aka Ξ2T + TW
Sammy "The Cool Man" Kuhlman

plor commented 1 year ago

My only request on this is that the style only become a little bit more metal. Incrementalism pls. 😆

Ayaz1997 commented 1 year ago

Demo video on how the synchronization has been set up and working. https://www.loom.com/share/30570d2dcc80430caf6b21f06245cb73?sid=34ef3c81-13d0-4971-a5cf-4b1c84281470

Link to repo - https://github.com/Ayaz1997/RG-design-system/tree/testing-design-tokens

Link to Figma file - https://www.figma.com/file/61uUvOs2T2cKQUhIn6sMRu/RaidGuild-DSM-(NEW-Token-Based)?type=design&node-id=0%3A1&mode=design&t=ipSuLfU393Q6Wykj-1

@plor @TravisWyche @ECWireless if you have any questions I will be happy to answer and look forward to the next steps.

derrekcoleman commented 1 year ago

Update: TW encouraged skayaz to put up a funding proposal soon, since time has passed for the guild to review and provide feedback.

Ayaz1997 commented 1 year ago

Update: TW encouraged skayaz to put up a funding proposal soon, since time has passed for the guild to review and provide feedback.

Added an issue for Funding Proposal https://github.com/raid-guild/RIPs/issues/151

Looking for next steps

derrekcoleman commented 1 year ago

._sayonara and skayaz took a look at ways to create fully automated two-way synchronization between figma and code.

✅ One-way sync figma > storybook is already complete. ❌ There's a lot of manual work required to push storybook > figma (related to formatting the JSON output), so they're still looking for a solution that accomplishes full two-way sync.

Conclusion: one-way flow is sufficient and still allows for social layer of change with Figma remaining single source of truth (SSOT).

derrekcoleman commented 1 year ago

skayaz and _.sayonara will document how syncing works on the code side. skayaz will update figma with other notes too. Almost done!

derrekcoleman commented 1 year ago

Handbook documentation is updated. skayaz opened a pull request for handbook. Once that's merged, all deliverables are done!

ECWireless commented 1 year ago

Completed, documented, and paid out!

raid-guild / RIPs