Alias, Size, and Custom Tokens available in XD
It would be great to have the Alias, Size, and Custom Tokens available in XD for when I'm designing. Currently my color tokens only show the global versions, and I can't add additional swatches if they share a hex value. We don't want developers using global tokens if an alias or component token exists, so it would be great to have these available to me as I design.
Derek Rudel
shared this idea
-
Domantas Didžiapetris commented
The ability to add multiple tokens/names under the same color would indeed be awesome
-
Anonymous
commented
I agree, when I'm naming the colors in the assets panel, it's usually based on the color's designation in our branding guidelines and/or the css stylesheet. Keeping the given name would be helpful and reduce some confusion.
-
max2xper
commented
I really hope this gets more traction. It's wild to me that our developers have an easier time consuming design tokens in Xcode or VS Code than I have in XD. We really would love to work more seriously with design systems (the VS Code extension is a brilliant start) but the lack of support in XD is pretty disheartening. :(
-
Baltha
commented
Recently, I started using the CC libraries to publish a component library I'm using on a project. Besides the components, the library has tokens set for colors and fonts.
Then I created a new file and started using my library. I used some components and published a development link. When I checked it in the inspect mode, the color tokens were not showing, only their hexadecimal codes.
I contacted Adobe support and I was told this is the expected behavior. A given possibility was to substitute the component colors by the ones on the library, but this is impossible since I have a lot of components. I think it doesn't make sense.
The reason I started using libraries was to establish a design system with my team. I thought that this way, the tokens would always be available wherever I used the components so that the developers would always know exactly which token to use (they use color variables with the same exact names we use on components).
I attached two screenshots: one shows a color token created on a library file, and the other shows the inspect mode of a link where I used a component with that same token. As you can see, the token was lost.
My suggestions to improve this are the following: when adding a component to a project, automatically add its tokens to the project assets, linked to the library, or at least make available the tokens on inspect mode instead of the hexadecimal code only.
This way, we are building a design system that really works both for developers and designers.