Remix.run Logo
alkonaut 6 hours ago

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?

kevinsync 5 hours ago | parent | next [-]

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

Hammershaft 5 hours ago | parent | next [-]

I've directly experienced this and it is roughly as sane and effective as it sounds.

siquick 5 hours ago | parent | prev | next [-]

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.

fleeting900 3 hours ago | parent | prev | next [-]

We only have the Figma and Storybook layers (product not agency) but these two comments paint an accurate picture of the absurdity. Thank you!

freeone3000 2 hours ago | parent | prev | next [-]

Why don’t we just teach the designers code / the coders design? This feels very Programmer-Analyst split

wahnfrieden 28 minutes ago | parent [-]

Design management will say that they don’t want to limit the designers’ creativity.

douglee650 4 hours ago | parent | prev | next [-]

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.

nailer 2 hours ago | parent | prev [-]

Don’t hire anyone that is a front end designer and doesn’t implement their own CSS. This applied 15 years ago when it was photoshop people faking design skills.

gregsadetsky 5 hours ago | parent | prev | next [-]

@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 - 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. :-)

peteforde 5 hours ago | parent | next [-]

It's a real shame that people bought into this false dichotomy, because the base reality is that people who work in web dev that stubbornly pick either code or layout are more of a liability than an asset.

I don't believe that people who can design and code are as rare as folks seem to believe, either. What seems more likely is that there are a LOT of coders who are extremely fluent in CSS but aren't particularly gifted when it comes to making things look good.

It wasn't that long ago that designers understood that they couldn't just hand off a 2D comp of what they want to see. The job isn't done until the output can be integrated into the app. Nobody gets to launch cows over the wall and go for lunch.

sarchertech 4 hours ago | parent | prev | next [-]

It’s just one more example of people realizing that the code is the spec.

markdown 5 hours ago | parent | prev [-]

> 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.

chrisan 4 hours ago | parent | next [-]

I was in web agencies since like 2002-2015, always got PSDs from either clients or internal designers

fuzzy_biscuit 4 hours ago | parent [-]

100%. I was always told to slice the PSD, fireworks never entered the conversation in the agency world I was a part of.

amatecha 2 hours ago | parent | prev | next [-]

Nah yeah Photoshop .PSD's were totally normal for website designs. I got extremely proficient at building functioning websites based on PSD files, going back as far as the days of using nested <table> structures with 1x1 transparent spacer.gif images :) I built hundreds of websites from .PSD files, and Fireworks was pretty much non-existent in my experience.

gregsadetsky 5 hours ago | parent | prev | next [-]

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...

mardef 4 hours ago | parent [-]

I've even received designs in PowerPoint

Everyone used whatever they were familiar with regardless of the purpose of the application.

telman17 4 hours ago | parent | prev | next [-]

Many designers stuck with Photoshop sadly. Back when I did agency work it was absolutely normal to get PSDs of mockups.

xeromal 5 hours ago | parent | prev [-]

I think his point was made regardless of his mistake

bayarearefugee 4 hours ago | parent [-]

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.

SwellJoe 4 hours ago | parent | prev | next [-]

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).

jbmsf 5 hours ago | parent | prev | next [-]

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.

satvikpendem 3 hours ago | parent | prev | next [-]

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 6 hours ago | parent | prev [-]

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.