Adobe Xd to Real App with Flutter! Adobe Xd to Flutter | Design Weekly

[@PunitChawla]

Install flutter if you haven't to solve any errors: flutter.dev/docs/get-started/install

[@moinhyder4389]

showing pub get failed 65

[@itsmerameshOfficial]

@Punitchawla plz make an another video and eloborate. It's gonna be viral. Even I used the same ui kit which you mentioned in video. But still strucked at 5.99

[@dibyamagar1617]

me too stucked at adding dependencies

[@witchwhispers]

@@moinhyder4389 same

[@shinjushajishinjushaji715]

I am stuck at installing flutter. Error showing "Unable to find git in your PATH."

[@nelsonwafula4171]

I was planning to design apps using flutter since it is cross-plattform and the future of app design. But then I stumble onto this video on KZbin. Thank you very much you have just made my journey to app design much easier. Be blessed.

[@fyuchargroup611]

Extremely tough video all over the internet.. Proud of you .. Genius

[@dev-path]

if you are looking for a static app then yes but adding login , sing up, dynamic data and ... will be so much works

[@medhasingh2454]

This was simply amazing.... XD is levelling up its game day by day 👏🏻👏🏻

[@PunitChawla]

Yes, hoping to see a major update this month!

[@aryankumar87771]

not adobe, it's actually flutter who's levelling up

[@RadhikaGoswami]

@@aryankumar87771 Yup !

[@MujahidOmer]

This is truly a start of something great. But as of now, is it any different than the live preview with Adobe XD mobile app?

[@kaseycarr9130]

That's the whole point, this is a collaboration between Google and Adobe so it's taking the XD file and converting it to code. From what I've (newbee) gathered flutter is mostly widgets anyways so if you use a UI Kit it will convert it to code so you will have an app. Personally to save time and work, I get a functioning app from Code Canyon. some UI kits from elements.envato.com, and then make the changes I want to the app. If there's anything I want to add or put in, I do this in XD or I can straight add it to the app myself.

[@prathameshpatil1275]

This is sooooo great! This is future development will be automatic and Designers will rule the world!

[@PunitChawla]

Hahahah yeahhhh!

[@JaspreetSingh-ty5ci]

Wait that adobe xd, Visual studio, All plugin need programming

[@jainilt]

Lets see bro, your expectation will ruin after you make an app by this method.You wont be able to add any function

[@bitslay]

@@jainilt well you vould add functions after designing

[@jainilt]

@@bitslay that is possible, future of tech is really promising

[@robinn1337]

I am curious if it's possible to re-convert an flutter app or the flutter dart code to a psd/sketch file? Or is there any similar solution to this? This would be realy great for designers if they revise exisitng designs

[@dharminsinh]

💯 XD is growing day by day . And as you said the cherry on top is you make this kind of best videos which helps us to be on edge of technology of ui ux.Thanks a lot 😄✨🤟🏻🤟🏻

[@PunitChawla]

Thank you for the compliment man! And yes, Xd is growing day by day with cool new plugins and features

[@rcjaripalam]

poli sanam ചേട്ടാ ഈ വീഡിയോ സൂപ്പർ

[@Salehammar]

should you create prototype first for the pages before converting it to actual app or how the pages will be linked together ?

[@automation2testing290]

Being a newbie, this was really helpful. Thanks for the video

[@PunitChawla]

Glad it was helpful!

[@centralindian]

That was super quick. Awesome

[@michalgazdik9103]

I was worried that your battery will not make it till the end of the video :D

[@reevanthlama5278]

😂😂

[@harshal.srivastava]

Does it work with all kinds of design?

[@HezOmanjo]

Dude! This is very simple and amazing how you have walked through the tutorial. Thanks!!!

[@PunitChawla]

I'm happy you liked it!

[@astray032]

How can i transfer it onto mobile device?

[@toxintech2503]

@@PunitChawla can we publish app on play store and App Store by this process plz reply

[@maishahasnin3490]

Awesome! Can't wait to try it. Thanks a lot for the video.

[@PunitChawla]

I'm glad you liked it! Show me once you've made something

[@mumpecydrone8788]

This is a really helpful clip. I just need to ask..can this procedure apply to complicated apps as well? The kind with multiple layouts, designs, and even requires cash transfers?

[@ziacodess]

Are you crazy 😂😂 it can't be possible

[@wankhai6446]

@@ziacodess why?

[@ziacodess]

@@wankhai6446 you need to hit the server from clint side ...so ofcourse you need to write some clint server code to handle these things

[@fahemprobelili2208]

