I am not sure if you are joking but there is whole set of techniques called fluid typography that does this (using css math functions mainly clamp) https://fluidtypography.com/ It's not a silver bullet and many people simply don't prefer it to having a few breakpoints (that includes me too).
font-size: clamp(3.125rem, 3.464vw + 2.229rem, 5rem); From their website, this is not easy code to maintain. It’s not obvious how to increase/decrease the font size at a later date.
As someone who develops email templates, you will never understand my pain. Figma creates a complete fantasy world for designers who do not understand that a pixel and color perfect design is going to be smashed to bits by the client. Also, I feel the rise of React is partially to blame. CSS frameworks were clunky and constraining - but they forced you into a lot of design constraints developed on years of best pract…
Oh man, we have a certain email template at work, and the marketing team wanted to redesign that email; for some reason (broken communication, things out of the blue by company who bought ours, blabla), the designer thinks it's appropriate to just give us a Figma link that has no connection with the existing template or even any HTML. As a backend dev, I have no idea what to do with it. For an email, I'd expect something that someone actually made the HTML and sent the email to test it, like with hardcoded values that I could replace with variables, logic, etc, but I can't even understand how they think the Figma design was appropriate. They might as well have sent me a watercolor painting. I got them to export HTML, but it was completely useless since it's placing everything at specific pixel positions. I have no idea how to replicate the design in the email template. Anyway, I don't blame Figma or anything, just ugh, venting...
Thanks for sharing. I've just found that approach very clunky in practice, hence my comment about it snowballs into effectively having 3 different CSS (phone/tablet/desktop) and wrapped in media width queries. Though maybe I use it incorrectly. I'm always open to learning something new :)
I'm partial to the TailwindCSS approach where they're right next to each other like: Hello World I don't know how resizing defaults would work well for most cases instead of specifying what you want.
Tailwind is by far the easiest approach in my experience. You can always use custom CSS additionally if you have to, but it's rarely needed.
I feel seen! I'm one of these codey designers. The madness that exists in modern design teams (I used to manage a team of 50!) is insane. There's a lot of time spent on "design systems" in Figma. Very generally Figma is not the website, and the effeciency additions of building tools there is a lost cause. Modern CSS and your JS frontend of choice is a lot quicker and more powerful for component building and general d…
I think the issue is that people started adding “pixel perfect” fidelity to mocks.
also anecdotal but having worked with UX people at a tech unicorn I think most of them are not that useful, and also don’t know that much. It got to a point where we (we built most of the foundational pieces of the business) just elected not to rely on our UX teams’ input too much.
I feel like it’s an essential job that most do really badly and in turn makes me think of the whole profession as a meme.
The best UX designer I worked with was a hybrid of a PM and SWE. He was amazing to work with. The dozen or so others I’ve worked with knew more about “dressing and looking like a designer” than actually designing.
I feel seen! I'm one of these codey designers. The madness that exists in modern design teams (I used to manage a team of 50!) is insane. There's a lot of time spent on "design systems" in Figma. Very generally Figma is not the website, and the effeciency additions of building tools there is a lost cause. Modern CSS and your JS frontend of choice is a lot quicker and more powerful for component building and general d…
Hard disagree here. Are you writing production code, or are you building mockups/prototypes? I don't want non software engineers touching production code. It's too hard, and the depth of skillset for a product/UX designer is already huge. If you find css and js faster for prototyping and mockups, then sure. I'm doubtful and still yet to see that work in the wild.
It would actually probably be pretty helpful if the designers knew their way around the production code, since they'd have a lot more context about what is going to be easy/hard to do. They won't be in some design vacuum.
Silo-ing off code because someone isn't a "software engineer" also feels kind of funny to me.
That's just bad designing. Good designers use the Figma equivalent of flexboxes and develop responsible designs. How is this react related? You could always write crappy css. A team creating non responsive react apps would not create responsive non-react apps
They said email templates. That means no flex/grid/typefaces etc etc. emails are painful caveman html
My favorite factoid is that Windows desktop Outlook uses the MS Word engine to render emails. If regular emails are caveman html (which they are), then I don't know what that makes Outlook html.
I feel seen! I'm one of these codey designers. The madness that exists in modern design teams (I used to manage a team of 50!) is insane. There's a lot of time spent on "design systems" in Figma. Very generally Figma is not the website, and the effeciency additions of building tools there is a lost cause. Modern CSS and your JS frontend of choice is a lot quicker and more powerful for component building and general d…
> Modern CSS and your JS frontend of choice is a lot quicker and more powerful for component building and general design work. I'm a former designer turned programmer, and I couldn't agree more. I was recently tasked with doing some mockup images (no official designer on the team), and at the end, I realized that I could do it so much faster with code. Ironically, while I was putting the images together (I used Affin…
That's how I've always worked. I create everything in HTML and CSS and enhance the design iteratively, then I hook up the data fetched from the backend. It's way faster for me this way.
framer makes a few steps up from figma and that's why I design/prototype straight in framer these days: you get all the wysiwyg of figma and infinite canvas while supporting breakpoints and publishing to the web for testing
They said email templates. That means no flex/grid/typefaces etc etc. emails are painful caveman html
My favorite factoid is that Windows desktop Outlook uses the MS Word engine to render emails. If regular emails are caveman html (which they are), then I don't know what that makes Outlook html.
Neanderthal HTML? Some crossover, but mostly a distinct competing lineage?
Or Figma becomes the IDE? Not the direction I like (I like coding), but it kinda makes sense (for Business People?) to have "Export As Final App" in Figma.