How I built a REAL app using Figma AI in 48 hrs! (ENTIRE UX/UI Process)

[@DesignerUp]

Interested in the Figma/Figjam source file? Leave a comment and let me know! 👇🏽

[@Samay94]

Intrested

[@IGNITE-AUS]

Hi Elizabeth, I can't find that AI Figma tool in my toolbar although I am on the pro subscription

[@DesignerUp]

From what I’ve learned, Figma AI is still in Beta and rolling out to groups of users slowly. Hopefully it will be available to you soon!

[@DesignerUp]

@@Samay94 you can download the project files here shop.designerup.co/buy/9800f742-63ae-4cc2-be33-7b28536fcf9d

[@akinolaamos9542]

interested

[@megaroeny]

I still hope that at some point, the Figma AI features can leverage an existing design system/library you are using. That way, you can use it for existing projects and explore new features with it! Thank you for this video! Very insightful

[@DesignerUp]

Yes! Actually I’ll be releasing a video next week about that… stay tuned 👀

[@FullyMichellethecreative]

Agreed!!

[@DanieleManca1983]

Amazing video, I find your content some of the absolute best Design content on KZbin, I didnt even know yet Figma has implemented AI on the interface, that's great.

[@DesignerUp]

Wow thank you so much!! I really appreciate that 😃 Yes it’s a very new feature but it’s capable of doing some amazing things!!

[@DanieleManca1983]

@@DesignerUp I just found out earlier that it's in Beta still and not available to the majority of users :(

[@DesignerUp]

Ah I see, yes it’s still being rolled out, so hopefully you will get it soon!

[@FullyMichellethecreative]

Definitely gotta hand to them, very dope design on the page!

[@surgdesignstudiollc5383]

Very empowering video! As an industrial designer, our discipline often intersects with product design, UX, and UI. Instead of spending time relearning or learning something new on Figma, we can focus on creating and utilizing built-in AI to develop working prototypes for clients. Awesome video!"

[@DesignerUp]

That’s great point! Definetly think this will open up a lot of different possibilities for more types of designers!

[@surgdesignstudiollc5383]

@@DesignerUp Great meeting you. Again thank you for the great video! Feeling inspired.

[@DesignerUp]

@ lovely to meet you too! 😃

[@SNDtrp7]

Wow, this is really interesting. Imagine all those random ideas that people have which they weren't able to build because of technical limitations - all those can potentially be reality now. I'm definitely gonna give this a shot. Thanks for this tutorial.

[@DesignerUp]

That’s exactly how I feel!! I come from the days when it would take months and a whole team to be able to do this even with technical skills! A lot AI tools of I’ve tried still produce novelty results, but I think this combination is really useful because you can manually intervene and tweak things as you go very easily. I would love to hear if you make something!! I also I’ll be releasing the source file soon. Interested?

[@SNDtrp7]

@@DesignerUp Of course, please let me know when you release the source files. Look forward to more such videos.

[@DesignerUp]

Hi @@SNDtrp7 just released the Figma project files! You can download them here shop.designerup.co/buy/9800f742-63ae-4cc2-be33-7b28536fcf9d

[@felixinit]

Me encantó la forma de organizar el proceso creativo en Figma: 01:24 FigJAM AI (Research, Plan & Strategy) → Figma AI → (Design UI) → Buzzy AI (No code tool)

[@artworthi]

Whoever gets access to the AI Beta has a serious advantage - crazy

[@marleymomo9582]

My thought while watching this video: "Design apps are integrating Coding plugins to make apps. Coding IDEs are integrating visual capabilities to became one stop full stack app creation. All are converging into same outcome- Make AI aps, AI app development Market is going to get scary competitive. This is going to make lot of software engineers obselete, but empower and democratize this powerful creation tool into hands of many" Great video anyway.

[@DesignerUp]

Well said. That really is what’s happening. I think those that are able to solve a real problem for users with end-to-end solutions and understand distribution and sales are the ones that will most likely rise to the top.

[@worldpeace1822]

Yeha it will make it obsolete if you are willing to pay the price for using this service and upkeep and locking your service into that of another …instead of your own developers and actually owning your service … As impressive as it is I doubt this will happen as quickly

[@irma90ZH]

Not me getting hyped by this video and realizing I still don't have AI features on my Figma😭😭😭

[@DesignerUp]

😭😭😭Nooo! I really hope they release it to everyone soon!

