From design to code

this is part of our more larger session.

a larger topic called AI assisted design process.

We had A session yesterday already on maven.

the recording is already available so if you missed it or if you want to watch it again here's the link in the chat.

and In this In this session we will go a bit or dive a little bit deeper in this shipping part.

So how to.

To ship your designs online using AI.

So we are a small academy here in Berlin teaching about the craft of good design.

We have monthly webinars about 60 minutes where we share topics or introduce new topics every yeah every month.

related to design, AI encoding and design system as well.

we also also have workshops.

we have like also two formats like online workshops for now only on ma and we're going to soon introduce in person workshops in Berlin.

So if you're interested to join us you can let me know because for now we are collecting some information and see who would be interested and try to find out the best time like date and time for everyone.

Then we will also soon introduce courses.

So this will be online only resources where you're going to find video tutorials and design kits, resources and more.

It's going to be also be updated.

yeah we're going to have like lifetime updates included and finally coaching.

So if you want a more personal way to learn things.

so we have different tracks.

We have AI foundations.

If you really want to start to learn AI, we have AI for designers and finally AI for design systems.

So like I say this is part of this more global session that is called AI assisted design process where we try to think again about yeah what is a process, what is a like a design process or design workflow when you are building digital products.

how it starts and how it's it's ending and how then also to maintain this, this products.

so here's again an overview starting within the clan and client interview, defining your, your brief and then from this foundation you start to create the branding, the visual direction, the verbal direction.

Then from there you're going to start to create your first designs, create a design system around this and then finally ship it.

today like I said we were gonna focus on this shipping part so I'm gonna skip all the the first part.

So let's assume that everything is done now you have your designs that are ready for handoff.

so in my case I'm still working inside figma.

We had a sort discussion like some yeah short discussion about that People also work only in the kind of coding environment which is also fine.

for me in this.

In this case it's always important to be able to create or fine tune my designs in a very detailed way and to be able to adjust every part of my user interface to store it somewhere and to be able to share it and yeah Figma is still my main designer tool and of course I try to see different options but in this case I'm still using Figma as let's say master or source of truth file that I will then give back to developers or to my AI tool first to create my first HTML version.

So yeah so Figma is still the place where I'm creating or finalizing my designs.

AI is not dramatically or shipping is not dramatically faster with AI but still you have to make some adjustment and this is also what we're going to see today what exactly has to be done.

Also if you are like a non coder things that you can also learn and see what has to be checked right before giving it completely to your developers or developer team.

so what does AI needs exactly from from Figma.

so to avoid any proms or like to to be lost in in Proms and going back like having too many exchanges and losing time and credits.

as we all know it's always better to have a clear file and this is why I'm going back to this figma topic because this is where the file contains all the necessary information like the variables for my color or variables for my type system spacing.

I can create my components, my variants yeah of course instead like real content etc and this I think gonna be much better.

I think you're gonna of course give it, create a prompt but this is going to be your reference right?

that you're gonna give back to AI in order to create a better output and also give already a good structure right?

And and and tell your AI tools how to Yeah also structure the coding part with your FIGMA file as a reference.

and you're gonna see that design system will be also a part of your workflow.

This is maybe things you already use.

I don't think it's something completely new that we have our figma variables as a foundation we have our FIGMA components then later of figma sections and then finally a template.

So this is like this atomic design methodology.

So here this everything the process and methodology stay the same.

and for those who don't maybe use this system or like this mythologies I think it's a good reminder because again the, the yeah this logic never changed.

the tools are here just to make some process faster but we have to keep in mind that we need this strong foundation when we create our designs and then then we have to translate exactly this design information into.

Into code.

This is why I'm mentioning here that we have FIGMA variables that will be translated into CSS variables components into reusable UI components.

So whatever UI components you are building it could be in react it could be inside I'm using webflow.

They have the same logic so normally every let's say front end framework or like coding framework should have the same logic behind.

So make sure that you have this synchronization also the way that you're going to name things.

So really take every step like check every part of this of the system and make sure that you are synchronizing your FIGMA structure, naming convention etc.

in the code environment and of course you can Also it's a collaboration so the coding part can also impact the way you are naming things.

So it's like a ping pong game right.

So it's a collaboration but at least you need this this foundation or like this kind of logic to have a ground of discussion enough collaboration so yeah so design system logic is key right in in this process and about the output so that I will not go too much deep and I still like also learning.

So that's why I'm interested to see what, how you do things and how you currently if you do like handoff or like if you already using AI how is your current workflow?

But the very simple way would be to have your figma and then just testing by creating a first prototype.

This is what I'm going to show you today.

So this is a very like a simpler way like using cloud code or like codecs from chatgpt.

I know there are like millions of other ones but I think this is the one we, we talk and see the, the most.

so just by yeah sharing your figma file telling your AI tool to convert this into a Website or landing page and then yeah start your iteration and your testing Then if you need a CMS behind or you want to build a landing page or site marketing there's a webflow.

so I'm yeah I choose this tool a long time ago because of this similarity with figma.

