Web designer looking for a HTML/CSS design tool to replace Figma

Plasmic Studio Questions
21

i think you absolutely can design in html and css :wink: if you build small and reusable components / atoms / building blocks so the “design” becomes stitching lego pieces together instead of rewriting a bunch of code from scratch

22

take this with a grain of salt from a complete outsider :sweat_smile:

23

Great thread!

@grubby_quelea assuming you’re thinking about codegen… Codegen with Plasmic is unusual, in that it’s not meant to be a one-time export that you then take and modify to suit your needs. Instead, codegen is designed to be persistant – even after you’ve exported your design to code, you can instrument its behaviors, add data and state, and still continue to evolve your design in Plasmic and re-export the code without losing your work. As such, the generated code is supposed to be a “blackbox” – think of it as an npm package, instead of code that you’re writing yourself.

@appalling_cheetah yeah definitely there are some wrapping divs that were necessary to get things like “fake flex gap” to work (before real flex gap was a thing!) There are also some wrapping divs necessary for applying the styles of a component slot, etc. We try to keep this to a minimum, but the flex gap one is a big one :confused:

If you’re curious - we simulate flex gap by doing the usual margin trick:

.container {
  margin-left: -5px;
}
.container > * {
  margin-left: 5px;
}

But this would look wrong if the container had a background image, border, or box-shadow! It would be obvious that the container has been shifted leftward by 5px. So instead the css looks more like…

.container {
  ...
}
.container > .__wab_flex-container {
  margin-left: -5px;
}
.container > .__wab_flex-container > * {
  margin-left: 5px;
}

So we do the leftward shifting inside an extra transparent container inside instead.

24

Thanks for those details @chungwu! Always interesting to see how to work around frustrating browser support issues.

@grubby_quelea Totally valid points, and I just want to believe we can make a tool that can address things like tapping into design system token vars (and helping to build those variables!). Plasmic’s token setup is the best I’ve seen so far, but doesn’t necessarily sync up with an existing custom token system in a codebase as far as I can tell.

I don’t think a tool has to have perfect handoff to solve most of the main issues I have run into. Devs and designers still need to work together and coordinate, but if designers can output inspectable and copyable HTML/CSS it would skip a lot of the issues tools like Figma or even Plasmic have when devs want to convert that design into real working JSX or template logic and whatever styling system is being used.

25

It’s also kind of amazing that Plasmic is basically the only design tool that has flex-wrap behavior available.