How to convert Figma Design into Flutter Code | DhiWise.com

Figma design convater: www.dhiwise.com
Figma Travel UI: cutt.ly/H1uVoZJ
🔥Flutter Shop App Template: cutt.ly/LwQMy7aH
You’re going to learn how to convert Figma design into Flutter code, and guess what? You are not gonna write the code by yourself!
►For the 3D intro, I'm using Rotato: bit.ly/3heGagj
►Support Us: / theflutterway
► Social Media
GitHub: github.com/abu...
Twitter: / theflutterway
Twitter: / abuanwar072 (my personal profile)
Facebook: / theflutterway
► Timestamps
0:00 Intro
Thanks for watching!
Make sure to like + Subscribe For More!

[@user-ir3zy7pm8w]

Oh my God, you really helped us with this tool. I searched for it until I got bored. Thank you for this special service and I wish you success.

[@MrFrostyland]

It doesn't use best practice, e.g. to use classes over function when create widgets.

[@edwardphilipguarin6460]

NOT FREE. for getting the source code

[@tradewithtony]

Great stuff. Some pages look messy and to do manual intervention it's another work, I'd rather code my-self. Thanks for sharing.

[@user-qu2mt7ni2y]

Great!!! Very helpful tutorial. This is what I've been searching for,

[@ag16_69]

Great tutorial, incredible work!!! Does it literraly work after that?, Is it Usable at that moment?

[@farhanfarhan2973]

Awesome project

[@TheFlutterWay]

Thank you! Cheers!

[@quantum_parody]

so straightforward

[@Emmanuel.m-se6ss]

Thank you buddy you’re a great man your videos help me 👍🏾

[@carlosaugustobandeira3784]

very good

[@MrAvelino2010]

Waiting for a complete course of flutter with clean arch, CI, CD

[@blurryface616]

I'm unable to navigate between different screen within the app. How can fix that?

[@aaravinthan001]

It is paid version

[@leandro5406]

thanks for the tutorial ! having a figma link to the project would have been interesting

[@user-sp2im1gv1k]

This is what I've been searching for,

[@dhiwise]

Thanks!

[@sikretp]

Great!!! Very helpful tutorial. This is what I've been searching for, Thank you very much. 😊✨

[@ApoorvPandeyDev]

05:30 more than 300 Lines of code for a home screen lol

[@praveennp4108]

Pls do functionalities and api integration for the same.👍🏻👍🏻

[@jokoendriyanto8435]

its great bro, thanks for sharing

[@ozkankizil]

thanks a lot. its very useful

[@emirhan2070]

Actually, I used this like 3 months ago and I didn't like it. The code was not responsive, also there were so mant useless code lines. I had to fix it from the beginning. It is not that super!!!

[@kascimo]

mine has 15 screens so it's not free

[@_Yousef_Khalaf_]

"Heads Up! You've Exceeded the Free Forever Plan Limit", how can i solve this?

[@User-083-3]

It asking plan not free

[@monisashraf1647]

Does Figma design needs to be in a specific order .. Because for me it doesn't loads up all the screens. It only loads up a few of them.

[@dhiwise]

For Flutter apps, you have to have mobile screen designs (portrait) following DhiWise design guidelines.

[@ahmedjaziri8135]

Very helpful tutorial.

[@jacobpanot9367]

this video is a great help

[@prathameshbirnale1776]

its showing Figma URL must be of minimum 49 characters and figma allowed only 15 character to create profile link ? please help

[@andrewk2505]

thanks now i'm going to factory

[@RamdanCode]

Thanks a lot. I got much insight!,,,

[@AshishKumar-xw3vr]

this will be in paid version not in free.... waste of time .... many other free option to get code form figma with free plan

[@AbangawohZinkeng]

I have 2 issues: first after selecting all the pages I want to generate code for, it tells me no pages found I don't understand why.

[@amiranropyak]

