# Figma to Real App & Website With AI! – Design to Code With AI | V0, Anima AI, Google Studio

## Метаданные

- **Канал:** Punit Chawla
- **YouTube:** https://www.youtube.com/watch?v=7YpYYC7dnE8
- **Источник:** https://ekstraktznaniy.ru/video/43331

## Транскрипт

### Segment 1 (00:00 - 05:00) []

Today I'm going to be showing you tools that I've been using and testing for the past few months. Some of these are so stable and so good that you can stop coding and just utilize your Figma design skill. Let's see which of these tools is the best. The first one on the list is VO or V 0 by VCEL. In V 0 to import any Figma designs, you just click on this plus icon and say create from Figma. You can even upload screenshots if you use any other tool. I'll say create from Figma. And all you need to do is go into Figma and copy the link of the frame that you want to import. And from there you just paste the URL that you copy and just in 5 to 10 seconds this will show sort of a basic screenshot of what you can expect the colors that it's detected the kind of screenshot that it is seeing can add additional comments. Ask it for specific features etc. The instruction I've given it is give me a landing page with proper top navigation which is important. footer. I give you full freedom to animate and add transitions to different sections. Again, you can enhance this prompt, make it better, but for now, I'm just going to send it over for it to work on. It works its magic, and it's very detailed with the magic as well. It basically creates all different kinds of pages, sections, and even elements with each step sort of linking to a certain code. As you can see, very close to what we had designed. Chairs, sofas, tables, nice little drop down. We have a navigation little button here on top and a working search bar which I can use here. What was surprising to me was this cool section that it's built where literally if I hover over any of these points that it's marked wooden stool sofa orange sofa particularly something that we see on a lot of furniture websites these days. I think it's very well built. I actually want to show you some of these animation. If I scroll down as you can see everything appears so smoothly one by one. And yes, there is a working tab as I had mentioned earlier and the carousel works smoothly as well. If I hover over the cards, the cards are also welld designigned. Some of these are missing links and for other functionality, but that is something you can mention later on or during your first prompt. On the top, if I switch from desktop to mobile, everything works just the way it was with the desktop. There is a mobile menu as well right on top and everything is responsive. A few things were broken. For example, this carousel, you know, it's hiding from the edges like this. But that's something I can always mention. It also has some cool things like console, which a lot of other tools do not have right now with a proper terminal as well as logs. So, you can see all the images coming in, all the scripts being used. And you can even use this little terminal that is right here. And yes, you have a code view as well with all the files, etc. with editable code. So if I want to add any code here or any comments, I can do so. They also have a split view so you can open multiple windows. If you're into proper development and coding, this might help you out. Now the advantages of Verscell are the integration including the GitHub integration, Stripe, Grock, Amazon database, Superbase and whatnot along with a domain that you get a free domain or you can just buy a domain from Versel directly. There were a few issues I found. It takes around four to 5 minutes just to generate one small page and it cannot import a very large landing page or a very large project. Next, let's test out Google AI Studio which has become a standard in my workflow. I'm using this for AI generated images, copy text and recently I'm building my own port personal portfolio using go Google AI studios code. Now, cool thing is it can import from Figma or its very own design tool which is Google Stitch. Google's AI studio is shockingly good at replicating design. To test Google AI studio, I have to go to build rather than playground. And here I can select any one of these. For now, let's stick to the free one, which is Google Gemini 3 Flash. Here, I'm going to import a PDF of my screen or my landing page. We're going to be using the same command we used with V0. Generate a full landing page like the PDF that I have uploaded with proper navigation, footer, tabs, and carousels. I give you full freedom for animations. Now, as you can see with our original design, we had complete furniture in the background. So, yes, this definitely is better with images etc. It took less time as well as compared to V0. This was like 2 or 3 minutes rather than the five 5 and 1/2 minutes that V0 took. But because of the time it took, as you can see, the navigation does not have any drop down. There is no interaction given to this little cart right here. And with these sections right here, they actually work, which is very good for what Gemini does. The actual design is not very good since it's overlapping each other. Not a very good start. I like that there is a glass finish, frosted glass finish right here.

### Segment 2 (05:00 - 10:00) [5:00]

