Connect your design system to Figma Make!

Wipe coding is a very trendy topics and I personally love it because it's give me the power to convert the ideas and the imaginations that I have in mind into clickable prototypes or sometime

into real functional application in less than few hours with minimum effort and without having to know coding. Although

this might sound fun, I have to admit that in so many cases I felt very frustrated using AI to do the w coding.

mainly because in so many cases the results that I got from AI weren't accurate at all and sometime even the AI generate me the code with a lot of bugs

and errors that solving those errors were very complex process because each time I tried to solve one of those errors using the AI I ended up having more errors which were very frustrating

process. In addition, one of the other

process. In addition, one of the other very important pain points that I experienced doing wipe coding uh was that so often AI generated inconsistent

result in terms of UI stylings and functionalities. I started to do wipe

functionalities. I started to do wipe coding using chatbt and cloud and later on I switched to cursor and copilot and now at the moment I'm using Figma make.

There are a couple of reasons that why I like Figma make a lot and I really recommend you to start doing wipe coding within the Figma make instead of other tools. The first reason is that it's

tools. The first reason is that it's very easy to use. The user interface is very simple and it's like the other AI based tool with this chat that you can put your prompter and then start your

work. And the second reason is that

work. And the second reason is that actually it is a part of the Figma ecosystem. So it's very easy to switch

ecosystem. So it's very easy to switch between Figma design file and the Figma make itself. So you don't have to really

make itself. So you don't have to really jump around different tools. However, if

you don't want to be dependent on Figma, it's of course better to start to do your W coding within the cursor or other tools that give you the full freedom and

power. But that's not the topic of this

power. But that's not the topic of this video. In today's video, I would like to

video. In today's video, I would like to show you a couple of tricks and ways which will help you to increase the quality of the results that you are

getting from AI within the Figma make by providing a better and higher quality context of what you exactly want the model to generate. So bear with me until

the end of this video if you are interested in this topic. And don't

forget to smash the subscribe button right now if you are new here. And if

you haven't done yet, like this video and share this video with the other designers or in general anybody else that you feel like this video is going to help them as well. Now without

further ado, let's get started. So as I said uh if you are doing w coding using the AI doesn't matter which AI tools you are using or which model you are using.

If you would like to increase the quality of the results that you are getting from AI, you have to prepare and feed the AI model with the more

information with the uh information that has enough or provide enough context for the AI model to understand you better and in result generate the things that

are matching with your expectation. Here

you can see that I open Figma make for this video. Let's imagine that we would

this video. Let's imagine that we would like to create a page with a list of teasers uh and one let's say filter bar in the left side including some items

that we can filter out the teasers based on those items. It's a very simple page actually. So the first thing that we can

actually. So the first thing that we can use in order to give a context of what exactly we want to generate is of course the prompt that we are providing the AI

models or AI uh in general. Here the

Figma make is the tool that I'm using.

So we can start by giving a prompt. It

is of course very important that how you kind of structure your prompt. The more

explicit you are, the better result most probably you will get from your process.

However, the AI models are getting more powerful and I mean even sometime very simple prompts such as the one that I provided and you can see here uh can be

sufficient actually. For example, here

sufficient actually. For example, here I'm asking the Figma make uh to make me a page with the list of teasers and with

the pagenation in the right side and a filter menu in the left side. Let's send

this prompt and see if this can be enough for Figma make to understand what exactly I want to have. So here we are.

We have uh our first result. It's very

decent actually. We have the pagionation. We have a bunch of teasers

pagionation. We have a bunch of teasers within our list and we have a category which is actually sorry I mean the filter menu that is really working. is

functional and it's filtering out the stuff based on what we select in the menu which is very impressive already.

However, if I want to change something here or if something is not exactly like how I want to do uh I can continue

improving the result using the prompt.

For example, in in this case, if I want to introduce a primary color into my design, for example, if you can see right now, we don't have much of a color

here. It's a very monochromic in to be

here. It's a very monochromic in to be honest, there's no color. Uh, if I would like to do that, I can maybe come here

again in the chat and ask the Figma make to add primary color to some of the

items or elements and use blue as primary color. I can even give a code of

primary color. I can even give a code of the color to be more accurate. But even

this one, I guess, is going to work well for us in this case. So as I said we can continue improving the result using the

prompt which is in many cases actually enough especially if we are uh using the uh Figma make to just create some sort

of prototype for the ideas we have and we don't care so much about the stylings and consistency in the uh elements and in the user interface that we get from

the AI. This might take a couple of

the AI. This might take a couple of minutes and then I'm going to show you the result of our next iteration. So

here we are. This is the result of the next iteration. And now we can see a

next iteration. And now we can see a bunch of elements with the primary color which is the blue which we provided

using the prompt and this helped the AI model to understand us better. So yeah,

this is one way to get a more accurate result. However, this was the most

result. However, this was the most obvious way. I would like to now show

obvious way. I would like to now show you the other features within the Figma make which is giving you the power to be more accurate and get more consistent

result. Let's try one of the most

result. Let's try one of the most important features that I recently used and I like it a lot which is this feature which you can see it here in our

chat section which says if you hover on it which says that you can select a library and add it

to uh this project to this Figma make file which is very very interesting and very helpful thing actually. Um, at the moment I have a no library here in my

list which I'm going to show you how you can bring your library into uh this list and you can select it and add it and attach it to your Figma uh

make file. Uh let's open the Figma

make file. Uh let's open the Figma design file that we have our design library within it. You can see for

example this Figma file has uh the text styling the colors and if I open the uh let me open the variable window you can

see that we have a lot of variables defined here in different mode. To be

honest this is the default library that the Figma uh actually provided us. So it

has been done by Figma team itself. I

did not do any new or I did not create any new library. You can use any any libraries that you have. But the thing that we need to do is we need to publish

and export this Figma file in order to be able to use it within our Figma make file. Which means I'm going to switch to

file. Which means I'm going to switch to the asset panel. Come and click on this book icon. And as an always I publish my

book icon. And as an always I publish my library.

If you come to this window which you can see right now it opens here. You can see all the assets that you are going to publish. Plus you can see this new

publish. Plus you can see this new window which says uh that we can export this design library into the Figma make and use it in the Figma make which at

the moment I cannot do it because I did not publish the library yet. So we have to publish it first. When we publish one library as you might know uh we are

going to have access to that library all in whole Figma uh environment the working environment that we have uh actually we can define the access we can give the access to everybody within our

team or in a specific project. But that

means that if we want to use this library in another Figma design file or in Figma make we are able to attach that Figma library to that new Figma design file or Figma make as I said uh we're

going to wait right now you can see here that it indicate how many component and how many elements are going to get published. After that we are going to

published. After that we are going to get back to the Figma make attach this design library to our Figma make file

and continue working on our uh result and see how we can get a better and more accurate result using our design library within the Figma make. Now we published

our library we have to export it for the Figma make. So let's get back to the

Figma make. So let's get back to the same place again and this time we can click on the export and the Figma to the Figma make which is going to take same

amount of the time I guess. Um actually

publishing the library itself it took me around 2 to 3 minutes. It depends on how many components you are publishing or how many styles you have in your design but it's going to be something around

the same time. Now we are back into the Figma make it. Just don't forget to refresh the page one one time otherwise

you won't see the exported Figma library within your list here. Then from this icon which if you hover it will say select the library which I already told

you. Uh you can click and select the

you. Uh you can click and select the design library that we exported.

uh and actually it's automatically uh asking us if we want to rewrite this styling based on the library that we're going to attach which is very very nice.

Let's say rewrite and then we can wait and see if things are going to get differently. Um, I mean maybe it wasn't

differently. Um, I mean maybe it wasn't the best example because we use uh the default Figma library which is also the

default library that has been used within the Figma make. So basically they are the same but you saw that when I uploaded or attached the design library

the primary color that we had here was blue before that and it changed it to the primary color that has been defined in the design library. uh and this is

one of the way that you can bring the design system that you have into your wipe coding. So it's more systematic and

wipe coding. So it's more systematic and based on the design libraries that you have. So don't forget this is going to

have. So don't forget this is going to increase the consistency uh of what the AI is going to generate

you. Plus there is one very small trick.

you. Plus there is one very small trick.

If you switch to the code section here, you will find a file under the uh guideline uh basically folder which you

can write down the primary or the most important guidelines related to your design library or in general systematic way of working here that the AI can

understand you even more. You can

already see some examples here like what exactly you can write down and the rest of the stuff which you can override them. How you can write down your own

them. How you can write down your own stuff and explain what exactly you want to do. Now let's go for the next step.

to do. Now let's go for the next step.

The other way that we can change the way that AI is working or in general provide them more context is to copy and paste a

frame from our design into our chat and ask the AI to use that as a reference.

So let's see how that is going to work.

I'm back into my design library file uh one more time. I'm going to open the asset uh list here. And here under the create uh basically example section or

example folder. If you open your asset

example folder. If you open your asset list for the first time, you will see these categories. From the example

these categories. From the example folder, you can bring uh some uh already prepared ass basically templates which I'm going to choose this one which is

matching with the one that we have a lot. Now without doing anything special

lot. Now without doing anything special I'm going to select this frame copy it using the combination key uh command and

C or control C in window switch back to the Figma make and here in the chat I'm going to paste

the frame.

Okay, I mean that was a little bit maybe too much. But you can see that the frame

too much. But you can see that the frame that we brought from the Figma design file is attached properly into our chat.

And now I will write down a prompt to explain what exactly Figma make should do. Let's click on a prompt and wait and

do. Let's click on a prompt and wait and see if things are going to get closer to what we have in our design and in general [clears throat] uh yeah the ideas that we expect to see

uh in the Figma make. So now we get something totally new. You can see that uh Figma make took the reference that we

attached to our chat as a reference and change everything related to that. For

example, the footer now has the exact same styling. The rest of the elements

same styling. The rest of the elements having the different styling which is coming from a reference and the everything else is also based on that.

But it is still using our design library as a main source of collecting the basically stylings and everything else.

So this is the other way which will help us to get more accurate result based on what we have in our design. We can also use the other feature within the Figma

which is helping us to specifically focus on a specific part of our result and try to improve that part even more which is basically this tool. You can

find it here. Let me hide my camera view point in edit.

When you select this tool you can hover over all elements within the page and you can select a specific one. For

example, in this case, I select the P tag, the HTML element uh within this uh div. You can select anything else. I

div. You can select anything else. I

don't know this logo we can select. And

some of the elements we have also a couple of properties that we can change manually. So, we don't have to really

manually. So, we don't have to really use the AI. Uh for some, we have more um properties, CSS properties. For example,

here I can increase the size of the P tag here or um I don't know we can do more stuff

or we can directly uh open the chat here using this option here and ask the AI to ch change the stuff uh based on the prompt that we are giving. The other

thing is also if we know a little bit coding we can go to our quote the source and here we can do the changes manually

including the stylings or the overall structure of the page. So these were a couple of ways that you can increase the

quality accuracy and consistency of the things that AI is going to generate for you within the Figma make. You can find similar actually approaches using the

other tools. You can do the same stuff

other tools. You can do the same stuff within the cursor to increase again the quality. That was it for this video. I

quality. That was it for this video. I

hope you learned something new and [music] if it was so don't forget to smash the subscribe button, like this video and share it with the other designers community. Let's learn

designers community. Let's learn together and see you in the next video.

[music] Trade off. No [music] smoke in the sky.

Trade off. No [music] smoke in the sky.

One pass in the [music] headline land.

Micro to macro, the system stands. If it

saves a [music] step, it's already gone.

>> [music]