So you can imagine that it's like the same tool but for the coding part but it's using the same yeah almost the same kind of interface and and you can very easily yeah connect them so there's an MCP or like a connector.

So if you're using Cloud or ChatGPT for example you can easily connect them convert your yeah variables and components for example and then keep working in this environment and you're gonna have like this feature like yeah a CMS behind.

So if it's for a client who needs to update his content for example it's going to be the the tool that you're going to need for this and and the last one where I'm not an expert to be honest but I know if you're gonna build something more customized like a real yeah product right A service product like a dashboard, whatever but you're gonna need like login, interface users etc you're gonna maybe Use like GitHub as a repository for where you're going to put all your code and then like Vercel for example to to ship and to combine.

So again feel free to share your Yeah your, your.

Your.

Your process and maybe if you are building this kind of products.

What, yeah what, what.

What is your current workflow?

So the last part is something I will still try to also experiment.

I'm more in the upper level because my focus is still more design.

But at leave by using webflow I can already offer more than just a simple, simple prototype and already build some clan ready website.

Yeah.

So like I said before, the design system gonna be your foundation and inside your Figma file you're gonna provide this architecture.

So here you see we have this list of variables.

then the base components that you're gonna then later include into your sections and then be able to create your full templates.

Yeah.

And this is something I'm gonna show you in this.

In the.

In a short demo later.

and then when this is done you're gonna turn this into, into code.

So you're gonna select your final template.

And Here in this case we have.

We Have Yeah specific prompt.

They're going to exactly tell the AI tool how to use and how to read my Figma file to make sure that we have already good structured code.

So if you joined yesterday.

So we were talking about all this branding briefing, branding part.

so just very shortly.

So we we started with like creating out of the brief like this brand book, as a reference to create a UI direction Prompt then starting to create our first design drafts inside our AI tool.

In my case it's chatgpt with some plugins or skills that will basically act as a senior designer.

So you will already have good results.

So all this is really to have as less conversation as less bad outputs as possible from your AI too.

Because we also know that we are also limited right?

This is always the.

The thing we don't want to be not able anymore to use our AI at the end of the day.

So try to work faster and to deliver or like to expect already good results in a few seconds.

So this is why all this combination of templates of.

Of good prompting of having a clear briefing at the very beginning using some plugins.

So don't forget we have plugins or skills that you can use for specific tasks.

so yeah yeah in this case it's called a Designly it's a ChatGPT plugin.

Then we have ampicable which is like refining your interface also looking for accessibility issues for example.

Then yeah you're gonna always have to refine with your own prompts or your own own comments and finally import your final design decision inside Figma.

And Yeah we had this prompt which is turning or FIGMA template into already like in like already in a modular way right.

So we already using our variables here from the starter kit.

So we basically teach him that we have this starter kit as a reference that we are using variables that we out of it we are creating our components and this logic is like used for.

For creating our template.

and the result is really almost not perfect but we already have a good result in a few seconds right so and that's what we want at the end of the day as well to to save time to be able at the end just to.

To make this fine adjustment as a senior designer.

Right.

And Yeah this is what we Where we stopped yesterday and now The.

The the the goal is to import or like to go back to the AI tool right because the first step was to use AI and then fine tuning Figma.

Now we want to go back in AI to translate or clean and polished figma file into a good coding or life like life coded coded version.

here I'm telling him to use the attached Figma file or URL.

Yeah whatever.

It's, it's like yeah you can also yeah of course put the URL of your Figma file.

If so so if you share, yeah you can of course put the link might be easier and then ask him to build his page as a responsive production ready interface.

And I think this is the important part that you already also tell him like put all the constraints and the requirements.

So here we tell him to inspect the Figma variables, the style, the components, to preserve the design system logic, keep the component names because I said before we want to be able to sync what we have in Figma in the coding part.

and this is also where the development handoff is important.

This is also where I think as a non coder you can already create something that you can then give later to your developers and I think it's easier for them if they have like just one at least one HTML prototype page.

We can already read inside and see how the CSS variables are named or how the.

How you are structuring your, your code and how you are your What is your naming conventions.

Right.

And yeah so this is what we, yeah so we implemented.

We advise to like we said to.

To create this responsive behavior, use semantic HTML accessible interaction.

So we also already start to yeah advise him or like tell him to to to be accessible.

What I'm missing here, I mean we're going to see later because I will show you my kind of accessibility audit.

We could of course also here already add some accessibility rules that the template should follow like the WCIJ guidelines you know so you could already put this inside this prompt but for now we Yeah keep it a little bit simple.

So yeah we took this FIGMA file we added this, this prompt.

Here's the output at the end.

and then he find out these different sections.

So we had to find the navigation, the button components section called editorial and the footer he mapped the FIGMA system so he made sure that we matched the right colors the right font family, some content grid rules spacing he also reused the existing component patterns so now we're matching the naming we have inside FIGMA is matching the name of or HTML sections yeah he added the responsive behavior and I kept and he kept the page semantic and accessible including labeled navigation, invisible keyboard focus state.

here you can yeah you can see and make sure that everything was done using good practices and and good standards.

Then of course then you're going to have your class which are mostly used for the css right.

So to.