[@MrInvisible5119]

Thanks for opening the doors to your process. Excellent work.❤

[@DesignerUp]

Thanks a ton! I appreciate hearing what you think 😊

[@juls2334]

Absolutely brilliant! 👏🏻👏🏻👏🏻👏🏻

[@DesignerUp]

Thanks a lot appreciate you watching!

[@jjustice2010]

Such a concise and generous video. Thank you

[@DesignerUp]

Oh that’s such a kind comment. Thank you 🫶🏽

[@PushanBarman]

I haven't checked that nifty AI feature in Figma yet. Now I'll go and try that out. Thanks for the wonderful content. It helps a lot!

[@DesignerUp]

Thanks a lot! Yeah, it’s actually been pretty handy. I love the repeat components features when you drag down, so good for making tables! Lemme know what you think when you try it out 😊

[@PushanBarman]

@DesignerUp I miss the "repeat grid" feature of XD a lot in figma. Looks like this should do the job.

[@DesignerUp]

@PushanBarman oh that’s right, I remember that on XD, it’s exactly like that!

[@dhruvkandpal3826]

Love the video! Quick question - Can we deploy the apps created by Buzzy in platforms like PlayStore and Apple store? Also, is there an easy way to push updates whenever needed from buzzy to these platforms once the app has been published on respective app stores?

[@DesignerUp]

Thank you!! Yes and yes!! You can use a custom domain and push directly to the app stores with a dev plan (link description). And yes it does communicate changes back and forth to Figma, to Buzzy and to your deployed environment.

[@AndresTheDesigner]

Absolutely incredible.

[@DesignerUp]

😍 thanks Andres!!

[@megaroeny]

19:56 came back to this and had one more question - when you add a "Bucket" is it supposed to dynamically add it to the UI (that tile collection on the Buckets screen)? Guess not since I didn't see a "Travel expenses" tile get added. P.S. Gotta ask what tool did you use for that "Outro" reel/3D clip? Slick

[@DesignerUp]

Yep it gets added to the database and the UI screen! It’s just hiding below the fold @21:00 😏 I would need to reorder those to last on top or add sorting. For the annations I used a tool called Rotato

[@DevonFrohne]

Awesome work! Have you tried Talking in your prompts instead of typing them using TalkTastic?

[@DesignerUp]

What’s that? Never heard of it

[@younghaikwon9279]

Thank you so much your insight.Unfortunately I don't see the AI feature in figma yet... But thanks for showing me an example of how to use it in advance!

[@DesignerUp]

Oh darn! Hopefully they roll it out to you soon and you can revisit this video later. Thanks for watching and commenting!

[@mikkokarjala1737]

Wow! Thats crazy and the potential what future holds on designing with ai. BTW. Im curious. How did you do the animation video clip on the end ( Final result 20:38) Did you use renderforest or something else? 😍

[@DesignerUp]

Wild times! Oh that little thang? I used Rotato 🤓

[@larameg9553]

This video is super helpful and informative! Thank you so much for sharing!

[@DesignerUp]

I’m super glad to hear that! Thanks a lot for watching and sharing your thoughts 💜

[@wagao-d2w]

love your video! It is super inspirational! Does anyone know how to prompt to make more like a mid-fi wireframe? I am stucked with the handwriting style....

[@DesignerUp]

Yeah I really wish it would do more of a true gray box style wireframe. This is sort of just a style change - bit of a cop out imo.

[@damolaAdewusi]

just brilliant!

[@tgentertainment8754]

I'm thinking about it building a social app. I haven't figured out which way to go with coding or not. I'M STILL LEARNING ABOUT WHO'S GOING TO OWN THE RIGHTS TO THE DESIGN, and the app I will subscribe to your channel to learn more. I might have to hire someone to do this for me. Where do I sighed up for more info? Thanks Tyrome

[@DesignerUp]

Hi Tyrone! Very cool that you want to build a social app. I think the best thing to do is start by creating a low resource intensive MVP using no-code to test your concept and see if people actually want what you’re building. If you’re not a programmer already keep learning, but don’t invest too much time upfront before you have some signals from the market. You can join our newsletter to to learn more designerup.co/newsletter

[@FullyMichellethecreative]

Very nice work! All the time. 🔥

[@DesignerUp]

Hey thanks a lot! I really appreciate the support 💜

[@okolofaith4]

This is really cool. Thanks for sharing

[@DesignerUp]

