How do you turn your graphic template files into HTML and CSS? Any AI helpers?

[Nomak]

Hi everyone,

first of all: thanks to all contributors of Processwire. I have been using Processwire for years, I am enjoying it a lot and meanwhile it is the only CMS I am using for my clients websites.
In our agency we spend a lot of time to turn graphic template files into HTML and CSS - by coding it manually. I really would like to speed up this process in order to have more time to develop really cool stuff.
Do you use any AI helpers or some tools to speed up the process of turning graphic template files into HTML and CSS?

Best

[Stefanowitsch]

Back in the days when almost everything was build via tables in HTML you could actually use Photoshop to export your layout directly as HTML code. I used this for newsletter templates in the past.

But beware, no one would ever design a page layout using tables anymore (at least I hope so...).

Creating good designs is one thing and converting these designs in to a functional and responsive website is still really a piece of handcraft IMHO. 

So to answer your question: I use no AI helpers to turn those design files into working code. Too often you have to think around the corner "does this layout work on smaller viewports? How should the elements re-arrange, what elements should be hidden?" etc. etc. There is no way any AI can do that for me or for my clients - yet 😉

 

 

[da²]

On my previous project, a designer created a template on https://www.figma.com/. You can export design to CSS, I add a look at this code and it's a terrible thing. 😅

For example, this simple box...

...generates this mess:

/* Frame 232 */

position: absolute;
width: 460px;
height: 580px;
left: 490px;
top: 425px;

/* Ombre */
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);


/* Offre Gratuite */

position: absolute;
width: 460px;
height: 580px;
left: 0px;
top: 0px;

/* Ombre */
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);


/* Rectangle 6 */

position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;

/* Blanc */
background: #FFFFFF;
border-radius: 10px;


/* Pour accéder à notre outil, veuillez vous identifier */

position: absolute;
height: 171px;
left: 108px;
right: 108px;
top: 86px;

/* Desktop - Texte courant */
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 21px;
display: flex;
align-items: center;
text-align: center;

/* Bleu foncé */
color: #02171C;



/* Titre */

position: absolute;
height: 86px;
left: 0px;
right: 0px;
top: 0px;

/* Rouge */
background: #E74342;
border-radius: 10px 10px 0px 0px;


/* J’ai déjà un compte */

position: absolute;
height: 26px;
left: 0px;
right: 0px;
top: 30px;

/* Desktop - Mise en exergue */
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-size: 22px;
line-height: 26px;
/* identical to box height */
display: flex;
align-items: center;
text-align: center;

/* Blanc */
color: #FFFFFF;



/* Bouton */

position: absolute;
height: 55px;
left: 0px;
right: 0px;
top: 485px;



/* Frame 3 */

/* Auto layout */
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 15px 23px;
gap: 10px;

position: absolute;
left: 23.48%;
right: 23.48%;
top: 0%;
bottom: 0%;

/* Rouge */
background: #E74342;
border-radius: 30px;


/* Se connecter */

width: 198px;
height: 25px;

font-family: 'Gilroy-Bold';
font-size: 20px;
line-height: 23px;
display: flex;
align-items: center;
text-align: center;

/* Blanc */
color: #FFFFFF;


/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


/* Group 202 */

position: absolute;
width: 380px;
height: 85px;
left: 40px;
top: 230px;



/* Identifiant * */

position: absolute;
width: 380px;
height: 30px;
left: 40px;
top: 230px;

/* Desktop - Texte courant bold */
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 21px;

/* Bleu foncé */
color: #02171C;



/* Frame 3 */

box-sizing: border-box;

position: absolute;
height: 55px;
left: 8.7%;
right: 8.7%;
top: 260px;

/* Blanc */
background: #FFFFFF;
/* Gris */
border: 1px solid #5E7F8C;
border-radius: 30px;


/* Votre identifiant */

position: absolute;
height: 21px;
left: 30px;
right: 59px;
top: 17px;

/* Desktop - Texte courant */
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 21px;
/* identical to box height */
display: flex;
align-items: center;

/* Gris */
color: #5E7F8C;



/* Group 203 */

position: absolute;
width: 380px;
height: 85px;
left: 40px;
top: 335px;



/* Mot de passe * */

position: absolute;
width: 380px;
height: 30px;
left: 40px;
top: 335px;

