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?

[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.

[staceyrebekahscott]

Design System Planning- Google Sheet

@jnaito777 @nkiwan Assigning this issue to you. You can use this as a starting issue or Epic, and link any issues you create to this one. It is in the Prioritized backlog for now, but you can move it to In Progress whenever you are ready to get started on it.

[sei1122]

We break down the design system issue into more small tasks, so I close this issue.