Am I just holding it wrong?
It may sound crazy to a developer, but Figma is a design tool for designers whose features and workflows respond to the needs of, indeed, designers.
- out of all tools, I picked Figma as clearly the best for UI design
- I've used it enough that I run into multiple edge cases and limitations
- it's my job to identify such limitations and document how they might be addressed by changing the product.
Addressing the root comment, Figma is a design tool with basic prototyping offered, it's not not a prototyping or web publishing tool. It's why it's not judged as a Frontosge (or rather 25 years later, Webflow) alternative.
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.
Things like auto layout, component variants, nested instances, global variables… are just fantastic to use. It's really well thought out and still incredibly performant.
The only other tool that was close is Sketch, but the Figma experience is just better in every sense. I only wish I could use it offline.
Given the quality of many developer-designed UIs this can only be a good thing.
Developers often prioritize implementation expedience over user experience.
A lot of developers think that “clean code” is as important or more important than user experience. The job of a designer is to tell them that they’re wrong.
Many useless design elements drain the battery and take time to render.
Fortnite isn't a web app and I doubt that Figma was used by the game designers.
Developers sometimes also need to be forced to accept complexity that they don’t personally see the point of. For example animations and transitions may appear pointless to developers as they don’t have any function: no APIs are called. However for users, especially non-technical users, animations can be very useful to show the flow of how various UI modes are connected, and to communicate subliminally as many users don’t read text prompts.
If you let developers call the shots then they will choose whatever UI makes the code as simple as possible, because they spend more time looking at code than the actual product, in contrast to users who never see the code at all.
Custom mouse cursors, unaccessible images, non-obvious buttons, non-standard interactions, strobing lights, a million parallaxes.
A lot of designers think that "pretty" is the same as "usable".
Most devs I know, don't care about "clean code" itself, what they care about is _robustness_. If getting something to work requires thousands of lines of html, css, and javascript, then I can guarantee you that something is gonna look broken on some browser in some viewport size.
When designing you need to keep any mediums limitations in mind, be it paper or the web. The medium is the message. Browsers are buggy implementations of mediocre standards, if you design oblivious to their limitations things will inevitably be buggy, ugly and weird.
Designers can't just live in an ivory tower of auto-layouts that actually work, and have devs magically weave their dreams from garbage.
If we just replaced the web with figma (or if Figma had a runtime like Rive, to just run the entire thing with the web as the platform), I'd be more than happy, not being editor-first is the biggest flaw of the web, and figmas auto-layout is a lot less sucky. But until then, (good) designers have to learn the basics of the tech stack too, and figma does not help in that department.
For the record, I am a developer, always have been, and have been so for some time. I just don’t share these delusions of grandeur.
Too much design, too little value.
On that axis it's bad, on the axis of designers and people who value visual tools like that it's productivity and ease of use is off the charts, the number of people who I know jump on and find using the tool frankly joyful surprises me at times.
It's executed very well for what it's doing, the fact that you can't export the outputs into code is in some sense incidental, because it's not a requirement that anyone I know who uses it cares much about.
But for us (at Kitemaker), we designed a bunch of parameterized components in Figma and then implemented them in code so that they match up. Then when there's a screen with a button, I can click the button in Figma, see the properties and convert it to React. It's pretty quick
If you're using flex for your layouts, it matches pretty well with Figma's auto-layout stuff. So you can click on a container and see that it's a flex row with some padding and justify-content center. When I start seeing components in a bunch of nested containers, I know I need to pay attention, because just doing the usual flex stuff will result in things that don't quite line up due to whatever.
You can define a bunch of colors in Figma and have them matchup in code. So when I see something is gray10, I know I use var(--gray10) in code. There are probably more things that I take for granted that I can't think of off the top of my head.
That being said, it's not a magic bullet. If the designs don't have reusable components, with standard colors and everything is laid out by hand with specific pixel values instead of auto layout, then it's probably the same as just designing from a PSD.
Fuck devmode though. I don't get it, as far as I can tell they just took functionality that existed before and split it into two tabs so I'm constantly clicking between them to find what I'm looking for. I get that there's some pricing thing or whatever, but I would honestly just rather pay more for the old interface.
tl;dr I like it, I think it's a step forward from the PSD days. Maybe your designer is holding it wrong, maybe you are holding it wrong or maybe it's just not for you.