Create a shared style sheet sampler that both devs and designers can refer to

[fancyham]

Overview

To make it easier to code and design using the same CSS metrics, edit http://devla.foodoasis.net/admin/muidemo to include all the styles we're using on the site.

Alternatively: Try importing food-seeker pages into the Figma Style Guide page using the html-to-design tool

Context

Ideally, we want to have a CSS style sheet that both devs and designers refer to and use for colors, sizes, etc.

Currently, a recurring problem has been that Figma makes it very easy to use unique colors, fonts, sizes, etc. and devs are trying to duplicate these designs from screenshots, so we start introducing custom colors and style inadvertently, rather than using existing ones.

Also, Figma users often had to 'eyeball' elements on the site to recreate them in Figma, and the cycle introduced inaccuracies that compound over time.

So some recent discoveries might help us avoid all this:

1. What we discovered recently is that devs have created what I'll call a 'Style Sheet Sampler' page (http://devla.foodoasis.net/admin/muidemo) which in 2023, devs used to check that their CSS output matched the UX designs. This was from before the 2024 green/orange redesign.

2. We recently found a tool that lets us import HTML pages (with accurate colors and layout) into Figma, as seen here: https://www.figma.com/design/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design--2?node-id=8214-20452

3. Pulling in that page could make it easier to do future designs, but we were missing the new 2024 green/orange UI elements.

So considering the above, one way to create a shared design system is to work in CSS as our 'source of truth' and then pull that into Figma (rather than the other way around.. from design to devs)

This would make it easier for designers to use the correct colors, fonts, button styles because they'd be using a copy of a page generated from the actual CSS.

Action Items

• Create a Style Sheet Sampler that has most or all elements from the public (food-seeker) and private (volunteer/database) parts of the site.
  • Add 2024 green/orange UI elements from the food-seeker part of the site to the sampler page.
    • This might require collaboration between dev and designer, or a designer to be able to edit that sampler page via github.
  • consider adding the css style names on the sampler page… though might be much easier to just use the web inspector. (Criteria: "it should be extremely easy to maintain and keep up-to-date and be accurate, even if that means leaving something off")
• Alternatively: Try importing front-end pages into the Figma Style Guide page
• Developers now have sampler page to confirm their CSS and to experiment
• Designers can pull that sampler page into Figma to use as a style guide with accurate metrics for their future designs

Resources/Instructions

The tool we used to pull an HTML page into Figma was "html-to-design":
https://www.figma.com/community/plugin/1159123024924461424/html-to-design-by-divriots-import-websites-to-figma-designs-web-html-css