Adding/Editing class names to Design Specs
Ability to add/edit the class name to elements for developers.
- Adding the ability to show layer name. Therefore I can write out the class name.
- Adding Dev notes for designers to add additional information to design specs. This help developers drive better consistence for end product if using an existing design system.
Frankie Loscavio commented
I absolutely agree with this. However, there is a partially working solution right now that already exists for Font Awesome icons. Currently when a text box is active and has Font Awesome as the font to be used you can type in the shorthand name of the icon and it will auto populate the icon for you. Subsequently as a result of this it shows the shorthand name in the bottom right "Content" area instead of an empty font slot. (See image attached). Also, this short-hand text doesn't help specify the actual type / style of the icon e.g. (light, regular, solid) so additional information is required to "help developers drive better consistency for end product if using an existing design system" etc..
The above described is somewhat helpful, however what would be most helpful is if:
1. It also added the ability to comment uniquely on each asset (Dev notes) as you've described for developers to see (Additional information) when selecting an element in spec mode
2. Also show the actual class name text for developers to see and reference with their css files in the code-base e.g. ("fas fa-filter")
Tom Bayle commented
Hi! It might be easier to export with the css personalised names all font styles. Developers could read as "h1, h2…" instead of trying to find where a fonte is present in the online export (which is a magic tool by the way. Thank's adobe cloud). In the same idea, plugin as "copy css" does give also a better definition of font for developer. calling as "Roboto 400" instead of "Roboto Regular" wich stays designer langage.