I tried this but I am making a flutter webapp and DhiWise is telling me that the screen width and height is not right. Any way to circumvent this. When I choose to make a web app, flutter is not an option

[@MuhammadFaisal-ey5fr]

Thanks for mentioning this! From you too, I knew the other Figma design to Flutter, named function12 😁

[@TheFlutterWay]

Oh cool!

[@MuhammadFaisal-ey5fr]

@@TheFlutterWay Hey I want to ask 1 more thing, should there be some rules to achieve what we desire in code while we designing the Figma design? I mean are there any tips to make the software create less unwanted conversion things from the design to code..?

[@AddKech]

ششش

[@connelasikong8069]

This is amazing. Is animation included

[@AbangawohZinkeng]

The second issue is when I generate the code, how do I copy everything to the IDE of my choice??? Please I need help

[@ayushindapure6903]

Didn't Know Ronaldo Own's A KZbin Channel

[@vishal_Guleria]

i want to make prototype for table what to do?

[@naifghazali4620]

What if I would like to create a web based that have Desktop & Mobile UI? How can I do that to import to Flutterflow?

[@acavals8080]

Thanks for sharing it! I'm really looking forward to give it a try.

[@apieceofcode-gd1mm]

Thanks a lot. I have a question if you don't mind. I'm about to start working on a Flutter project that integrates AI and machine learning. Which Flutter version do you think is the best to install and work with?

[@alos160]

hello, always install the latest version

[@erumalamkhan9802]

Hello, i tried doing that but I don't know why every time I fetched screen from projects it says no screen Found. Can anybody tell me how should I resolve this issue.

[@abelbarros3588]

not free man wtf

[@US_IRS]

figma to sigma

[@Thisismuhiuddin]

You got a sub!

[@unikmandakh]

how r u fixing the code in VS Code and it's reflecting in IOS Simulator ?

[@joshuamervinbatiancila170]

dhewise right nos have limited screens to download which is sucks

[@omaralhajali3915]

you are great thank you very much

[@TheFlutterWay]

You're welcome!

[@NguyenNguyen-bu9ft]

this is Wonderfulll 😍😍

[@garimajadhav1401]

Which language is used?

[@NONE-sf7eh]

woooooooooooooooooooooow thanl you soooooooooooooo much keep going💛💛💛💛

[@harshitkhandelwal9983]

which extension you are using for that white frame indentation.

[@A.editss7410]

bro this logo is used by my school in its learning app (Btw its name is BLB, blended learning board)

[@askrosm]

Please add penpot compatibility !

[@user-ky7xy5qr2m]

Sir we can do this with uno platform and figma the same method ?

[@ochd431]

I never knew about is where and not

[@shindouLe112]

Oh yeaeeeeh~~! I love it!

[@nnic320]

why cant i download or copy anything from the source code? any help?

[@mateus91234]

Bye Programmers

[@ousmanesow7096]

You still need to do functionalities and api integration 😂😂

[@rodrids01]

goodbye! we don't need y'all

[@zsggem]

This won't work in real life. The easiest thing you have with flutter is building a collection of simple widgets like shown on demo. Next you have to make a proper working maintainable functionality and spend x100 debugging and making code readable, testable, etc. Even the latest GPT generates bullshit

[@o-36]

​@ousmanesow7096 It need big edits when convert it not just like the videos. Iam also flutter dev

[@cruisejay1991]

@@o-36but will it make ur work faster tho and can it handle complex designs

[@alansnyder8448]

So If I'm someone who is learning, could I consider this stable enough to just start my design in FIGMA?

[@mdhamid1809]

👍👍😙🥴

[@BDviralsong246]

h @w M😢6😢😢v

[@reyadislam2980]

​@@mdhamid1809😅😅😅😅😅😅😅

[@bulukumar-xx9gy]

​@@mdhamid1809😊❤iiiiiiio o oo o o oo o

[@olumideolubosede7560]

