Allow (SCSS, SASS, LESS) variable names for Color in Specs Doc
Could you build a way to display variable names for color in the specs doc and the ability to write comments to developers?
Also, specs doc is not accurate when displaying colors, spacing and font sizes. You can see the workaround I built to make up for this deficiency.
Anonymous
shared this idea
6 comments
-
Tom
commented
In my company, colors are used from SCSS Variables. When i have colors in my assets and name them accordingly, the developer can only copy the HEX value of the color in Handoff, but not the specified name ($color-blue-1 in the example).This could be fixed by adding "Name" to the selectbox. Please allow copying of the specified color name.
-
Jiří Dosoudil
commented
Export to JSON also would be great.
-
Petr Vymětal
commented
ano
-
Magnielcz
commented
Would you consider making Colors and character styles in Assets panel to be downloadable in LESS/SASS/SCSS formats, not only CSS format?
-
Neil B
commented
It would be very nice to have alias variables/names for colors in the Assets panel for showing developers different color names in the developer spec view.
This would allow a user to have multiple colors in the Assets panel that reference other Asset colors, giving the option to show different color names in the spec/developer views for elements that have the same hex color value.
In actual development, it's common to have a set of color variables for an entire palette of colors that are never directly referenced by HTML elements on the page — instead, there are alias variables for more specific uses that reference these "higher-level" palette variables. For instance, if using a palette of colors with CSS variable names like "blue-100", "blue-200", "blue-300", etc, you might want a separate color variable specifically to use on hyperlinks that's called "link-color". "link-color" would be set to reference something like "blue-500" — that way it's using the "blue-500" color, but the variable actually used in development has much more specificity and can be changed later to only affect hyperlink colors, leaving the "blue-500" variable as is.
This could be achieved by allowing a color in the Assets panel to be set to reference another color Asset instead of a specific hex code value. I could see this being a potentially unlimited hierarchy where one color could reference another color that references another color, etc, although 2 steps deep should be more than sufficient.
Multiple color assets could all reference a single other asset, giving a multitude of color names that are essentially all the same hex color, but acheived through different color assets.
This would mean that changing a color in the assets panel wouldn't change all instances of that specific hex value across the project, but would only change the instances where that specific color asset was used to apply the hex color.
When building in XD for developers, there is currently no way to show different color names in the developer spec view without making different color assets that have different hex codes and this would make developer hand-off through XD exponentially more useful in so many cases, allowing developers to directly copy the color names they see in the spec view to use in development.
-
Martin Kováč commented
YES PLEASE!!!