TLDW logo

Figma Make Review: Is It Worth Using in 2025?

By Lukas Margerie

Summary

## Key takeaways - **Signup Flow Generates with Interactivity**: Figma Make builds a user-friendly signup flow from scratch, allowing typing name, email, password, and navigating steps like team size and email verification simulation. [01:20], [02:29] - **No Infinite Canvas for Dark Mode**: Figma Make creates a dark mode version of the signup UI, but lacks infinite canvas support, preventing side-by-side frames like in Figma. [02:37], [03:09] - **Image Reference Recreates Structure**: Using a Dribbble screenshot, Figma Make generates an orange-colored banking app matching the reference structure with time, battery, and graphs, but lacks interactivity. [03:38], [04:11] - **Figma Import Struggles with Responsiveness**: Importing a Figma landing page results in poor responsiveness, with navbar sticking and elements in weird positions, and no interactivity even for mobile apps. [05:51], [06:24] - **Magic Path Enables Infinite Canvas**: Magic Path supports infinite canvas for generating multiple signup flow variants side-by-side simultaneously, unlike Figma Make. [07:26], [09:06] - **Magic Path Offers Code Export**: Magic Path allows viewing, downloading the codebase, or opening in Cursor, while Figma Make only provides publish URL without code export. [09:36], [09:48]

Topics Covered

  • Figma Make Lacks Infinite Canvas
  • Image References Produce Static Designs
  • Figma Imports Break Responsiveness
  • Magic Path Enables Canvas Iteration
  • No Code Export Limits Figma Make

Full Transcript

Hey everyone, welcome to today's video.

My name is Lucas and today what we're going to be doing is we're going to be taking a closer look at Figma Make. And

to be specific, I'm very interested to kind of test out the capabilities of Figma Make. We're going to start off by

Figma Make. We're going to start off by building something from scratch, maybe something very simple, then something a little bit more complicated. We're going

to be also looking at, you know, designing something from a design from a from an image reference. Figma make also has a capability of importing designs from Figma. So, I kind of want to see

from Figma. So, I kind of want to see that and how that works. And at the end of the video, I want to have a final verdict of this tool and see maybe if this is actually the design, the AI design tool of the future or if there

are other AI design tools out there that I totally recommend you using. So, first

things first, we get this interface looking like this. Kind of looks very similar to the actual Figma where we have kind of like a left panel and a top panel. Then this would be where the

panel. Then this would be where the designs are at. Right now, it's empty because I have no designs. Then at the top right we have the share, we have the publish button, we have the play button,

we have my little icon from for my little, you know, uh, user. We also have preview. We have code. Right now, the

preview. We have code. Right now, the code is is pretty much empty. And we

have the mobile preview. And we have this little space for the console. And

we can go ahead and build something with these little preset tools over here. But

for example, I'm just going to do like a signup flow. And we get a nice, you

signup flow. And we get a nice, you know, description here of what exactly we want to build. Design a user-friendly signup flow for a website that aims to provide an effortless onboarding

experience for new users. So, let's go ahead and submit that. And by the way, guys, if you enjoy my videos, um, feel free to join my Discord. The link is down in the description below. We're a

bunch of different startup founders, developers, designers that like building stuff like this. We get together every single day to do live streams. So, if you guys are interested in that, please feel free to join. Link is down in the

description below. All right. And we

description below. All right. And we

basically get something like this. It's

not bad. Apart from this massive space in the center, if I were to minimize it like this, it would look much better.

And I can go ahead and click on this button down here and find a way to adjust the spacing here. I can maybe select this div over here and ask it to fill the width. Anyways, it didn't

really work as it as I expected. So,

let's just go ahead and test out the interactivity. So I typed in my name,

interactivity. So I typed in my name, last name, my email address. Let's go

click on continue. And we do get some type of interactivity. I can just type in some some password over here. Click

on continue.

Now we can write some some random name, ro, team size, create an account, and it looks like that, right? Simulate email

verification. So, in this case, it does do a good job, but I would actually, you know, the thing that I like about Figma is that you can have different frames like this infinite canvas. So, it would

be actually a really cool idea to design this and then think of a dark mode version, not change this, but actually think of a dark mode version and have it in another kind of frame. But

unfortunately, Figma make doesn't have this. You'd have to kind of keep on

this. You'd have to kind of keep on going with this specific frame. So, I

can say something like create a dark mode version. All right. So, we do get a

mode version. All right. So, we do get a a dark mode version. It looks really nice again. Um, but again, it would be

nice again. Um, but again, it would be nice to have it like next to each other so I can kind of see them in an infinite canvas type of style. Now, next thing that we can do is we can get some type of image reference. This is from

Dribble. So, shout out to uh Deepop

Dribble. So, shout out to uh Deepop product, I guess, is the one that made this. And what I'm going to do is I'm

this. And what I'm going to do is I'm going to just take a screenshot of this and ask Figma make to create this like financial app but maybe in another style. So, we can go over here and we're

style. So, we can go over here and we're going to click on this attach design.

Click on upload image. And I've attached the design over here. And let's just say that we want to build some type of finance dashboard mobile app. So, I'm

going to say let's build a banking app.

Banking mobile app to track finances.

Please use the same design as the reference image, but with orange colors.

Right. So, let's go ahead and submit that. All right. And we basically get

that. All right. And we basically get this in a mobile view. In a mobile view, if we were to kind of see everything, we get the time, we get the battery up here. Not looking too perfect, but okay.

here. Not looking too perfect, but okay.

Um, Valera, which is the kind of the same type of brand that we get. And it

seems like a very good structure, like the same structure when it uh, you know, as this other design, but some things like, for example, the graphs are kind of different. I really like the graphs