At the end of video, we haven't seen the app on simulator et real device !!!

[@vitoptimiert3663]

Fahem Pro Belili 0:13

[@fatinnabila4339]

Thanks for the video! btw, can we make it connect with database?

[@MustafaYldz-wl5vx]

Thanks for the video.It s helped me a lot but I am using auto-animate action to go another page.Its give me an error.What action did you use

[@thesolitudestore]

Does this tutorial apply for more complex applications?

[@hasanal-dhabyani1950]

After converting, can I then link a database server of "Firebase" to this converted flutter app? If yes, please tell me how ❤️

[@thirumoorthim6180]

Bro I'm watching and try to same methods but I have only one screen is visible in virtual studio no one showed into full artboard screens , how do this entire project is running in xd to flutter please explain detailed bro...

[@ramazanguler6066]

the best teacher Punit Chawla, greetings from Turkey

[@itsmerameshOfficial]

adobe_xd: ^0.1.3 flutter_launcher_icons: "^0.7.3"

[@ROHAN-dp4jg]

is this working

[@geffcroteau]

great tutorial that I have been DIEING FOR! But I have an irreconcilable error executing "flutter build apk --debug". flutter build apk --debug 'flutter' is not recognized as an internal or external command, operable program or batch file. Cant wait to try this out, please help!

[@PunitChawla]

Make sure you have flutter extention installed. Also, if you don't have flutter installed, click on this flutter.dev/docs/get-started/install

[@geffcroteau]

@@PunitChawla thanks, I copied the git repo this time. Must have only had it extracted. The apk did compile as you showed- but on loading the app on phone, widgets app, materials app red screen of death error. Fun times!

[@madrivenus2963]

@@geffcroteau can you please share it here. I'm not able to find it. Thanks

[@rogueagent1546]

Bro, any chance we can use python instead of java

[@bharathraj1330]

It's really nice. Thanks fro the info. I have tried the same thing with small login page where it is designed in XD. I tried the same but input boxes not behaving normally. I tried changing text boxes with TextField too. May i know the reason for that?

[@duttaoindril]

This is not a true alternative. Can you see all the translates and hard-coded dimensions? This will only work on the phone it was designed for, with no support for any dynamic content, making this not an app, but just a cool slider slideshow for a specific device.

[@dilipkumar1778]

Amazing expansion sir,........ 😍😇

[@postnatalmotcoach1006]

Anything to start with for those of us on iPad Pro ?

[@tristanholsten7917]

where can i find the version of my plugin version?

[@LETSTALKABOUTCARS]

in creative cloud

[@Fungtv246]

The code to put under dependancies you have replaced with a link what should i type there or copy there

[@eddephilippe4208]

Only for android app? Not Apple? Where can i find a non coding app that is capable of déveloping for both android and apple

[@e11world]

This is great for brochure type websites or apps but nothing where it connects to a server/database & user can actually enter data or anything like that. Good video still. Thanks

[@hollownail]

Well, it looks like it just helps you get the design in, which is still nice bit of work done for you.

[@rohitjawale6027]

Awesome 👍, looking for figma to flutter plugin!

[@PunitChawla]

Hopefully coming soon!

[@kartikdhaduk4024]

Yeh... I guessed it right...it's flutter with XD😀✌️

[@PunitChawla]

Ahan! You guessed it right

May I do this adobe XD to Android Studio?

[@Shikarte]

I'm gonna give it a try 🤩 Amazing video 🙌🏻

[@PunitChawla]

Thank you honey! I'd love to see you try

[@itsmerameshOfficial]

when I click on "Flutter: New Project" is says: Could not find a Flutter SDK, Please insure flutter is installed and in your PATH (you may need to restart). Source: Dart (Extension) And then it has 3 options: Locate SDK | Download SDK | Show Log

[@PunitChawla]

Try downloading SDK. Or check this guide to install flutter. This will solve your problem flutter.dev/docs/get-started/install

[@itsmerameshOfficial]

@@PunitChawla Strucked 5.99 at errors after pasting adobe_xd: ^0.1.3 flutter_launcher_icons: "^0.7.3"

[@ragnarlothbrok6576]

@@itsmerameshOfficial Same with me. Did everything he said but still getting more errors. This video was a complete waste of time.

[@oreofesolarin]

Ramesh Babu You probably didn’t put in the dependencies correctly

[@abhishekchattaraj3488]

after writing *flutter build apk --debug* in terminal, it shows... *[!] No Android SDK found. Try setting the Android_SDK_ROOT environment variable.* what to solve this ?

[@Dabayare]

