Why Figma Wins

Not a Figma user but I took a quick 10 minute look the other day. I have what is probably a dumb question.

Is there any feature to export the designs into some code friendly format? I didn't see one. I only saw export to image.

Maybe that's a good thing? I certainly don't want to bog designers down into the minutia of implementation ... maybe? But it seemed like such a waste to put all the constraints into Figma and then have to manually figure out where they all are and enter them into your UI framework of choice.

I saw the code inspection feature where you can copy and paste values one at a time.

I guess I'm used to automating this stuff as much as possible. The more automation, the more the designer can tweak things to their heart's content in the actual product. Of course I've mostly done games but some games have very complex UIs and if I didn't automate then every day would be the designers asking "move that 3 pixels right", "make that 4 pixels taller", "change the color to #fe83C7" etc...

Note: I get a figma document is full of stuff not intended to make it into the final product. I've always handled that with labeling, naming conventions, etc and I've always setup some flow where the designer can press a button and see their results live in the dev product in a reasonably short amount of time so they can iterate.

Is that something common in app dev?

Ha! If you think Figma is bad for, check out Axure at some point.

I got sucked into using Axure a few years ago and had a blast making interactive, data driven mockups that utilized custom JavaScript to build components.

It was awesome to get some key concepts across but then one day I realized I spent more time fighting the mockup software than if I had just coded it up.

Oops!

Exactly!

Design is about how it works. That’s more important than how it looks. Low fidelity focuses designers on the app workflow, lets more of the team get involved in design, promotes UI component reuse, and avoids confusing managers about what’s actually finished.

What's the best stack/methods to take a properly designed Figma prototype into a HTML5+CSS+maybe JS web app? (PWA)

Agreed. And I think there's a certain personality of people who are employed in UX that lean more towards the design than the conceptual side that often get lost in the weeds with this stuff, too, and you'll end up with a series of mocks that look great, smell great, and gosh darn it people like them... but are missing all error screens, corner cases, more complicated states, and leave developers in the dark on the bigger picture.

Back when I was doing iOS development for a bit I had one designer forcing us to go through every single screen and manually override the default vertical font spacing and kerning settings away from the (company wide) framework we were using -- a change that was fairly trivial on Android but a pain on our iOS stack -- and this ended up taking hours that could have been spent on functionality. And made the app harder to maintain, on top of that. But this was really important to this person that the font spacing match their preference, and also be identical to Android's.

I miss simple wire frames. Some of the more productive projects I was on when doing front end work were done like this: product manager / designer gives a rough idea of layout and flow; developer works with them to throw together the simple flow as just raw HTML, really. Iterate, change, modify based on what does or doesn't work. Then the lipstick came later, once that's all nailed down. Less time wasted.

For my own sanity I've avoided front end work at all now, and have been doing systems level work instead.