4 ms·

No skilled engineer I've met has had any issue turning a Figma design into a HTML/CSS. That's their job. If someone protested that they couldn't reproduce a Fig

No skilled engineer I've met has had any issue turning a Figma design into a HTML/CSS. That's their job. If someone protested that they couldn't reproduce a Figma design without it spitting out HTML/CSS for them, that would be a serious red flag about their abilities.

nxicvyvy 2y ago
I have no problem hacking up some figma design in html / react. The problem is that it isn't reusable, it isn't clean components, styles are copy pasted from figma to the component and unlined with BEM. The problem isn't a skill issue on my end, I could build it cleanly, I just don't know why I would when the other 1200 engineers I work with don't have any incentive to do so. Figma is a shit version of Dreamweaver, a html based WYSIWYG from the 00s.
- nkmnz 2y ago
  figma has a perfectly capable component system, so maybe the fault is on the side of your designer not caring about your component needs.
  - joerick 2y ago
    If a project is really mature, reusable components in design tools can work. But for early stage stuff, they can quickly prove more trouble than they're worth. The designer's job is to think creatively, on behalf of the user, through the entire system, the states, the transitions. Faffing around with reusable components gets in the way of the right kind of thought, IMHO. It's like the design version of big complex class hierarchies. Done too early, they will really slow you down.
    - nkmnz 2y ago
      I completely agree. But I've replied to someone who's been complaining that they don't get reusable components "from figma" when, in fact, it's the designers choice to not do that (for whatever good or bad reason).
- joerick 2y ago
  Figma made a mistake including the absolute positioning in their Dev mode. It's never useful, and leads to confused engineers like this. Figma is a design tool. It is used by designers as a way to build the visual mocks of software. It's not building HTML under the hood. As a frontend engineer, I have to interpret the designs given to me and translate the layouts into something that will be responsive, cope with different data, etc. that part is the job of a frontend engineer, and so far there is no tooling that solves that. The Figma dev mode helps shortcut some of that work, by providing easy copy-paste for attributes like background, border, fonts, spacing etc. it's a timesaver. But you should never copy the whole thing.
mrweasel 2y ago
Doesn't that very much depend on the design? You could say the same about turning a Photoshop file into a design. If the design is reasonable, then no, it's not that hard. Maybe our designers just use it wrong, but I don't think tools like this is all that valuable if it can't tell you which pages are based on the same HTML template. E.g. telling the developers: There are three different layouts in this projects, these are the pages for each template and here are the elements that are identical in each. This may also be wrong usage, but giving you sizes and spacing in pixels is weird. Telling me that a button needs to be 29px from the element above is kinda dumb. It's probably just me being old, but the people doing the design should always be the same people who are responsible for delivering the HTML and CSS. Developers just gets the templates. But I'm also from the time of webdesigners and not webdevelopers.
noashavit 2y ago
There are also tools that convert figma to html

nxicvyvy 2y ago

I have no problem hacking up some figma design in html / react. The problem is that it isn't reusable, it isn't clean components, styles are copy pasted from figma to the component and unlined with BEM. The problem isn't a skill issue on my end, I could build it cleanly, I just don't know why I would when the other 1200 engineers I work with don't have any incentive to do so. Figma is a shit version of Dreamweaver, a html based WYSIWYG from the 00s.

nkmnz 2y ago
figma has a perfectly capable component system, so maybe the fault is on the side of your designer not caring about your component needs.
- joerick 2y ago
  If a project is really mature, reusable components in design tools can work. But for early stage stuff, they can quickly prove more trouble than they're worth. The designer's job is to think creatively, on behalf of the user, through the entire system, the states, the transitions. Faffing around with reusable components gets in the way of the right kind of thought, IMHO. It's like the design version of big complex class hierarchies. Done too early, they will really slow you down.
  - nkmnz 2y ago
    I completely agree. But I've replied to someone who's been complaining that they don't get reusable components "from figma" when, in fact, it's the designers choice to not do that (for whatever good or bad reason).
joerick 2y ago
Figma made a mistake including the absolute positioning in their Dev mode. It's never useful, and leads to confused engineers like this. Figma is a design tool. It is used by designers as a way to build the visual mocks of software. It's not building HTML under the hood. As a frontend engineer, I have to interpret the designs given to me and translate the layouts into something that will be responsive, cope with different data, etc. that part is the job of a frontend engineer, and so far there is no tooling that solves that. The Figma dev mode helps shortcut some of that work, by providing easy copy-paste for attributes like background, border, fonts, spacing etc. it's a timesaver. But you should never copy the whole thing.

mrweasel 2y ago

Doesn't that very much depend on the design? You could say the same about turning a Photoshop file into a design. If the design is reasonable, then no, it's not that hard. Maybe our designers just use it wrong, but I don't think tools like this is all that valuable if it can't tell you which pages are based on the same HTML template. E.g. telling the developers: There are three different layouts in this projects, these are the pages for each template and here are the elements that are identical in each. This may also be wrong usage, but giving you sizes and spacing in pixels is weird. Telling me that a button needs to be 29px from the element above is kinda dumb. It's probably just me being old, but the people doing the design should always be the same people who are responsible for delivering the HTML and CSS. Developers just gets the templates. But I'm also from the time of webdesigners and not webdevelopers.

noashavit 2y ago

There are also tools that convert figma to html