I have a feeling it will balloon the app size if it's just extracting everything as svgs.

[@PunitChawla]

Not really sure about it that much. It just takes out icons as SVG's just like in any other app.

[@BelajarPemrogramanPemula]

listening, I'm studying UI design in flutter. thank you

[@hobisoon]

Could you show us how to do the iOS version, since it’s easy?

[@izukumidoriya5828]

Im actually getting error like 1 error in each even after pasting the dependencies correctly. Can you help out

[@Shelfless900]

How to publish our project from Adobe xd To the AppStore or play store, do we have to ask permission for both platforms, is there any licenses to publish it ?

[@qamarkhan8136]

Awesome Punit, how to build ios ?

[@drizzy2818]

After I have finished this, can I upload this app onto Google Play Store and the App Store?

[@MrSuvidh]

Depends if the app is working properly without any errors or bugs.

[@astray032]

@@MrSuvidh How can i transfer the apk file onto mobile device for use?

[@easycomputerscienceclasses3372]

hey i have an error while trying this. when i write adobe_xd versions and save it then it showing "Because test1 depends on adobe_xd ^3.0.0 which doesn't match any versions, version solving failed. pub get failed (1; Because test1 depends on adobe_xd ^3.0.0 which doesn't match any versions, version solving failed.)" this kind of error. how to solve it...Please help me please please😭😭😭

[@rajdeep8648]

