From time to time there is questions on how developers can see and understand what color is set in Figma. Suggest to redo the article to have a section specific about Figma dev-mode and how you can use the selections on the right side to see additional informasjon in relation to specific use cases:
When the dev is working on anew component for our/their design system
When the dev is working on custom content
When the dev is working on complex tasks with different modes and changing colors
In some of the tasks the dev only need to know the mode for the whole and perhaps what color should be set for sections, however in other tasks the dev might need to know specific colors (names) on smaller parts.
Inn Figma there is a few options to change the syntax shown for a selection, in the right-info panel allowing to see Syntax without the color name, see the color name, the mode or combinations, however not all at once.
You can use the Designsystemet syntax plugin to change the names from the design-mode and then have the color-name be shown in the css syntax in dev-mode, however we could also make out own dev-mode specific codegen plugin that will show both different syntaxes, show the mode and color-names, and even some helpful guidance within the panel.
From time to time there is questions on how developers can see and understand what color is set in Figma. Suggest to redo the article to have a section specific about Figma dev-mode and how you can use the selections on the right side to see additional informasjon in relation to specific use cases:
When the dev is working on anew component for our/their design system
When the dev is working on custom content
When the dev is working on complex tasks with different modes and changing colors
In some of the tasks the dev only need to know the mode for the whole and perhaps what color should be set for sections, however in other tasks the dev might need to know specific colors (names) on smaller parts.
Inn Figma there is a few options to change the syntax shown for a selection, in the right-info panel allowing to see Syntax without the color name, see the color name, the mode or combinations, however not all at once.
You can use the Designsystemet syntax plugin to change the names from the design-mode and then have the color-name be shown in the css syntax in dev-mode, however we could also make out own dev-mode specific codegen plugin that will show both different syntaxes, show the mode and color-names, and even some helpful guidance within the panel.