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