Ask HN: Why aren't there design tools like Figma with live HTML+CSS previews?
1 comments
Dreamweaver is still around and pretty much does that.
Not sure what you mean "vector" in this case. Like vector graphics (SVGs)...?
Not sure what you mean "vector" in this case. Like vector graphics (SVGs)...?
I have done lots of searching about this while deciding on vector editors for personal use. Sure there are website builder tools like Framer and Webflow, but they're clearly branded as website builders, and they have different UIs. While I haven't actually used them beyond glancing at them, They have you choose components corresponding to HTML elements, rather than shapes / objects like Figma does. Besides being more popular, Figma seems to have a much smaller learning curve and lots of collaboration features. There are many open source vector editing tools but none I found that are meant to be an alternative to Figma and with bidrectional HTML + CSS.
Often the designs created in Figma are converted into websites, I don't know how useful this would be why not have designers and developers use whichever tools best suit them and work in the same file formats? A wonderful thing about HTML + CSS are declarative layouts and designs in plain text so you can use any text editor or an IDE for feature like a side by side text and visual preview. A designer could just use the visual editing tool, and if they need advanced properties or layout options which aren't supported by said editor, then they could open a CSS text window up and write the layout properties there. Figma doesn't have equivalents of every single CSS property and doesn't let you write them.
Another benefit is having the designs as files stored on your device, while many apps can do this, Figma is purely cloud-based. Storing designs as plain text allows for saving file history with VCS tools like Git, which has a whole bunch of different tools for comparing versions, tags + branching, and platforms like Github support pull requests (while Figma has these, again why not have designers and developers use the same systems?). A designer could then utilize GUI git tools plus GitHub to collaborate and make pull requests.
I find it bonkers that some SWEs out there have spent countless man hours into writing web UIs for tools like Figma that don't have bidirectional HTML + CSS previews. The designs are in proprietary file formats (or whatever is stored in the cloud), and developing the web UIs involves implementing the objects of those designs with a bunch of, you guessed it: HTML & CSS.
For personal vector editing I get the feeling that I should just write HTML & CSS in Vim (Neovim), which lets me navigate to and edit far away words in a document with only a few keywords, which would be more productive for me than using any of these vector editing tools.