Hacker News Reader

Comment by The5thElephant | Hacker News Reader

Figma will never be good at dev handoff because it isn't built on HTML/CSS rendering, so its code output is awful. No plugin or interpretation layer can fix this.

CSS is the language of design, yet for some reason every design tool completely ignores it.

Every top feature request on the Figma Forums is for HTML/CSS type features. We need a design tool built from the ground up on HTML/CSS rendering that has a Figma-like interface. Framer and Plasmic are sort of like this except made the mistake of wrapping everything in React code with tons of unnecessary abstractions that make the HTML/CSS output really messy.

I like the attitude relate.app (now Rainbow) has, but I don't see Figma being the final design tool, particularly when working with developers.

View on HN

> CSS is the language of design, yet for some reason every design tool completely ignores it.

Maybe for web development, but people use Figma for mobile app designs too and those do not for the most part use CSS as the language for design.

But CSS would still get you better prototypes that imitate native designs than anything Figma can provide. All the top requested features for Figma are CSS-like features even coming from designers who don't know CSS. CSS has solved many of the most difficult layout and design problems, why reinvent the wheel?

I work on native app designs and other non-product design work in Figma and having the features CSS would provide out of the box would save me literally dozens of hours a month.

Yeah, auto-layout (flex) was weird at first but more and more designers get used to it, it becomes a preferable foundation for layout. I think they will love CSS eventually, it's just the teaching/learning process that can get them there. At least currently Figma hype gets them `display: flex`.

> every design tool completely ignores it

Figma shows CSS code in the Inspect view. It's limited, but not ignored.

It's not just limited, it is fairly misleading. I had to actively tell my devs to ignore the Inspect panel because it was giving them pixel values when we use rems, or they would hardcode colors that should have been design system tokens because Figma doesn't use color styles in things like effects. Lots of absolute values that should be relative or responsive or tied to tokens. There is a reason there are no good Figma to HTML/CSS plugins or tools out there.

Hi, I work on Plasmic. If not React, how would you encode composition, state, and behavior?

I wouldn't. A huge amount of interactivity can be done in pure CSS, and often design work is exploratory or experimental and doesn't need to output a fully functional component, it just needs the functionality CSS and HTML provide like interactive inputs and focus states.

Once you get the basic design abilities down, you can behind the scenes setup logic using some framework (sure you can use React, but I think tying a tool to a framework like that is a bad idea, React won't last forever and hopefully will die soon in place of newer better frameworks) that doesn't actually impact the basic HTML/CSS that is output.

Devs will still be needed to hook up designs to code logic, but at least give designers the ability to give devs clean HTML/CSS for them to wire up into JSX or Vue templates or whatever because currently many front-end devs are absolutely shit at HTML and CSS and React encourages lots of bad practices with HTML and CSS.

Some sort of open AST. Honestly "HTML" is pretty close except string typed attribute. `data-`|dataset is also pretty close.

> Some sort of open AST

well React is kind of that but it's not serializable. The "React Server Components" is trying.

---

We just need HTML but in form of AST so that it is serializable and programmable.

I don't follow how HTML comes anything close to expressing dynamism, composition, state, Turing completeness, etc.

Sure, you can encode whatever you want inside of data attributes, but that's just ignoring the problem. You still have to decide on a language to express all that within your data attributes.

React server components also does not is not trying to serialize this. Quite the opposite. We have an in-depth write up here: https://www.plasmic.app/blog/how-react-server-components-wor...

(Sise note: Plasmic's AST is in the open and has an API.)

> 2. Server serializes root component element to JSON

That's what I'm talking about.

I did a quick dig on Plasmic's AST and not found its spec. Is there a repo for its specification?

Reply on news.ycombinator.com