I’m trying to export multiple art boards which has the same header and footer and was aiming for a clean css-file, with the same classes for header and footer (as they use the same master component), using “External stylesheet” and “Style via classes”. But the css-file contains a lot of style-copies.
Renaming the instances to the same component name, instead of “Component 51 - 9” etc, create the same styles, to some extent. Some images are fine, like “Image_1.png”, but some adds unique names, like “Image_1_gv.png”.
Can you post an example XD project that I can see what you’re talking about?
IIUC If you have multiple artboards and they are using instances of an existing component than yes, multiple classes will exist. If they are exactly the same then theoretically you won’t need the duplicate class style declarations. If they are not the same then you’d at least need the differences.
The issue, I think, is that these style declarations may be declared inside the media queries. If the media query is turned off then the single and only class declaration is also not applied.
It maybe best for Web Export to place any component class declarations outside of the media queries (if media queries are used). If this sounds correct this would be a feature request.
In the mean time I’ll see if there’s a best practice. Components should have their component name in the class field by default.
You could use -all directive in the styles property of each component instance to remove all the styles for that instance so no class declaration is exported. Then add the class name of the first component instance to the class property field.
HI,
I tried a minimalistic version of my project, with the same result.
I have it in a ZIP, along with the exported result, but are not allowed to upload it as a new user…
PS.
Do you know about any tool/plugin that can export the whole internals, for a project, as JSON?
Would be neat to track down differences in objects.
After digging some more into my fresh minimalistic version, I figured out that the group & path (exported as png) inside it, had the same name. Changing name or exporting the group as png, solved the problem.
I still have a problem my big project, even as i stripe it down to a minimal state.
I’m uploading the XD-file and the result here , my export settings are in Web ExportSettings.PNG.
I noticed in the project that you have master component in the first artboard and then you have component instance on the second artboard. I would put the master component on the pasteboard and then duplicate instances in the artboards.
The master component has a solid green filled diamond in the upper left corner and duplicates have a solid white fill.
If a component instance is modified it has a filled ellipse in the center of the diamond.
I would give the master component a specific name. This name will propagate to any component instances and then that component name will be added as the first class in the code.
For reducing code have any instance (duplicate) remove all styles and add back in the ones you need. For example, I added two components to the same artboard. In the second instance I removed all styles and then added back in the top, left and position styles.
You can then rely on the component name being in every duplicate instance and that class and properties to it’s own style declaration. Theoretically the software could figure this out but that would be a feature request.
Thanks for the input, I will communicate with the designer-side to tide up the project.
I’m just on the export-side of the project, but I’m learning, fast;-)
/Hans
