[Figma] Sync annotations with design variables

Helloo everyone :) We faced a quite time-consuming problem working with the current contrast checker plugins available for Figma. I was working on a Swiss cantonal government design system that is mapped to different regions (Gemeinden). Each “Gemeinde” is supposed to have its own colors. When working on government or enterprise websites, a certain accessibility standard is required. Checking each new color for the new mandates can become very time-consuming when using the Figma accessibility tools. You constantly have to click through different buttons, check different contrasts, and often recheck everything again after making adjustments. That’s when I asked myself if it would be possible to build a tool that lets me set annotations which sync when I adjust design variables. I also wondered if there was a way to tweak the process of finding specific primitive colors that work on both dark and light backgrounds without adjusting the whole system. That’s why I also integrated a Tailwind color palette generator based on your set annotations. I often had the problem that I needed to copy and paste my primitive colors, which I generated in a tool like Coolors, one by one into my primitive variables. So I wanted the plugin to sync with the variables and replace them directly. It’s then possible to add annotation tags directly to your canvas so you don’t have to check everything all over again. (I haven’t found a way to synchronise them yet, but they still do their job.) All in all, the tool saved us a lot of time, i hope it helps you too :) Figma Community Link: [https://www.figma.com/community/plugin/1610245551454245858/contrast-pilot-wcag-for-design-systems](https://www.figma.com/community/plugin/1610245551454245858/contrast-pilot-wcag-for-design-systems)