Use a Google Sheet as a single source of Truth for UI Data management rather than a Figma file.
The design of the component created in Figma has lots of details, text colour, background colour, and border colour, + these colour needs to be changed if we hover over the component, or if we keep the element in an active state.
Here colour information is actually data, and thus this data will be better stored in google Sheets, which is a tool to manage data, rather than a Figma file.
It is cumbersome to click on the text to find its colour, then to click on the background to find the relevant colour (basically too many clicks)
Once you know the colours of the element in the picture, to find out how this colour changes when there is a hover, for this, you have to search over the Figma file where an example of the hover effect is shown and again note down the colours. All this is extra work which we can simplify by also managing the colour data in google sheet
We do have a master library, where all possible states and their colour are mentioned, however again it is easier to navigate an excel sheet than to navigate a Figma file.
Suppose we need to update some colour, or discussion happens over updating the component, it is such a big effort to update those Figma designs. thus it is very difficult to expect the designer to update the colour at all places (in essence, the Figma file is not maintained in sync with actual design requirements)
I suggest along with the Figma file, we should also start maintaining the details in google Sheets and use google Sheets as the single source of truth because it is easy to maintain, and easy to read.
I have started with maintaining a colour map for my work as shown in the above image, teams can begin storing other data that seems appropriate in the google sheet and have it as the single source of truth over Figma files (from my experience, I have always seen a lot of inconsistencies in the Figma file) but inconsistencies in the excel can be quickly solved, debated.
Overall, we should try to add a google sheet for UI data management along the Figma file.
I searched over the internet to find if my suggestion is new or if it is already used by others, I am delighted to find that along similar lines, there is a Figma plugin which can create Figma designs from google sheet
Hope you find some value in my suggestion. Please let me know your feedback in the comments, how do your frontend developers maintain and use these UI details?