Punit bhai let`s go

[@PunitChawla]

Yes! Let's do this!

[@harishthanikaivelu7544]

sir please do a video on as to how to do the same in android studio

[@moinhyder4389]

when i saved the yaml file after adding the code it shows pub get failed 65

[@moinhyder4389]

@@devamchaudhari2347 already did but still showing

[@JaspreetSingh-ty5ci]

Maybe it need internet

[@sanderluis3652]

WOWWWW!

[@rahilahmed2524]

so flutter will create one page App.. and If I want multiple page app, is it still possible for a non-programmer?

[@anabakhtar3774]

My splash.dart isn't showing those const string code lines ( 7:24), what to do

[@PunitChawla]

Maybe your design doesn't have a lot of graphic alemenrs! Try adding icons and graphics to get that

[@anabakhtar3774]

@@PunitChawla thanks for replying....after building the app ( flutter build apk --debug) i downloaded it but it runs a demo press button app by flutter, its not the this app you made in the video

[@devamchaudhari2347]

can you explain how you solve this problem

[@sanketsingh794]

I use atom editor, I am assuming it will do the job?

[@PunitChawla]

You will have to manually install flutter and all the dependencies

[@boydchanza7543]

Hi cannot export prototype but any other without prototype can be exported, help

[@gianmarcoziglioli1946]

Thank you very much for the videos!! visual studio don't accept the dependency, how can i do? Thank you in advance!

[@harshal.srivastava]

Does it work with all the design?

[@fabiotgarcia2]

Hi Punit! Excellent tutorial. Congrats! I don't want it to android. I'd like it to PWA. Is it possible?

[@shafmairaj6493]

Hey bro u did this plugin integration thing after the apk we got is that really an actual working app or just a mockup view like XD preview mode? or i should do real coding to make it fully functional?

[@nishikamble9658]

you need to code the backend to make it a fully functional app

[@shafmairaj6493]

@@nishikamble9658 u mean i will get the front end coding and only have to do the backend right?

[@ilyaklyashtornyy4269]

You just have the UI. You need to build up your front end logic (states if pages, procrssing data coming from the server etc.) and you need to implement the whole backend inclusing databases and all the stuff. So it all boils down to a simple UI MockUp. Buuuut... it is a huge help for front end UI developer to spare time ans to build design-close UI even faster.

[@anabakhtar3774]

Please update us about the figma to framerX convertor

[@charlesspurjeon]

How to import multiple canvas and create a multi page flutter app?

[@siddharthasagarbora7823]

Hey Punit! Do i need to download flutter SDK also, to run a new flutter project on visual studio code?

[@ashwinsarath6499]

Yes even I have the same doubt. Update the codes. Link seems to be complicated for Noobs like me! Pls help!

[@nqlid]

Mate still after dependencies show me errors?! Are they same numbers?

[@zkiyyeller3525]

Awesome video new subscriber where can I download the TRACTIV-UI?

[@shakilahommedhimu07]

visual studio say to install flutter sdk ? i cant create project

[@beautymandal5817]

Does flutter works with figma?

[@barsarbro4610]

Android studio walo ka leya kuch hai ya nahi

[@fareedmatjila6350]

Vs code says could not find flutter sdk but I already downloaded it. Please help

[@SharifAlHarun]

Can i publish this app on play store

[@alaaunsplash6926]

very nice bro , but I wanted to see your app after this .

[@siswanto4045]

I just subscribed your channel and your contents is amazing. It really helps me a lot. I want to try this tutorial, but I need to know your design. Just want to know the structure for the app icon. Thank you

[@andrewkigen]

Thank you Punit! This has been very helpful!

[@harshal.srivastava]

Does it work with all the design?

[@rockad9293]

Bro there is no option of flutter: new project...please help me

[@ashel9290]

Im confused I thought there was no coding involved

[@subamsarkar_]

Hey There , Is it available in XD Starter Plan or Do I need to buy the premium plan ?

[@salvatorekapoor5338]

I cannot download this plugin please send new links... Thanks

[@HarisInspirasimu]

terimakasih tutorialnya, menambah pengetahuan saya. salam kenal saya dari indonesia. sukses terus channel nya

[@shamussim137]

Great tutorial! How did you set up the phone layout for testing the code flutter generated?

[@msb1288]

no mediaquery widget ancestor found help please 🙏

[@shinjushajishinjushaji715]

I am stuck at installing Flutter. It is Showing error "Unable to find git in your PATH."

[@ChillysiaMusic]

install git

[@hbphotography194]

I found a prblm in flutter launcher icons .....!!?

[@aaqibdesigns]

Hello, I just subscribed your channel and I love your content. It is quite useful for beginners and advanced. If we design an interference of of app in adobe xd Can we export it to java And published it to playstore? Or for that we will need coding experience? Please reply

[@PunitChawla]

Hi! I have a video on my channel for that. kzbin.info/www/bejne/il7RfYKmpNJ7oLs

[@harshpatil9029]

Can't see your Instagram account sir.

[@hidayetbaysal5772]

When I open terminal it opens in powershell not zsh and it says it doesnt recoginse flutter

[@goorooofficialmusic]

You guy ROCK!!!

[@adityap4222]

Gg, thanks for your awesome video 👍🏻👍🏻

[@PunitChawla]

You're most welcome Aditya!

[@astray032]

How can i transfer it onto mobile device?

[@mhk4u]

Adobe XD is no longer available. What is the alternate solution ???

[@stefanj.99]

using figma and then exporting it to flutter

[@riteshpatel1]

Really Helpful Video!

[@PunitChawla]

I'm glad you liked it Ritesh!

[@hereisy6101]

Broooooo, I am just struck at the 5:40 please bro reply as soon as possible I will be waiting. : ) By the way Amazing and helpful video

[@snehitvaddi]

Hey bro... that Abode link is not working. Please have look at it.

[@pedoyralph5164]

my apk is not the design i made its flutter demo :(

[@muhammadkhabiralam9976]

when I click on "Flutter: New Project" is says: Could not find a Flutter SDK, Please insure flutter is installed and in your PATH (you may need to restart). Source: Dart (Extension) And then it has 3 options: Locate SDK | Download SDK | Show Log please help me...

[@PunitChawla]

Check out this quick guide to install the SDK on your device. flutter.dev/docs/get-started/install

[@kevalgadhiya1470]

same with me

[@esloded]

1. Download the flutter SDK, put it in new folder C:\src 2. Set the flutter PATH (C:\src\flutter\bin) in the environments variable. 3. Install Android Sdudio, Android SDK, install the flutter plugin and Dart plugin in android studio. 4. Run flutter doctor un the comand line, if all ok, you can use flutter.

[@njabulo5791]

the music? who is that?

[@EklavyaLearners]

not able to export the files and also files not shown in the LIB

[@Lisaiceland]

TY. Very good presentation. Appreciate it. Bless

[@mubashirhassan2419]

Does this mean we UI UX designers are from now on complete app developers?

[@_only1sodo]

No, most of the apps require things like internet access, storing previously entered data and a lot of other things that can be achieved only by coding

[@PunitChawla]

App development is complex. To create a complete complex app, we need more that just a plugin. Maybe one day there will be something that gives us more flexibility

[@SarShukla22]

@@PunitChawla For that we can learn basic java ...will that work???

[@JamesPicton]

@@SarShukla22 you will need to learn dart to be able to add anything to the flutter framework. What you choose for the backend is up to you.

[@SarShukla22]

@@JamesPicton thnkx for your valuable guidance!!!!!😊😊😊

[@jujefesko]

Hey @Punit Can we test our app and collect emails from real users, if our app is built with XD to Flutter?

[@ziacodess]

Nooo you can't. ..