I just want to test out whether this also has good animations. Yes, it does. However, there is no scrolling animation. There's also a nice transition from this transparent bar at the top to this translucent one with the same glass effect. There is a nice functional tab which I explicitly asked it to make which is nice and which is really good. And honestly, it does work slightly better than VOS because VOS was very static. This animation looks a little better. Also, I like the overall design here. Now, the carousel is more or less the same with the hover animation and the image expanding. And the carousel works very similar here. As you can see, major some of the things like terminal etc. are missing from right here from the panel. But you can view the code in all its glory and detail with different tabs as well. So there's more tab support here as compared to there. There is no window tabs or double tabs that I can open up. So no split screen or nothing. So all that fancy stuff for developers existed there. You can copy this entire project and share it with people. So that is one option. But yes, it does need more payment options or billing options before you can even get started with public publishing anything. But for most people, I feel Gemini is just cleaner and easier. doesn't necessarily mean it's better. Let's move on to the OG of web builder. Anima was one of the first actual web builders built inside Figma. It was a plug-in. It still is which can literally add code inside your Figma files. First of its kind and it did something Figma couldn't at the time. Now it's come into the AI era and built an entire tool around that. Once you log in, you get access to more tools and features from right here. You can import from Figma, clone to website which is unique to Anima and just a few other tools and match a brand. So if you just want a website built from scratch, you don't have any designs or anything, but you have a brand ready, maybe a logo or something, you can import that. So cool thing to have these extra features. You also get to choose whether you want React applications or HTMLs. If you're building a solid web app, React is best. And you can choose from styling. if you want to choose a CSS library like Tailwind or you just want plain basic vanilla CSS. Okay, so I'll import from Figma. Unlike the other tools, this is actually a little more seamless. I just get to paste the link here and let's just use the same prompt that I had for all the other tools and I'll say go. I'm not sure if you can see this on your screen, but here you go. There's an actual percentage here, which is so much better than just guessing how much time it'll take. Okay, to be fair, this tool took about 4 to 5 minutes, which is very close to what you expect from V 0. And it also has a lot of cool functionality. I didn't even ask it to do. It is a nice little navigation with a nice little drop down as well, which is much better than even on V0. It also added stuff like new collection and whatnot. And it unfortunately like the other tools it was not able to add that little hover functionality which is unfortunate. And if I scroll down the navigation also has a background which pops up. I like that it's added uh icons and stuff like that here which is a nice touch. So it's doing a little more design work on its own. It has changed a bunch of design. Unfortunately it was not able to understand the assignment completely and just gave me this random carousel which doesn't even work. Of course, I can fix this in a second command, but this is the first result I got. Anima, next time try not to fiddle with my designs so much. Another cool thing is that it has a lot of cool functionality in build. For example, there is of course the code mode which is necess inbuilt database here and only takes about a couple of seconds to actually enable this. There is a flow as well. So if you want to create a nice user flow for an entire app or entire website, this also has features dedicated for that. And it also shows you the Figma designs that you've uploaded. It also allows you to download your code as well as publish very similar to V0ero, much better than Google Gemini or AI Studio. So bunch of cool stuff. Unfortunately, once again, no serious integrations I could find here. Unlike V 0ero and Google AI Studio, it actually has something called a select element where I can select each element, select one of these and ask it to change that element from this little chat from the left. But I would still give the cake to V 0. V 0 still is working better than all of these. I recently saw the launch of design first vibe coding tool called anything and it also now has Figma support. As you can see, there is this nice clean interface and Figma logo just pops up right here. If I click on this, it'll say sign into Figma. You can just

### Segment 3 (10:00 - 12:00) [10:00]

paste your URL just like with all the other tools. And of course, it has all the other features like choosing the best model for yourself and even cool integrations like Google search, Google Translate, and whatnot. Before you even start your project, you get to choose these, which is a nice touch. And it was also the fastest. Literally, this took like 1 minute. The drop down kind of works, not completely. So, just half working right now. Some of the things work for sure. For example, this nice little tab works, which is very good, which I think is much better also than others. But there is no carousel at all. So, I really can't test that. The footer is very similar to what we had with our design, but it's taken a lot of liberty, and that is a trend I'm seeing with this tool. It's taking too much liberty with what it's doing. It does have some things as you can see. You can check out the errors and essentially with the logs right here which is a nice touch. It does have a code interface as well. You can tweak stuff here too if you'd like and update it as you go. You can publish it with a free domain which is a nice touch and get a custom domain with w with an upgrade. What I like here is the version history on the top left which you can check out all the version histories and different websites you've generated with the changes as well as custom instructions. So you can add a custom instruction file and it will only follow those instructions. You have assets. So you can literally upload images etc and ask it to use those images. You have O providers unlike other tools where you have to link a lot of stuff. It has integration with O providers. You can even link inapp purchases with iOS and revenue cat which is a nice touch. All right guys, which tool was your favorite out of all these five tools that I sort of reviewed? If you guys like such videos, make sure you hit the thumbs up and subscribe for videos every Monday and Thursday. I post such design videos every week. And for the Hyderabad meetup, if you're interested, the link will be in the description. I'll see you next time. Until next time, take care. God bless.