Design System update

[sei1122]

Overview

We need to update the Design System to design more efficiently. When I’m designing, I refer to the design system color, font, button, and components. Some of the items are not the latest so I need to back and forth website and design system.

Action Items

• [ ] Review the current design system with the team
• [ ] Audit Food Oasis site
• [ ] Update design
• [ ] Approval by team

Resources/Instructions

Currently, there are 2 versions of the design system.

Design System version 1 https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=0%3A1

Design System version 2 https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=0%3A1

Material UI (React library) is used Food Oasis site. This is helpful when we design. Material UI https://www.figma.com/community/file/912837788133317724

[fancyham]

From our meeting with @entrotech

• Programmers are using color palettes from figma
• Anything more involved than that, even when designers create CSS, that CSS usually only works on one device and at once size…
• but actually programmers have to make it work on all devices and browsers which requires tweaking and things like that.

Often Figma specs or figma font sizes don't translate to the web smoothly, perhaps due to CSS issues.

Is there a way for designers to work in a way that developers can easily use and recreate designs?

John:

• Not that unhappy with the current process. Good practice for developers, too, since this is very real-world problem.
• Not sure we can do much better than where we are now
• Perhaps we can design to three different responsive breakpoints?

Bryan:

• Is there a design/dev environment that previews CSS well that can be used by programmers?

[staceyrebekahscott]

@sei1122 Can you review this issue and its updates and reassess the priority for me in your opinion? If it is impacting your ability to design more efficiently should this be made more of a priority, or can it be closed if the current system is working well enough for most people on the team?

[sei1122]

If we have 4 designers on our team, I'd like to do it because more people are affected to create designs, and nice to have the standard. If not, we can wait.

[staceyrebekahscott]

@sei1122 OK. Thanks for your assessment. I'll leave the issue where it is for now and once we have more designers we can move this up in priority.

[fancyham]

In the Figma, we have two 'style guides' listed which is definitely confusing. From my understanding:

The first one is a style guide of colors, fonts, etc. from 2020

The other "Style guide v2" is from from 2021, and was, I think, intended to be defining new proposed styles, but due to time constraints morphed into an audit of styles currently in-use on the site in May 2021, and showing those vs proposed changes.

To make this more clear, I renamed the two Figma pages to: 2020: Style guide 2021: Audit of styles in-use and V2 proposal

[staceyrebekahscott]

@sei1122 Will completing issue #991 also resolve this issue? Please explain how they are related and if they can/ should be combined.

[sei1122]

I work on #991 to focus on Typography, Color, and Logo consistency with the Dev team. After completing #991, we can move on to this issue. Either I or another designer can work this.