Thank you! Appreciate you watching!

[@AlexanderMorseDesigner]

It looks like Figma+AI+Buzzy creates a new category of non-engineer generated proof-of-concept. Do you consider the output from Buzzy somewhere in between a high fidelity prototype and a production level app?

[@DesignerUp]

I started out with another example that really pushed the boundaries in terms of design and Buzzy wasn’t able to render the complex graphics and vectors shapes but I think that’s just a matter of time. It’s also most CRUD interactions at the moment, so to do anything more complex you do need to ‘understand’ what’s happening in the code and be able to alter it. But what’s really awesome is when you start from Buzzy and have it generate the whole app from a prompt and then use their Buzzy AI to write the code alterations for you within the Buzzy Workspace. You can really do some impressive stuff from there. You can definetly get to production ready, the question is more about complexity and scale, but you can deploy this directly to the app stores as well from Buzzy. I recommend jumping into their very active Discord if you’re curious and seeing what people are building!

[@opsnax1468]

Awsm video but this Ai feature is not showing to me why? 😢😢😢

[@DesignerUp]

It’s seems like it is rolling out to people incrementally, hopefully you will get it soon!

[@Princesspixelsfx]

Same 😢

[@utopia8876]

Thanks, very useful. One question if I may: how do you carry into Figma AI the work you've done in Figma Jam? Thanks

[@DesignerUp]

I usually turn the task diagrams and user stories created in the research phase into wireflows and then into final UI designs

[@Laxobigging]

this was a great tutorial. i'm curious to know if the code can be exported for more complex processes on the backend?

[@DesignerUp]

Yes there is developer mode in Figma that allows you to export Figma to HTML, Tailwind, React, Swift, Flutter etc

[@Laxobigging]

@ great! I have heard about Anima, but I don’t understand what the advantage is over dev mode, do you know by any chance? Thanks for the response!

[@DesignerUp]

@ I used Anima quite a bit back in the day, but since Figma released dev mode it seems unnecessary now.

[@Laxobigging]

@ that’s what I though, just wanted to make sure. Thank you again

[@rohitsai686]

some say that coding is needed for UI/UX design for getting more chances of job opportunities , does your course provide coding aswell??

[@DesignerUp]

Writing code is not really a core skill required for UX/UI design. That would be left to programmers or UX engineers. What’s more important is understanding systems thinking within your engineering teams and how to design for conditionals. All of which we teach in the course. But we do not teach you how to write code.

[@rohitsai686]

@@DesignerUp if atall minimum coding knowledge is good to have up to which level would you suggest ? html, css or javascript ?

[@DesignerUp]

@ it really depends. I don’t the majority of UX/UI designers do not write code. But a generally understanding of front-end (HTML/CSS) would be useful to know.

[@rohitsai686]

@@DesignerUp thankyou that's really helpful to know !

[@creditsavvi]

great video...very informative!🙏

[@DesignerUp]

I appreciate that! Glad you found it useful!

[@flaviaazvdo9333]

Cool!

[@designmoresteph]

could u import this to xcode/turn it into an ios app?

[@buzzybuzz9642]

with Buzzy we'll publish the files directly to your Apple and Google store accounts.

[@DesignerUp]

Even better!!

[@FinnsFenian]

Really nice!

[@DesignerUp]

Thank you! Cheers!

[@victorsvensson7914]

Nah, that one will take as much time to make with the right frameworks as a full stack developer as you did with AI. It is a very simple app with no type of tracking of the usage for capitalization of their usage and economy to run ads for them in their social medias and so on for more developer income. Your app seems very static with no animation between going from one frame to the other which is really needed for the users to feel a flow using it, and that is easy and fast to interpolate with many framworks. I do not think that your app is a native app though. I think it is a hybrid app run in the webviewer component. They are not as fast as native apps. Also, this kind of budget apps are incorporated in every banking app here in Sweden. It is done automatically, so I can see how much I spent on transportation, food, restaurants and so on in categories, without the user needing to label anything, as long as you pay with bankcard. I can tap a catergory and see the history spendings.

[@DesignerUp]

This is NOT intended for full stack developers or those that want to learn to code. This is a no-code tool to help make it more accessible to create apps for anyone. As mentioned in the video, it will take more time to create a more dynamic app, but is fully possible. The app is native. This is not the same as looking at spending categories from your bank card. This is to help you put towards savings using a zero-based budgeting method. Also things don’t work the same in every country.