of different. I really like the graphs here. And there's no interactivity at

here. And there's no interactivity at all. So, that's kind of missing as well.

all. So, that's kind of missing as well.

I can say, let's add a documents page.

so that it can you know add this new documents page. So we have some

documents page. So we have some interactivity here. We can test that

interactivity here. We can test that out. And I can click on this documents

out. And I can click on this documents page and we do get a documents page which is great, right? And we can basically see different documents. We

can we have different quick accesses which looks nice. But again it's very static. Nothing really to click on or or

static. Nothing really to click on or or do. And now we can click on these other

do. And now we can click on these other pages. And it kind of says coming soon.

pages. And it kind of says coming soon.

So I guess you can keep on building with that same logic, right? step by step, adding new pages, adding new sections, adding new interactions. Now, this

following feature from Figma make is the one that I'm a little bit, you know, most interested in. It's called import from Figma, right? So, you can, for example, have a specific file and then

import it into Figma make. At least

that's what I understand, right? So, I

have this iOS 15 UI kit, right? It's

just a UI kit. Let's see how how this performs. So, I can go import from Figma. And what's cool is that we have

Figma. And what's cool is that we have our home over here and we have our community. So, we can search in the

community. So, we can search in the community. I can probably search for

community. I can probably search for like iOS. It's not really showing me any

like iOS. It's not really showing me any iOS results. Um, which is strange. So, I

iOS results. Um, which is strange. So, I

can just search for something like landing page. Maybe it says a collection

landing page. Maybe it says a collection of Figma landing pages. This is by Nagar Nagarjuna Pulam. So, we can just click

Nagarjuna Pulam. So, we can just click on this attach design and we could say like something like create a landing page just to test out the waters, right?

And this is pretty cool, right? We get

the same type of button. we get the same image. So the image kind of like plays

image. So the image kind of like plays the big role here, right? But there are a few things like this login button is kind of strange over here. We get this

cart kind of like up there. It's not

really responsive at all. As you can see, the navbar is kind of sticking to the back. The logo is moving.

the back. The logo is moving.

Different things are kind of like in a weird absolute position. But I want to try one last thing over here. I want to create some other type of app. uh maybe

like a finance app with the same style.

And the first thing that I noticed is that it does struggle with responsive design when you're bringing something in from from Figma, right? So, as you can see, I asked it to build a mobile app,

which is fair. It it did build it in a mobile kind of view, but usually mobile apps have to be responsive as well, right? as like with that previous uh

right? as like with that previous uh example that we built with the with the other banking app. It was mobile first, but it did have like a desktop version where the navbar was kind of like

stretched out to the to the end of the of the border. The different cards were also stretched out. So, it was kind of still responsive. In this case, it's

still responsive. In this case, it's struggling with that. And I also see that it is kind of like I don't know, there's something wrong about it that's not really working. No interactivity at

all. My guess is that it is a little bit

all. My guess is that it is a little bit more difficult to kind of bring in something from Figma and then use Figma make to build something off of that design. Anyways, I'm going to go ahead

design. Anyways, I'm going to go ahead and search for Figma.ai, right? And this is actually a really

right? And this is actually a really good alternative to the Figma make which is magic path, right? So these are some examples that I was building today. Um,

but basically what you can do is you can double click anywhere and we can bring in the same type of prompt that we did in the first one. So we can go back into this user signup flow and I'm just going

to get this right design a userfriendly signup flow. I'm going to write open

signup flow. I'm going to write open this component here, paste this in here and again we could use an image reference and we can use a design system which is really smart. I've done a bunch of videos on that so you guys can check

that out. But we can go ahead and click

that out. But we can go ahead and click on submit. And while this generates, we

on submit. And while this generates, we can go ahead and double click on the side and basically add the same type of prompt so that we get two things

starting at the same time, right? Um, as

you can see, they're both kind of planning and they're both going to generate something different. And

basically, what do we get? We get two different designs, you know, pretty similar in a way where we have the left image and then we have on the right the step-by-step process. But if you zoom in

step-by-step process. But if you zoom in a little bit closer, you can see that it's a little bit different, right? We

have like for example these little three things. We have three little dots over

things. We have three little dots over here. We have different types of

here. We have different types of animations for the images when they change. We have this sign up with Google

change. We have this sign up with Google and Apple. Sign up with or continue with

and Apple. Sign up with or continue with Google and Pinterest. We have this continue over here looking black. And we

have this uh back button. We have step one and email address. Create password.

And then I can click click on continue over here. Click on next over here and

over here. Click on next over here and we have the the next step. So you can continue on like this. But basically

what's cool is that you have the two designs next to each other like this, right? And this is kind of what I

right? And this is kind of what I expected Figma make to have this type of, you know, infinite canvas because it's just so popular to have, right? You

have the Figma design, you have that infinite canvas with all of your different like assets and components and and frames everywhere. So that's what's kind of missing from Figma make I would

say also heading back to Figma make. If

I want to kind of export this code, how am I going to do that? I have this publish here, but we have we can publish a title. We have a URL, but there's no

a title. We have a URL, but there's no real way of actually exporting our code and building this out. And inside of Magic Path, what you what you do have is you have the ability to view the code,

download the codebase, or open it directly inside of Cursor. So yeah,

guys, that's pretty much it. That's my

little, you know, tutorial on Figma make and what I think about it. I'd love to know what you guys think about Figma if you've used it before in the past. And

I'd love to know what types of topics you you guys would like for me to cover in my next video. Anyways, thank you so much for watching. Hope to see you guys next time. Goodbye.

next time. Goodbye.

Loading...

Loading video analysis...