Show component name in the design specs
It's great to have the component at last. But now I need to communicate the component name with the developers. for example: the values of a certain text are not interesting - they only need to know its class (is it H1, H2...?)
Swatches already have the name (only on hover, why?) in the specs, so it's obvious you did recognise the need for that.
You can now access component names or tokens in the shared Design Specs links in the latest release of Adobe XD. Refer to this link for more details: https://helpx.adobe.com/xd/user-guide.html/xd/help/create-design-tokens-in-XD.ug.html
Encourage you to check it out and let us know if you have any feedback?
Yash Deshpande commented
We use the enterprise version of Adobe XD at my organization, and we the classNames in our codebase correspond to the names of the components in our XD file.
We have a significantly complex product on our hands that requires several modes of a single element/component. Our naming conventions help us identify exactly what variation of that element is to be used
(for example, we have 4 different types of text boxes, a component in XD named Textbox-4 would have a default JSON configuration saved under the same name, readily available in our editor snippets for the developer to use)
Introducing this feature will:
- Decrease time and effort required to identify which components in a particular mockup are present in the codebase.
- Decreases the scope of guesswork in terms of which variation of an element/component is being used in the design, intern helping in decreasing inconsistencies in the product.
Saurabh Shendge commented
Everyone here is having the same problem. Design systems created using XD will be using common nomenclature for the Component names across teams [Design, UI Developers & Product Developers], so it becomes crucial for the Prod Developers to see the component UX designer used in his screens and to use exact same class from the UI library. Without this availability in Design Specs, XD Developer view is useless for anyone creating Design Systems in XD.
Ivy Sosic commented
When turning on the export asset in the layer pannel it will make accessible in inspecting the component name. when pressing Cmd+click it will be possible to inspect on more atomic levels. It's the best workaround I have found. We also have a design system that Devs use and they need to find the component names in my UI design to reproduce it. Right now we are trying using Abstract which shows the layers and a very advanced inspect mode but their compatibility with XD is in Beta and not optimal.
JF Bastien commented
Our component names match the component names in our design system. Specs are useless if developers can't see the name of the component in the specs: they have to open the file in XD to see it.
Ben Berkompas commented
I, too, would like this data to show up for developers. Right now I have to either add comments to annotate my designs, go through the designs verbally, or rely on the developer's intuition to understand which components I'm using.
Federico Castro commented
Hi, Did you find how to do this?