/* Desktop - Texte courant bold */
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 21px;

/* Bleu foncé */
color: #02171C;



/* Frame 3 */

box-sizing: border-box;

position: absolute;
height: 55px;
left: 8.7%;
right: 8.7%;
top: 365px;

/* Blanc */
background: #FFFFFF;
/* Gris */
border: 1px solid #5E7F8C;
border-radius: 30px;


/* Votre identifiant */

position: absolute;
height: 21px;
left: 30px;
right: 59px;
top: 17px;

/* Desktop - Texte courant */
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 21px;
/* identical to box height */
display: flex;
align-items: center;

/* Gris */
color: #5E7F8C;



/* Mot de passe oublié ? */

position: absolute;
width: 380px;
height: 30px;
left: 40px;
top: 440px;

/* Desktop - Texte courant bold */
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 21px;

/* Rouge */
color: #E74342;

Everything is absolute, font-family and other attributes are duplicated everywhere... There's almost nothing to keep in the final code.

I wouldn't trust an AI generated code, and when you need to make changes you first have to learn what the AI created and to adapt to it, not my taste. I prefer to have full control on this and know what I'm doing.

[teppo]

17 hours ago, da² said:

On my previous project, a designer created a template on https://www.figma.com/. You can export design to CSS, I add a look at this code and it's a terrible thing. 😅

Everything is absolute, font-family and other attributes are duplicated everywhere... There's almost nothing to keep in the final code.

Figma generated code doesn't really feel like it was intended to be exported and used as-is, especially for large chunks like that. I do find it pretty good for other use case, though; for an example you can quickly glance over the values instead of finding them from different inputs all over the GUI.

And I'll admit that I've copied a shadow or gradient every once in a while as-is from Figma 🙂

I'm looking at one project right now, and for color theme it is actually using CSS variables, which takes care of some duplication. I don't know why it's not doing the same for font families, though. And seems to me like it should be able to create a separate element (class) for each text style and then refer to those somehow 🤔

Apart from native Figma tools, Anima (Figma plugin) seems decent. I've not used it for real projects myself and probably won't for the foreseeable future, but I did a quick test with it some time ago and it seemed... relatively good. And it's a nice touch that it can export React/Vue components.

[da²]

4 hours ago, teppo said:

Figma generated code doesn't really feel like it was intended to be exported and used as-is

Sure, but even taking small blocks to move to classes is not really usable.

The box I took as example is just a bit of UIkit configuration in my project, mainly overriding UIkit variables. Depending of CSS framework used it will be different.

[teppo]

1 hour ago, da² said:

The box I took as example is just a bit of UIkit configuration in my project, mainly overriding UIkit variables. Depending of CSS framework used it will be different.

That is a good point. Personally I like the point that they output vanilla CSS by default, since that's most likely what I'll be using, but it would make less sense if you're using Uikit or Bootstrap or something like that. Tailwind export is probably the easiest example, since it's (mostly) just 1:1 mapping CSS styles with utility classes 🙂

Here's a pretty simple button element exported as HTML + Tailwind directly from Figma:

<div class="w-52 h-[58px] px-6 py-4 bg-stone-950 rounded justify-center items-center gap-0.5 inline-flex">
    <div class="text-white text-base font-semibold font-['Roboto'] leading-relaxed">Tue toimintaamme</div>
</div>

It's not perfect: for an example there's no way to tell Figma that I've mapped Roboto with the "sans" font so it should use font-sans instead, for some reason there's an extra div that shouldn't be necessary, and (at least in this case) it didn't understand the context so the button is not actually a button. But on the other hand this is not that far from what you might use in an actual project.

(In this particular project I've got a button CSS component that I would rather use, but generally speaking in Tailwind sprinkling utility classes in markup is the preferred method...)

Edited December 31, 2023 by teppo

[millipedia]

One thing that has improved the speed at which I can mark up a design from Figma is the VS Code extension.

I can open a design in a VS Code tab, and then not only see the the properties for an element but also have them appear as auto-complete suggestions as I type. Given that mostly I'm just grabbing one or two properties for an element that's really useful.

The same goes for assets; I can copy SVG elements directly to paste into my markup or export them straight into my project folder.

If you use Figma and VS Code then it's definitely worth checking out.