What is the fascination with Figma? Maybe my expectations are just wrong, but as long that it cannot generate reusable HTML templates and CSS from the mock-ups it's just a fancy Microsoft Publisher which doesn't make life easier for anyone but designers. If anything it only serves to move designers further away from the developers doing the implementation.
Designer here. I have lots of things I can point out for Figma to address or change, but the reason I have these off the top of my head is:
- 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.
Designer here. They really shouldn't because it is de facto the industry standard and no other software even comes close. Why do you think Adobe was willing to buy it for 20B
No skilled engineer I've met has had any issue turning a Figma design into a HTML/CSS. That's their job. If someone protested that they couldn't reproduce a Figma design without it spitting out HTML/CSS for them, that would be a serious red flag about their abilities.
I have no problem hacking up some figma design in html / react. The problem is that it isn't reusable, it isn't clean components, styles are copy pasted from figma to the component and unlined with BEM.
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.
Figma made a mistake including the absolute positioning in their Dev mode. It's never useful, and leads to confused engineers like this.
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.
If a project is really mature, reusable components in design tools can work. But for early stage stuff, they can quickly prove more trouble than they're worth.
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.
I completely agree. But I've replied to someone who's been complaining that they don't get reusable components "from figma" when, in fact, it's the designers choice to not do that (for whatever good or bad reason).
Doesn't that very much depend on the design? You could say the same about turning a Photoshop file into a design. If the design is reasonable, then no, it's not that hard.
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.
I'm both a designer and developer, and even as a design-only tool, Figma is superior to all other web design apps I've used.
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.
> If anything it only serves to move designers further away from the developers doing the implementation.
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.
Designer often prioritize design over user experience.
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.
This is a very skewed definition / classification of “design” and “designer”. Basically, anything you think is a waste of time is called “design”, and anything you think is good is called something else. This is just the professional version of highschool tribalist stereotyping and bullying. It’s a complete departure from reality. A just-decent designer will do what you’re asking. Not ‘big tech’ decent, not ‘Silicon Valley’ decent, just…an actual competent designer of which there are plenty.
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.
Both as right, and wrong at the same time: developers have the knowledge of what's needed to run the service, and they know that if you make things too complicated it will be too costly to maintain and the organization will grind to halt. But the designers have the view of the users and they know that if the product is too unergonomic to use, there won't be any users to pay the bills. Both need to understand the other's POV in order to ship sustainable software that is actually used.
Developers often need to be challenged to find a solution to a problem that on first glance seems infeasible. The first instinct of developers is not always correct, what appears to be difficult may turn out to be easy. Of course some things do turn out to be legitimately hard but when developers design things they put too much trust in their instincts.
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.
Yeah. If they say it's not possible, they probably are just lazy.
Concerning animations that's what is missing from Figma and I think for similar reasons they're missing from many products.
What? Smartphones are faster than computers from a few years ago. Smartphones have been running Fortnite since at least 2018. I really wonder what your designers ask from you that is more demanding than that.
You are not wrong. Designer-developer handoff isn't smooth. Use of hard-coded pixel values throughout is difficult to get around. They even made the Dev mode a paid feature last I remember.
It's much better than publisher or photoshop for creating UI designs because it allows you to create reusable components that adjust properly when you resize them, etc. That's incredibly useful even if the output format is a flat png.
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.
Eh, it's a pretty huge step forward from working with PSD's and trying to convert them to designs. I guess it depends on your designers and how closely you work with them to make sure the Figma designs make sense.
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.
Am I just holding it wrong?