Variable color name matching between Figma and Code

[melissarojas-dotcms]

Define the Problem

Since our design system is always evolving and improving, we have added ‘variables’ to Figma, which means we had to adjust some of the names of the colors we already have.

Besides that, some colors don’t match our design system, so it would be good to check all of them to ensure there are no discrepancies.

The color scheme in our code does not perfectly match the color scheme defined in our Figma design files. This inconsistency can lead to mistakes, misunderstandings, and visual discrepancies in the final product. It will also make it harder for developers to find the right colors, as the names and variables in the code don't align with the ones in Figma. Without a perfect match, maintaining design accuracy and ensuring a consistent user interface becomes more challenging.

Acceptance Criteria:

Figma and Code Color Alignment:
• All color names and variables in the code must match the corresponding color names and variables in the Figma design files.
• Any renamed colors in Figma must be reflected in the codebase to maintain consistency.

Color Review:
• All colors in the Figma design system must be reviewed and verified against the code to ensure there are no discrepancies.
• Colors that do not match the design system must be adjusted in the code and/or Figma, or flagged for further review.

** Design QA:**
• Perform visual and functional tests across key components to confirm that the updated color variables maintain the intended design accuracy.

Who's Facing the Problem?

This issue affects both the design and development teams, as well as users interacting with the product.

Screenshot or Video

No response

Relevant Links and Resources

I will be working hand-in-hand with the developer via a call on Grading Day to ensure we create a perfect match between the Figma design colors and the code. This collaborative approach will help us resolve any discrepancies in real time.

Assumptions & Initiation Needs

No response