Rename and organize layers

Go through the Product UI file and rename layers so an engineer can find assets: change 'rect12' to 'Header / Background', 'txt7' to 'Header / Title', and 'btn3' to 'CTA / Primary'. Group related layers into folders named Header, Hero, and Form, and pin a note for Lina in engineering where we removed nested groups that affect export.

Before I hand the file to frontend, tidy the layer tree so they stop asking questions: collapse decorative layers into a single group, name interactive elements with > notation (Header > CTA Primary), and flag any layers that use masks or effects that will break SVG export.

Tom from engineering opened the file and couldn't locate the action icon because the layers are all generically named. He needs the icon exported at 2x and 1x. I don't know which layers are actually used versus legacy. What's the fastest way to identify the active icon instance, rename it clearly, and confirm exports without combing the entire file?

We hand off files with inconsistent naming, hidden legacy layers, and nested masks; engineers waste hours asking for clarifications. Is the root cause sloppy naming at creation, absence of a file template, or poor component discipline, and what one habit should the design team adopt so future handoffs take minutes not days?