5 ms·

So let me get this straight (Pretend I'm 50, a developer since childhood, but I can't CSS to save my life) are there shops where developers, even front end deve

So let me get this straight (Pretend I'm 50, a developer since childhood, but I can't CSS to save my life) are there shops where developers, even front end developers, have to talk to designers who are't just sketching an idea for a logo or landing page, but designers who run this Figma thing and maintain the entire products "design" in some "style database"? And the idea is that these designers - who aren't developers - should be able to tweak the look of things without changing code? Or is it usually just the front end devs that run this Figma thing, but they dislike the disconnect between it and their code?

skydhash 6mo ago
UX designers I encountered have mostly been tasked on ensuring consistency across the various product (A lot of devs are very cavalier about spacing and font sizes). Sometimes they proposed new flows and layouts, especially when the product needs a coat of paint. So tools like Figma is nice in that regards as it's simpler to iterate on (From simple to hardest: Sketch on whiteboard|paper, Wireframe tools like Balsimiq, Figma|Sketch, css code) because it's pure fiddling with various properties. Figma has direct feedback while the code may require a compilation phase.
kevinsync 6mo ago
lol yes. At least in agency world, a common approach in the last X years has been that designers create entire pixel-perfect, component-based sources-of-truth in Figma (which evolve! they aren't delivered static and complete) -- these are also what the client sees and approves, or at the very least they see branded deck slides that incorporate the Figma designs. Anyways, front end then re-implements from Figma into CSS, except it's usually best-approximation (not pixel-perfect) partially because, despite Figma allowing you to "copy CSS" for an element, it's unusable, almost inline CSS (and usually not aware of its ascendents and descendents, or any variables you're maintaining in CSS, or any class hierarchies, etc), and partially because the units of measurement aren't always identical on either side. You'll also often have multiple FE devs recreating components independently of each other (as a team effort), which can lead to drift and different implementations, which is fun. Then, depending upon the tech stack, FE might be building these components in something like Storybook [0] as a "front end source of truth", which then are either directly injected into a React or NextJS app or whatever, or sometimes they're partially or fully re-implemented again into BE components in the CMS (ex. Sitefinity). Then people ask which one is the source of truth, but really it's a chain of sources of truth that looks more like the telephone game than a canonical "brand bible". Then throw in any out-of-the-box future client efforts (say, a promotional landing page hosted outside of the main project) and you may have yet another reimplementation of part of the same design, but in a completely different system. [0] https://storybook.js.org https://storybook.js.org
- fleeting900 6mo ago
  We only have the Figma and Storybook layers (product not agency) but these two comments paint an accurate picture of the absurdity. Thank you!
- Hammershaft 6mo ago
  I've directly experienced this and it is roughly as sane and effective as it sounds.
  - fireant 6mo ago
    It used to be worse, these days you can at least link between storybook and figma and have similar component naming and figma mostly uses css mental model. Before we had invision and sketch and designers and developers lived in their own worlds that were just completely disjoined.
- siquick 6mo ago
  This is exactly my experience of working in an agency. Made worse by Figma defaulting to 1440px so every design only really works at that width.
- douglee650 6mo ago
  Yah you get this inner platform effect where designers start unwittingly creating their own version of css using Figma and it gets really bespoke really fast.
- freeone3000 6mo ago
  Why don’t we just teach the designers code / the coders design? This feels very Programmer-Analyst split
  - wahnfrieden 6mo ago
    Design management will say that they don’t want to limit the designers’ creativity.
  - 6mo ago
jbmsf 6mo ago
I'm not sure about "without changing code" but I have definitely seen the believe that Figma represents something authoritative about the product instead of, say, the product being authoritative for itself. Perhaps because I have a similar bio to yours, I am allergic to this view.
- monkpit 6mo ago
  Replace the word figma with the word “specification” and it seems pretty reasonable to me. Same thing. It’s not a belief, it’s a process.
gregsadetsky 6mo ago
@kevinsync's answer is 100% correct and it's been this way for the last ~~~20? years? at least - only it was "Photoshop files hold the (design) truth" before - now it's figma. But yes, the "design to code" gap has always been where designers' intentions were butchered and/or where frontend developers would discover/have to deal with designs that didn't take into account that some strings need more space, or what to do when there are more or less elements in a component, how things should scroll in real life, how things should react to a variety of screen sizes, etc. this short meme video is funny/not funny because it hits too close to home - https://www.youtube.com/shorts/r6JXc4zfWw4 https://www.youtube.com/shorts/r6JXc4zfWw4 - but yes, "designers don't code and developers don't design", roughly speaking and then of course you meet some people who do both really well... but they are pretty rare. :-)
- markdown 6mo ago
  > only it was "Photoshop files hold the (design) truth" before You mean Fireworks. Photoshop was for graphic design. Web designers used Adobe Fireworks. Figma is a successor to Fireworks, not Photoshop.
  - xeromal 6mo ago
    I think his point was made regardless of his mistake
    - bayarearefugee 6mo ago
      I wouldn't even classify it as a mistake, just a difference in experience regardless of what Adobe's intentions were. As someone who has done front-end development for both web and mobile devices for a very long time in the pre-Figma days I was handed a lot more designs that were mocked up in Photoshop than Fireworks.
  - gregsadetsky 6mo ago
    Sure, and also Illustrator sometimes, and Photoshop at other times. Some of the designers I know (very famous for their ui/web work) never touched vector components and just had a ton of layers in Photoshop and air/paintbrushed everything. Hence the meme...