To start to style your Yeah this this.

This coding part here's some area labels.

this is yeah like attributes.

You don't have to use it all the time but this is something as also that will help a screen reader and assist screen reader to let them know about the usage of this, of this of this link here for example and also about the.

The label so you can hear for example add more information right about this this.

This link.

Yeah so classes typical right.

The right class and you see that it's like matching the.

The name of our FIGMA component Here again or tech semantic tag for the type of of this coding element and then the HERO which is also matching the the figma file.

So if you quickly go back here so here section slash hero.

So the HERO will be the class of your element here class editorial and and so on.

And this is also this going to also help the the front end handoff because of the way you're going to communicate with them.

So if you say hey I just updated the reservation block or section that will already know exactly know what you are.

What what you're mentioning and Yeah and here you can see inside.

It's not like we're gonna now go a bit deeper in this topic but when you define these classes you can also then define kind of subclasses to know that here for example this image or the content belong to the HERO section.

And I think this is called rem.

Like there's a kind of naming convention.

So you start with the.

The global naming and then for sub elements you are reusing the name of this Class of the section here in this case and adding kind of dashes or underscores To name sub elements of this.

Of this Yeah, of the section.

if you go then inside the CSS part, like the styling part, here we basically reuse our variables.

So this is like how we create CSS variables.

and this is like something you can use for any browser.

Right, Any browser will understand this.

So and here yeah we have this list of the.

Of all color variables.

we have a different fonts, the spacing.

And also And here you can see inside our section, that we are reusing this this variable.

and we basically follow the same logic that we have inside figma.

But this is like in the, in the coding part.

So this is like the very like basic HTML CSS way when you, when you create like a very simple static page.

and the last part is to yeah to have this accessibility audit.

So normally talking about color contrast, this is something you already It's already done inside your FIGMA file but you can still run an audit during the prototyping phase.

So here the prompt was to run an accessibility review of this page against the latest WCIJ guidelines and then to list the issues by severity and propose fixes.

So I didn't list everything but here you can already see that He saw that the white text on the orange CTA has a too low contrast and then it's giving you like Yeah, normally the contrast it should have and what is good Here is like using variables that we already defined and say okay, instead of using this white text, use maybe this other color from the The.

The styles we have.

or maybe it will also just give you a completely new color.

he's also testing the way.

Yeah the structure.

So here in this case we have this kind of table and this is important for for screen reader because in.

Now in this version we have just simple div and span elements.

Right.

And the screen reader will not really understand that we have this table structure.

So here to let the screen screen reader identify the headers and the column, you have to rebuild this as a semantic table.

Right.

And then yeah you also saw that we are reusing the same picture every time.

which doesn't make any sense.

of course.

And then Yeah, to use a real matching assets in this case, Yeah.

So this is like one way of doing things, one logic.

it's also a good way for designers to also to learn and to see Yeah.

What's behind the scene and what is a clean code.

and how the code and the CSS class are working together.

And this could also be.

I think we always said that it's good as a designer to know a little bit of code and the same that the coders know how to design.

But of course if as a designer you can already give them some coding snippet or like a prototype.

Now with AI you can I think it will, I think optimize your collaboration with them and avoid any yeah.

Misunderstanding.

It was like basics.

We can of course next time I mean I'm again I'm still still learning and also looking for new tools.

But feel free to share your workflow and any specific tools.

I mean we can have even deeper talk about some specific process like the one I mentioned like the one with GitHub, coding code base and Versal for example.

So whatever you are interested in but if you're just starting or if you don't have any knowledge into this coding part.

I think it's good to have like a kind of reminder and some base before starting to use more tools.

and yeah this other thing we show So this is part of our Solo Designer starter kit.

So the.

The goal is like to have what what a studio can do but run by only you.

so if you are like a solo designer or like a freelancer able to now create even better products.

So from the client interview through the.

The shipping part.

so it's a six phase playbook where we describe and guide you through every step and and we include of course like some specific AI prompts some Figma file as a starter kit also practical example and Yeah and to avoid you to stop to start every project from.

From zero and also in the same time to learn how to use AI.

So we also always try to be AI tool or like AI tool agnostic because tools are changing all the time but again the process is the same but then it's up to you to use the correct tool.

and yeah you can join the waitlist.

We are almost done now with the kit.

it was a kind of for me also like a long journey about how to now integrate AI into my design process but I think now we are almost done.

but if you want to have a look already now we are sharing here some so first here so yeah the wait list if you want to to be the first to know about this this kit and then you can have a look inside our Figma file.

This is like a light version that we use for like for example like this starter design Designer starter kit that you can use for Yeah building Your your templates and this Notion site here is like a light version of the Notion workspace we use for the kit.

It will already give you a kind of yeah overview of what is inside the best way to kind of, yeah, stay connected is like we have this newsletter where we share, every.

Every news.

But on Maven, if you were once on Maven, we have the newsletter as well.

And on Luma, this is the one.

You are.

You are now.

yeah, we also gonna share with you the next events.

But yeah, again thanks for watching.

I wish you a great day.

Afternoon, evening and I see you next time.

Bye