[@Geera-xi2ei]

I can't see First draft option in my figma, how can I enable it?

[@DesignerUp]

From what I know they are slowly rolling it out to everyone, so you may not have it just yet, but hopefully soon!

[@digitaldesignercommunity]

Yes, please I am interested in the source file.

[@DesignerUp]

Hey @digitaldesignercommunity just released the Figma project files! You can download them here shop.designerup.co/buy/9800f742-63ae-4cc2-be33-7b28536fcf9d

[@BrianKeeley-wo4fj]

Is it scalable?

[@DesignerUp]

Yes these designs are fully responsive

[@BrianKeeley-wo4fj]

@@DesignerUp i mean for enterprise level software

[@DesignerUp]

@@BrianKeeley-wo4fjyes I do believe Buzzy has enterprise level plans

[@klariissocoollike]

basically, no, it isn't

[@sevsaffen795]

Thanks for sharing this. I am on a free figma account, the Figma AI isn't available to check it out... although online forums says it's not about free or purchased account etc that they are rolling this out user by user etc... bummer :( do you have any insight on this?

[@sevsaffen795]

opps, saw that you answered it already for another person! Thank you, best.

[@DesignerUp]

Yeah I wish I knew in more certain terms, I’m not sure what their criteria is for who gets it when, but I’ll see if I can find some more info and share with everyone in my upcoming video next week!

[@designmoresteph]

wait that's what my accountant says too LMFAO

[@DesignerUp]

Hahahhaa! I have no idea what I’m doing 🙃

[@abhishek171278]

How you get figma ai button?

[@DesignerUp]

It seems they are rolling it out to everyone slowly, hopefully you will have it soon!

[@tonystarkmowa]

why im not seeing the figma ai button?

[@DesignerUp]

It seems like it’s being rolled out to people slowly. So hopefully you’ll have it soon!

[@livegamist]

Greeeeeeaaaattt

[@Qurankarm]

Is the AI future in the paid version only

[@Areous]

nice 😊

[@LAGG.lapogozzi]

Non capisco il motivo per cui provo a fare lo stesso procedimento con figjam ma l' aI non mi genera il processo che dovrei fare per svolgere il lavoro ma mi genera direttamente degli insight

[@DesignerUp]

If you want it to generate the boards on the canvas for what to do the using choose ‘Brainstorm’ and enter this prompt for example: A brainstorm. Add -Research insights -Company goals -Next steps Then click generate. This will create the recommended sections to add your work

[@DesignerUp]

You can also download the project file here with instructions on how I did it shop.designerup.co/buy/9800f742-63ae-4cc2-be33-7b28536fcf9d

[@pratiksavaliya3890]

20:32 months seriously! probably hours

[@fredmercury1314]

Exactly. Any decent developer could've made that app as a real functional prototype in an hour or two. Especially if you leverage something like ReactJS with MaterialUI and AWS Amplify.

[@DesignerUp]

@fredmercury1314 you are missing the point. It’s not about how fast you can code an app, this is about the depth of research and design time these things take along with coding. It’s also for people who are not already coders.

[@stephan_clarkson]

It is super strange way of building product. Prototype is more accurate term for it. The way to prepare and do the research - weird, fully relying on AI without verifications - 99% you will go in wrong direction.

[@DesignerUp]

It’s a challenge not a recommendation. This shows the boundaries of how far we can augment our process with AI. As I clearly stated in the video, there’s a lot more than goes into creating usable products.

[@PK-xu7gu]

How many developers is this going to put out of a job? LOL

[@DesignerUp]

Don’t think it will put devs out of a job, but it will help more non-devs build things.

[@notaspectator]

Figma isn't building, premade stuff. this is lazy

[@daeneasj]

*"How I used AI to generate even more CO2 because AI and its server power destroys the planet" Fixed the title for you.

[@DesignerUp]

Yes this is certainly a concern, but AI is not unique in this. I’m assuming you’ve never flown in a plane or ordered something that required freight transportation? These sources contribute a greater amount of CO2 than AI. Luckily, there are many working on mitigation efforts as adoption grows. Including building Green Data centers, optimizing algorithms and companies like Microsoft and Apple pledging to run all AI systems on renewable energy. It’s definitely something we all need to be aware of and do our part to offset consumption.

[@thejailbreakchannel]

I do not consider this to be a real app. The slider isn't even working. dislike. but i liked the first tool