SwellJoe 6mo ago
Yes, Figma is the de facto standard for how designers hand off a UI design to developers in large (and some small) companies. It's kind of horrible, but I guess it's better than previous alternatives. But, it's not better than a tool that works with code directly and mostly automates away the tedium or translating a visual design into code. I haven't tried Claude Design, but I know I don't find Figma enjoyable (but I'm not much of a designer...I'm more comfortable with code than with pages and pages of options in a GUI).
satvikpendem 6mo ago
In a bigger company, yes, as it's required to make sure every engineer implements everything in the same way without differences in style over time.

skydhash 6mo ago

UX designers I encountered have mostly been tasked on ensuring consistency across the various product (A lot of devs are very cavalier about spacing and font sizes). Sometimes they proposed new flows and layouts, especially when the product needs a coat of paint. So tools like Figma is nice in that regards as it's simpler to iterate on (From simple to hardest: Sketch on whiteboard|paper, Wireframe tools like Balsimiq, Figma|Sketch, css code) because it's pure fiddling with various properties. Figma has direct feedback while the code may require a compilation phase.

kevinsync 6mo ago

lol yes. At least in agency world, a common approach in the last X years has been that designers create entire pixel-perfect, component-based sources-of-truth in Figma (which evolve! they aren't delivered static and complete) -- these are also what the client sees and approves, or at the very least they see branded deck slides that incorporate the Figma designs. Anyways, front end then re-implements from Figma into CSS, except it's usually best-approximation (not pixel-perfect) partially because, despite Figma allowing you to "copy CSS" for an element, it's unusable, almost inline CSS (and usually not aware of its ascendents and descendents, or any variables you're maintaining in CSS, or any class hierarchies, etc), and partially because the units of measurement aren't always identical on either side. You'll also often have multiple FE devs recreating components independently of each other (as a team effort), which can lead to drift and different implementations, which is fun. Then, depending upon the tech stack, FE might be building these components in something like Storybook [0] as a "front end source of truth", which then are either directly injected into a React or NextJS app or whatever, or sometimes they're partially or fully re-implemented again into BE components in the CMS (ex. Sitefinity). Then people ask which one is the source of truth, but really it's a chain of sources of truth that looks more like the telephone game than a canonical "brand bible". Then throw in any out-of-the-box future client efforts (say, a promotional landing page hosted outside of the main project) and you may have yet another reimplementation of part of the same design, but in a completely different system. [0] https://storybook.js.org https://storybook.js.org

fleeting900 6mo ago
We only have the Figma and Storybook layers (product not agency) but these two comments paint an accurate picture of the absurdity. Thank you!
Hammershaft 6mo ago
I've directly experienced this and it is roughly as sane and effective as it sounds.
- fireant 6mo ago
  It used to be worse, these days you can at least link between storybook and figma and have similar component naming and figma mostly uses css mental model. Before we had invision and sketch and designers and developers lived in their own worlds that were just completely disjoined.
siquick 6mo ago
This is exactly my experience of working in an agency. Made worse by Figma defaulting to 1440px so every design only really works at that width.
douglee650 6mo ago
Yah you get this inner platform effect where designers start unwittingly creating their own version of css using Figma and it gets really bespoke really fast.
freeone3000 6mo ago
Why don’t we just teach the designers code / the coders design? This feels very Programmer-Analyst split
- wahnfrieden 6mo ago
  Design management will say that they don’t want to limit the designers’ creativity.
- 6mo ago

jbmsf 6mo ago

I'm not sure about "without changing code" but I have definitely seen the believe that Figma represents something authoritative about the product instead of, say, the product being authoritative for itself. Perhaps because I have a similar bio to yours, I am allergic to this view.

monkpit 6mo ago
Replace the word figma with the word “specification” and it seems pretty reasonable to me. Same thing. It’s not a belief, it’s a process.

gregsadetsky 6mo ago

@kevinsync's answer is 100% correct and it's been this way for the last ~~~20? years? at least - only it was "Photoshop files hold the (design) truth" before - now it's figma. But yes, the "design to code" gap has always been where designers' intentions were butchered and/or where frontend developers would discover/have to deal with designs that didn't take into account that some strings need more space, or what to do when there are more or less elements in a component, how things should scroll in real life, how things should react to a variety of screen sizes, etc. this short meme video is funny/not funny because it hits too close to home - https://www.youtube.com/shorts/r6JXc4zfWw4 https://www.youtube.com/shorts/r6JXc4zfWw4 - but yes, "designers don't code and developers don't design", roughly speaking and then of course you meet some people who do both really well... but they are pretty rare. :-)

markdown 6mo ago
> only it was "Photoshop files hold the (design) truth" before You mean Fireworks. Photoshop was for graphic design. Web designers used Adobe Fireworks. Figma is a successor to Fireworks, not Photoshop.
- xeromal 6mo ago
  I think his point was made regardless of his mistake
  - bayarearefugee 6mo ago
    I wouldn't even classify it as a mistake, just a difference in experience regardless of what Adobe's intentions were. As someone who has done front-end development for both web and mobile devices for a very long time in the pre-Figma days I was handed a lot more designs that were mocked up in Photoshop than Fireworks.
- gregsadetsky 6mo ago
  Sure, and also Illustrator sometimes, and Photoshop at other times. Some of the designers I know (very famous for their ui/web work) never touched vector components and just had a ton of layers in Photoshop and air/paintbrushed everything. Hence the meme...

SwellJoe 6mo ago

Yes, Figma is the de facto standard for how designers hand off a UI design to developers in large (and some small) companies. It's kind of horrible, but I guess it's better than previous alternatives. But, it's not better than a tool that works with code directly and mostly automates away the tedium or translating a visual design into code. I haven't tried Claude Design, but I know I don't find Figma enjoyable (but I'm not much of a designer...I'm more comfortable with code than with pages and pages of options in a GUI).

satvikpendem 6mo ago

In a bigger company, yes, as it's required to make sure every engineer implements everything in the same way without differences in style over time.