The problem isn't a skill issue on my end, I could build it cleanly, I just don't know why I would when the other 1200 engineers I work with don't have any incentive to do so.
Figma is a shit version of Dreamweaver, a html based WYSIWYG from the 00s.
The designer's job is to think creatively, on behalf of the user, through the entire system, the states, the transitions. Faffing around with reusable components gets in the way of the right kind of thought, IMHO. It's like the design version of big complex class hierarchies. Done too early, they will really slow you down.
Figma is a design tool. It is used by designers as a way to build the visual mocks of software. It's not building HTML under the hood. As a frontend engineer, I have to interpret the designs given to me and translate the layouts into something that will be responsive, cope with different data, etc. that part is the job of a frontend engineer, and so far there is no tooling that solves that.
The Figma dev mode helps shortcut some of that work, by providing easy copy-paste for attributes like background, border, fonts, spacing etc. it's a timesaver. But you should never copy the whole thing.
Maybe our designers just use it wrong, but I don't think tools like this is all that valuable if it can't tell you which pages are based on the same HTML template. E.g. telling the developers: There are three different layouts in this projects, these are the pages for each template and here are the elements that are identical in each.
This may also be wrong usage, but giving you sizes and spacing in pixels is weird. Telling me that a button needs to be 29px from the element above is kinda dumb.
It's probably just me being old, but the people doing the design should always be the same people who are responsible for delivering the HTML and CSS. Developers just gets the templates. But I'm also from the time of webdesigners and not webdevelopers.