Hypothetically speaking, if all designers could code at the level of a Snr Front End Engineer, would Figma exist?
Just pretend that magically everybody knew how to code. Wouldn't designs just be done in the browser? No longer do you have to maintain these design artifacts post handover. There would be no unrealistic designs that do not consider the constraints of a browser window.
I know this is unrealistic but I often think about this.
I don't think so. While there are some scenarios that are better coded (where lots of different paths open up quickly, typically Excel-like), in many cases good designers are incredibly fast with Figma and I know no coder who can be that fast.
Also, they spend their time analyzing the problems and have many other things to hold in their head beside coding. It would be very challenging nowadays to both be a great UX designer and be current with the latest CSS evolutions.
That said, I wish more designers would try coding at some point and learn how a browser and website work to get a deeper understanding of the material they design for.
Also developers should understand the designers methods like journey maps, basic typography and layouting principles.
> It would be very challenging nowadays to both be a great UX designer and be current with the latest CSS evolutions.
Designers are supposed to be fluent in the medium they are designing for. Without understanding what's possible, what's easy, what's hard, what squeezes and what scales, or what's going to have a negative impact on site performance, how can one be a great designer?
Designers should be very familiar with the standard widgets, idioms, and interactions of the platforms they're designing for, but I don't think performance is rightfully something they should have to worry about.
> but I don't think performance is rightfully something they should have to worry about
But then I, as a developer, have to argue with the designer why a table containing a thousand rows or more, with no pagination, may not be a good idea :-(
I think a good designer polls his dev team to help him figure out what’s a “big lift” and whats easy. And a good developer works with her designer to point out “big lifts” and helps find compromises!
It's very difficult to generalize but I'll chime in with my experience as both.
If I'm working on a backend system and have a (frontend) framework in place, I might easily skip Figma IF I have enough confidence that the approach/pattern/solution is the right one. If not, or if the particular UI is quite challenging, I would usually sketch things out in Figma until I can resolve the most important questions/design challenges. I would not bother making a high-fidelity design in this case.
If I'm working on a highly visual/presentational project, then Figma is my go-to, since code would be super slow and limiting if I want to explore various approaches and ideas. Especially I wanted to be a bit more creative with the presentation. However, I would probably design less than usually needed. Also, when coding this design, I would *not* consider my own Figma project to be a pixel-perfect representation of every single value in terms of font-sizes, spacings, etc. I would use a code-oriented system/approach and make sure everything comes close to the design. Certain details would be tweaked by eye in code as well if I feel they need visual adjustments. I suppose I also intuitively know which areas need more (pixel-perfect) attention and which are flexible.
And then there's exceptions and hybrids to all of these. I may want to polish a particular backend UI piece for whatever reason (Figma-first), or I might want to prototype/create a proof of concept for a complex state management, transitions, etc. (frontend-first) before making portions or all of it pixel perfect in Figma.
I am a software engineer and I still use Figma to be in design mode. Messing around with how a gradient/shadow looks or moving elements around is way quicker graphically than with code. It helps me not default to things that are easy to implement, but might be worse despite of it.
Still, I think your approach would work. I would probably find myself sketching on paper now and then in that situation though :)
As someone who has over the last 20 or so years been both a senior front end dev and a designer I don't think this is the case. For me designing in the the browser is fine for details but high level stuff; overall aesthetic, content design, user flow etc. etc. (the primary value of design per se) is better done, at least initially, with dedicated tools. Not necessarily because they're quicker (though they often are) but because different parts of my brain are needed for the different tasks and different tools fit better.
This change to Figma makes me less likely to choose it as my primary tool either as a designer or a developer. Though I guess this is a minority position as I'm compelled to use it all the time as Figma's become a kind of defacto standard in many sectors these days.
The iteration loop is MUCH faster using tools like Figma for design.
Most places use consistent patterns for padding, space, etc. But a lot of things need adjusted visually for polish. Tweaking things in devtools is fine for quick things, but can be lost on browser refresh.
Tools like "CSS Pro" make it easier. Saving devtools state makes it easier. But neither quite compare with hitting the arrow keys a few times to see what small adjustments look like. Or dragging a card to a different spot. Or duplicating a component three times with slight variations to see them side-by-side.
I'm a developer that uses Figma occasionally. It's just less frustrating to get the "look" down before jumping into code.
The frontend space is hilariously non-productive, while design really benefits from WYSIWG, or at least faster design-view iterations.
So unless some tools that were available decades ago with Visual Basic surfaces with drag’n’drop widgets, I doubt we can leave Figma and the like behind.
(Note: JavaFX does have a visual editor, not perfect but it was quite a great break from editing HTML files)
Just pretend that magically everybody knew how to code. Wouldn't designs just be done in the browser? No longer do you have to maintain these design artifacts post handover. There would be no unrealistic designs that do not consider the constraints of a browser window.
I know this is unrealistic but I often think about this.