④ Accessible names came first, states — after

Got your component laid done and going to clone it for additional states? Excellent, but for the first apply an accessible name to it. Take care about yourself and devs team and use clear namings. Keep in mind that cloned component retains the name of the parent. If you prefer the orderliness, I expect your text field should sound like:

Text fields / Underlined / Default

Now the component can be safely cloned. Then detach the instance, apply visual necessary changes, and it’s only remains to edit at the end:

Text fields / Underlined / Active

⑤ Something for the dessert

No routine. My design process now engaged with design system and shown live on YouTube: