Ultimate Guide to MagicPath — The New AI Design Tool That Will Change Everything!

Imagine an AI tool that lets you design visually and refine your ideas on infinite canvas with full customization options just like in Figma, but powered

by AI to speed up your design workflow.

Well, let me introduce you to Magic Path. And it's the first AI tool I've

Path. And it's the first AI tool I've seen that is truly made for web and UXUI designers. Instead of working in a

designers. Instead of working in a single static canvas or being stuck in overhelping chat prompts, Magic Path gives you freedom to explore your

designs visually and refine them in real time. When building a product, I believe

time. When building a product, I believe designers should concentrate on the design and UX rather than spending hours in texting prompts to code what they

want. In this tutorial, I will show you

want. In this tutorial, I will show you how Magic Path works and why I believe it's going to shake up the designer industry. Hi, my name is Sergey. Welcome

industry. Hi, my name is Sergey. Welcome

to my channel. Please don't forget to like the video if you like it and subscribe to my channel if you haven't already. And now let's dive in. Okay, so

already. And now let's dive in. Okay, so

when you're logged in, you'll see this screen. Uh, basically this is your work

screen. Uh, basically this is your work zone and you see canvas here. And uh,

please note that you don't see any text input fields. This is so cool. Uh, on

input fields. This is so cool. Uh, on

the left side you'll see an navbar. You

can like close it and open it. uh you'll

see how many components left in magic path component equals to uh well it's sort of like a frame we'll see it a little bit later but you need to

understand that it's not like a frame a static frame in Figma um component is actually like a page of your website that something is going on there and if

you want to have like different pages and u different experiences for example experience of homepage and then experience of logging in or or for example a shopping cart or something

like that. Uh it's it's called flows.

like that. Uh it's it's called flows.

I'll show it to you in a second. So

basically what we want to do, we want to click here. We just double click or we

click here. We just double click or we click here like plus button and we'll see our first component. You see it

looks very similar to Figma uh which I love. And the canvas looks like Figma,

love. And the canvas looks like Figma, right? So it looks like just regular

right? So it looks like just regular design tool that we had like sketch or again Figma and now you can u change the

resolution. So for example I want to

resolution. So for example I want to browser and I want to ask magic path. So

basically here I can prompt uh what what I want to do. Um you can use these options just for a test but uh the

interesting thing is that we can try to do it something by ourselves right so um I have already a prompt ready let me

just paste it here so uh what I want to do I want to design a professional dashboard uh screen for food tracker uh it's a SAS product uh with some um

information here that it should show the trends blah blah Uh design requirements, clean, more than professional look. Uh

scalable design, responsive layout, uh colors, fresh uh palette, greens, blues, oranges, stuff like that. A light and

dark mode. So, um I'll prompt it right

dark mode. So, um I'll prompt it right now. So, I'll just set the prompt. But

now. So, I'll just set the prompt. But

please um look at these two buttons here. One is the image. We can add

here. One is the image. We can add reference and we can use design systems. But let's try to do it with this prompt without uh adding anything else. And I

want you to show I want to show you how long will it take for it to actually make uh the design. So I have my iPhone

here. So I press um start and I press

here. So I press um start and I press start here. All right. So So it's

start here. All right. So So it's planning the design but we can actually do something else. So here we can um do another prompt. So basically this thing

another prompt. So basically this thing is working right now but we can play around with something else. This is so cool. And uh again I want the browser.

cool. And uh again I want the browser.

You see I can like move it around. And

in this case I want to have and I want to use for example this screenshot

uh of the uh crypto currency marketplace trading platform. So I'll prompt it like

trading platform. So I'll prompt it like uh create crypto trading dashboard.

uh use reference and let's hit it. Currently, we see like two

hit it. Currently, we see like two projects are working on. Let's go to design system over here on the top. And

this is so cool. Here we can choose a pre-made design systems for example OpenAI

um Claude and Airbnb and we can use them for designing our layouts basically. Uh,

and also we can tweak them here like we can change colors and then we can use we can save this as

a new um as a new design system and use it for uh our um for our project. For

typography currently it uses only Google fonts for the effects. We can play around with border radius. I want to have something like like really round things. For example, let's put five. if

things. For example, let's put five. if

you see really round but we can use like two for example and let's save it as a test.

So I save it as a test design system.

Actually you can import your own design systems from Figma. Uh you just only need to use variables to put it here. So

basically you copy you export CSS from Figma. You see now we got the the design

Figma. You see now we got the the design and it's 6 minutes, right? So it took it about 6 minutes to get this dashboard

and look at this. This looks pretty cool. So it has everything. It has the

cool. So it has everything. It has the name new tree track. Welcome back, Alex.

You see it has everything here. Um it

added images you see from Unsplash. It

added icons. You see icons look pretty cool. Has the dashboard.

cool. Has the dashboard.

uh click on this frame or component I can even play around this you see with the buttons here and I can like move around so it's not a

static image actually it it's working you see add you see it shows me that the name is required so basically it's already working app it's crazy uh and

now let's check it out in web so basically I can like press here on this globe icon And I can check it out in like web. You see, I can send it to

like web. You see, I can send it to someone uh to see this and to play around with it. You see, I can see the weights, calories. We didn't tell them

weights, calories. We didn't tell them anything about this. So, it's just the magic path made it. It's all AI.

It's It's crazy. It's really cool. Uh I

believe this will work very good for um like product owners for testing like MVPs or something like that. Uh and then

you can use this to design like to fine-tune it in your favorite design app. But uh let's see what we can

design app. But uh let's see what we can do with this. We can edit this component. So when I press edit,

component. So when I press edit, I can now you see choose anything in this design. So I can go and see the

this design. So I can go and see the divs, the H3. You see everything is here. So for example, um I want these

here. So for example, um I want these cards here. I want to change the

cards here. I want to change the appearance. So basically I can change

appearance. So basically I can change the color of them to for example more beige kind of thing. You see I can like changing them. Oh, it changes the the

changing them. Oh, it changes the the stroke actually the stroke and here's the background color. Yep. So, I go to this color and I can change it and you

see it changes like inside. So, I don't have to prompt it. It changes like inside. And this is so cool. It changes

inside. And this is so cool. It changes

everywhere where it has this style. And

now I can play around with the Let's see. Oh, hold on.

see. Oh, hold on.

Um, let's see if I can change the background.

the background. Oh, it's solid.

I'm not sure where to find it, but still it looks pretty cool. And here I can even change uh the type. Oh, not the type, the tech, the copy.

Oh, Alexander. You see? Um, and I can change the name IO for example. You see, uh, and let's check it out in web again.

Let's see if it works in dark mode.

Yeah, it works in the dark mode. So, it

made the dark mode as well. This is so cool, guys. This is this is really nice.

cool, guys. This is this is really nice.

Um, and you don't even have to go to Figma now because uh, well, you see, I pressed saved and um, I guess it took one of my uh, my

components, right? But what I can do

components, right? But what I can do now, I can get the um, the code, right?

But I need to have a pro version because currently I'm on free version here on the free plan and the pro plan costs 20 bucks and the teams for 30 bucks. um for

20 bucks you can export code and you can import it to Corser for example and um B give it to developers basically right so

they can work with it um also I can create v varants of this uh dashboard and the pro tip pro tip here you can

copy this thing just in case you want to have a you want to have a different variations for it. So I press copy and here I guess

for it. So I press copy and here I guess I can paste right. So I'm pasting it and now I can like play play around make a different variation. For example, I can

different variation. For example, I can change colors or something like that. So

uh let's ask uh design uh magic path and let's use

design system uh with for example um clot cloud design system and change design system.

And now I guess it should um update the design system with the one we just picked. Also uh let's check out how

picked. Also uh let's check out how responsive this is. You see

it looks pretty good. So we has tablet and the full screen like HD and I guess it has the oh the mobile, right? So looks pretty

good. All right. So we got the updated

good. All right. So we got the updated dashboard and the new design system that we used claude. So basically you can see it over here. You see it changed the

colors uh some typography styles and uh looks pretty good. Uh but I kind of like the first iteration uh even more. Uh

also you can see that the the component looks like a frame like an actually iframe. Uh and you can see it's like a

iframe. Uh and you can see it's like a window of the product and to have for example other pages like for example like meals you need to prompt it. So

basically you need to select a meal and then you you can ask um you can ask magic path uh to create a meals page

right inside. So after that it will be

right inside. So after that it will be clickable and you can like go inside.

But um if we're talking about flows, flows is like a an experience like a different experience. For example, that

different experience. For example, that we want to have a registration for this, right? Or we want to have uh a um for

right? Or we want to have uh a um for example a profile, menus and settings.

And now in that case, we'll need to have a flow. So we create a flow and

a flow. So we create a flow and basically we press here and we can describe the flow. Uh for example, um let's use with this this style. I kind

of like it more. So we'll use it here.

So create flow and I'll put here um add a um profile profile section

and yeah and that's it. So now it's running. So after a few minutes we got

running. So after a few minutes we got this second uh flow. Uh, and here we can see it's a profile settings. Uh, we can

edit profile. Let's check this out in

edit profile. Let's check this out in our web browser. Um, yeah, you see it's even has the animations. We can switch

goals, preferences. We can check out

goals, preferences. We can check out everything here. Um, oh, I can you see

everything here. Um, oh, I can you see it's not it's not editable, but still it looks really cool. And I can No, I can't play with that. But still it looks very

cool. Uh oh, I can press edit and now I

cool. Uh oh, I can press edit and now I can edit everything. Can you imagine that? So it works perfectly. So

that? So it works perfectly. So

basically this is uh already made uh front end uh and we can pass this to our developer to to apply it to a back end

and to to connect it to a back end. And

this is super cool. Um

what? Yeah. So I saved it and we can even see the notification that it's saved. All right. So we have our uh

saved. All right. So we have our uh crypto trading dashboard ready. It was a very complicated design and had a lot of things inside. But actually it copied

things inside. But actually it copied everything. It copied the logo

everything. It copied the logo uh and things here. But the chart visualiz would be rendered here. So it's

it's not rendering the chart. But let's

see how it looks in the browser. Uh, and

wow, this is so cool. Yep. So, we can uh switch around. So, we can see BTC like

switch around. So, we can see BTC like Bitcoin and Salana tone. You see, we can even uh put numbers in. Well, not

letters. It should be numbers. And yeah,

it looks very cool. You see all the hovers uh overview feed. Unfortunately,

visualization is not working, but other than that, it looks pretty cool. Uh, it has the top menu. You see the drop downs, everything

menu. You see the drop downs, everything works. Uh, here we can see all the

works. Uh, here we can see all the hovers.

It's amazing. So, we actually got this ready and um yeah, we can pass it to again to a developer to connect it with the back end to get the real results to

connect it with the API. So I think this is really interesting thing that we're getting here and uh this is completely changing the workflow of the designers

and uh it becomes a new way to work. So

basically we're not just texting prompts and changing the designs by texting right we can actually change the parts of the design using uh tools that we're

used to and that we can see in other graphic design or or I don't know design apps. Uh and this is really interesting

apps. Uh and this is really interesting that we can get this structure and we can get the idea from the AI and then uh

tweak it using all these um options. Uh

also this is going to work really good if you're for example presenting to a client uh some ideas. For example, if you're signing a contract and the client

asks you to see for example three uh three variants of homepage. So basically

you can you don't need to spend a day to design these homepages and uh then not getting paid. Uh you can actually prompt

getting paid. Uh you can actually prompt it here. You can get three different

it here. You can get three different variants and you can show it to the client and tell them that this is what I can do. This is uh the idea and then you

can do. This is uh the idea and then you can design all the pages of the website using magic path or you can uh get the

ideas and transfer them for example to Figma to have more options of like manually designing uh things. But other

than that I believe uh this is a gamecher and I see it as a huge um an impactful tool in the industry right

now. So, we'll see how it goes and um

now. So, we'll see how it goes and um we'll see what other changes and updates they're going to have in the future.

Thank you so much for watching this video. I hope you like it and don't

video. I hope you like it and don't forget to check out Magic Path. The link

will be in the description below. And

also, don't forget to like the video if you like it and subscribe to my channel if you haven't already. And I'll see you in the next one. Bye-bye.