I think, except you don't have the time, it's better to code manually if you're just starting out.

[@Dacol69]

Good day... Will you have the video but a Spanish version?

[@user-kb5tb7zg8r]

what happens when you update the design on the figma side? does dhiwise rebuild the entire thing and re-introduces the issues you fixed? or does it only update the updated components?

[@TheFlutterWay]

As far as I know, they have a sync feature with Figma.

[@akwasiadomako8315]

😊

[@dhiwise]

Yes. We have a "Sync design changes" feature that helps you bring the latest changes of your Figma design to your existing DhiWse app.

[@KushEdits99]

Thanks sir

[@robertsibanda7737]

awesome thanks

[@rintonorma]

nice share bro! 🤟

[@OhTio]

Payment needed for code downloads. it's not completely free as you indicated

[@user-zg6zh6sk6k]

literally there was a overflow error in the sample

[@DilshanRamesh]

Wow 😮 what a incredible tool

[@firefist4547]

Hello, can you share the figma file of your food app? I am building the same app basically for my school project and I would greatly appreciate it.

[@jacobpanot9367]

im gonna try this hehehe

[@leonardorignanese5902]

I would like to see this design running on smaller or bigger devices. Everything seems pixel defined.

[@ayushindapure6903]

Bro is using CR7 AI in his voice

[@ghulamnabi4335]

It means its waste of time to learn flutter codding now?

[@ronaldnettey167]

This is incredible.

[@TheFlutterWay]

Thank you!

[@DominguezSK]

What is figma?

[@CoolPartOnly]

Ure so cool.. thx u👍🏻

[@shahzebnaqvi]

Which Figma plugin?

[@mikeoxlong4942]

whats figma?

[@316_rajuputradermawan5]

what emulator u use?

[@ConnerWithAnE_]

And here I am trying to learn how to program flutter from scratch... lel

[@LaughingLegends2000]

Brother can you please create your dark light theme chat app with mysql backend instead of AWS? If can do let me know. Thanks in advance

[@TheFlutterWay]

Noted! Thanks for the suggestion.

[@brokentv9296]

several dev will lost their job

[@Webdesignanddevelopment]

Nice

[@user-kq8zh8oj5j]

wait... my schools learn app has the same icon...

[@murtajil]

is this totally free?

[@user-ly3hm5yp1p]

Great!!!

[@manjuadhikari4007]

Jaya maa,jaya bageshor dham ❤❤

[@MutalipUsmanov]

It's just Like joomla and wordpress the code is really mess. It's not applicable for real serious projects. No DI no Templates no Container.

[@user-ls8fi2oq7q]

SUPER

[@edwinperera9133]

Would it be responsive

[@MutalipUsmanov]

No

[@tareqhossain6356]

outstanding

[@TheFlutterWay]

Glad you like it!

[@tahookideveloper3338]

I love you.

[@starhasegawa6000]

it's a heater for winter season aydol.. i hope you asked permission with the police here their very strict here.. kiotsukette (take care) gambatte kudasai (good luck) i'm a fan of your vlogs.. i'd like to avail a shirts of your shirt❤ but i dont know how.. baka naman po malapit na birthday ko aydol❤❤❤

[@lk6618]

well, its working broked

[@ramuvaranasi360]

0:23

[@graphic-Pixel]

😂 🌚

[@user-yi5pc8rd1o]

bang lagunya dj dong

[@elproermr18]

great, but i not speak english

[@user-lr4gg4rj1c]

Please how do i solve this error Target of URI doesn't exist: 'package:flutter/material.dart'. Try creating the file referenced by the URI, or try using a URI for a file that does exist.darturi_does_not_exist looks like the generatedee code from dhiwise didn't add some files

[@Souzx-77]

Faz UÉLI

[@mateus91234]

Um BR aq, aprendendo Flutter, Jovem?

[@guestive]

"Fow to convert Sigma Design into Flutter Code"