Hello, my name is Mattan and I’m a web/product designer who is passionate about finding an HTML/CSS design tool to replace Figma. Plasmic comes closest to what I am looking for so far, but still is a bit too clunky for basic exploration design and simple HTML/CSS creation. Hoping future iteration has a mode or version that is just a basic HTML/CSS layout tool since that would solve 99% of my problems with dev handoff.
as a ux engineer, im curious to hear what your issues are with dev handoff
Well my issues are primarily with existing tools like Figma which don’t use HTML/CSS for layout and styling and therefore are incredibly difficult to properly hand-off to developers who often themselves don’t know HTML/CSS very well
Plasmic seems like a step in the right direction since it is built on actual HTML/CSS rendering, but seems aimed more at straight-to-production design work rather than the exploratory design work I can do in Figma.
The teams I have worked with (And now working with one dev on a personal project) don’t want to have the codebase sync with Plasmic and manage all the logistics around that. They just want to see clean HTML and CSS from the design tool that they can then convert into the JSX or Vue templates or whatever a project is using.
In Plasmic there is no simple HTML/CSS code view for a given component or object I have designed, and many of the basic layout tools add a lot of extraneous code cruft like extra unnecessary wrapping divs and odd approaches to things like flex gaps that make it all feel far messier than something I could write by hand that I feel would translate just fine in a design tool
So I’m stuck in this awkward place where I am completely HTML/CSS fluent yet don’t have a design tool that lets me express that fluency in a nice WYSIWYG design GUI
Even better would be if I can take some existing basic HTML with classes and an associated style tag or CSS file that styles those classes and import it into Plasmic cleanly
this is not plasmic related, but if you are fluent in html/css, have you considered building a styleguide of your ui components in html/css for your developers? and just reference that when handing off? i agree it’s a tricky situation
i’m not sure any tool will really give you the kind of code export you’re looking for, nor will a dev be comfortable with that. i personally would not be comfortable using exported code on a professional/production app with a team of other devs working on it
Oh yeah that’s what I do, but it feels crazy to me that I can’t do it in a design tool when so much of what I do is just basic CSS layout that easily translates to a GUI like Plasmic’s
i personally would not be comfortable using exported code on a professional/production app with a team of other devs working on it
Can you expand on that? Since isn’t that essentially what Plasmic does?
I can easily imagine a design tool that looks much like Figma/Plasmic but is more straight forward HTML/CSS design instead of trying to be a straight-to-production tool like Plasmic
Currently I design stuff in Figma, and then have to redo all that work in HTML and CSS which is kind of ridiculous to me since why not just do the design in the first place in HTML and CSS? I would love to just get rid of Figma entirely
I would just rely on devs to do the translation, but in my experience across multiple startups and tech companies front-end devs basically don’t know HTML and CSS very well
What kind of stuff do you think would be difficult for a design tool to export cleanly to HTML/CSS? A frame or box is just a div and a style mixin is just a class on that div. None of the unnecessary extra wrapping divs and code that Plasmic and Framer put around everything.
full disclosure: i am not yet using plasmic, but am looking into it for uses outside of a traditional web team
as a designer who codes/front end dev, the reason why you do not want to deliver html/css is because there are multiple considerations that need to be made when deciding how to build those styles/component that are not just surface level of looks, but rather, how it interacts with other components, how the code is being kept modular/reusable/concise/readable, making sure no code is reused and instead there are mixins and variables that get referenced to…
even stuff like webflow, which does deliver really nice html/css makes it so hard to build a design system which any and every tech team needs at a basic level.
to me, it seems like on tech teams, the role plasmic plays would be on the editorial side of things, or non-feature non-ui web designs, etc. i also think it seems excellent for building and testing prototypes of new features. but to use it as a tool to deliver production ready code to a backend team to integrate into features… i personally would not. unless i knew an experienced front end dev was reviewing it/implementing it