Figma Structure & Import | To Do App | FlutterFlow for Beginners

In this video we demonstrate how to structure your Figma file for importing into FlutterFlow's design system and then import it. We also go over some tips and tricks for efficient use of Figma files when using them with FlutterFlow.
Project File
www.figma.com/file/vOkCE880DS...
Ready to try FlutterFlow for yourself? Start building your app today with a free trial 👉 www.flutterflow.com
Follow us on Twitter 👉 / flutterflow
--------------
FlutterFlow is a low-code builder for native apps, bringing design and development into one tool. With drag-and-drop functionality, you can build pixel-perfect UIs and easily connect your app to live data via Firebase or APIs. Plus, you can add advanced features like push notifications, payments, animations, and more. Whether you build your own custom widgets or write custom code, FlutterFlow makes it easy to bring your app ideas to life.

[@VANDIK01]

Great tutorial, can't wait for the next one, thanks FlutterFlow 👋👋

[@JuanCarlos-ff2rh]

I realize that importing only colors, letters and nothing else. Can't import ux/ui design?

[@ColorsAcross]

Love this approach. A practical app developing series. Big Thanks FF team,

[@christiannavarro1154]

A small quality of life improvement in your UX when matching your Figma fonts to your FF fonts would be marking the ones you've already matched with a Checked or any signifier to help users identify which fonts are still missing. Awesome tut btw. :)

[@saidev]

Really thanks a lot for your valuable Innovation to the innovators ❤

[@AdelsTechnologies]

Amazing❤❤❤❤❤❤

[@STUDYMaherajSTUDY]

For everyone who cmare failing to connect futterflow and figma:
1. Copy the figma file url
2.paste it
3. Change the "design" to "file" in the pasted url

[@VANDIK01]

not works 😢

[@MochamadRizanaMauluddin]

it's work thank you...

[@ronaquin496]

Using third party toold its possible to export the whole design from figma to flutter (dart code) to obtain all the colors, fonts and pages. But how can i import this dart or flutter code into flutterflow? I only can get colors and fonts inside flutterflow, but i have to recreate all the elements in all the screens, one by one.

[@selimbouasker6614]

for those who could not import i just found how you do it just change the URL and copy the one from the video

[@pravin9803]

yes, this works. Thanks for the tip.

[@paminla]

@@pravin9803 What did you change? I copied the Figma file into my own Figma account and I still get an error message when trying to import (and using my own token).

[@abdulazizalhumoud3518]

@@pravin9803 can you share the link here please

[@TheNightmareNexus_]

❤

[@kasforai]

How accurate will it import?

[@selimbouasker6614]

I'm stuck with the colors, I tested my app and the colors that t I added didn't show up who had the same problem and got the solution ?

[@MangekyouSharingan269]

Hello i can't import from figma it's says Error loading your figma projet.

[@hussainnes]

same

[@eujuniorseixas]

same

[@eduardomartin1997]

@@eujuniorseixas same

[@Monicaeloo]

same here!

[@hamadayahia2152]

same.

[@Entropy-eg1yo]

I am not able to copy paste widgets in figma

[@ri35923]

It seems cool! Anyway I'm facing a problem with connecting the figma file. I get an error says that my url or token is incorrect while I'm sure they are correct..
how to solve the problem?

[@Monicaeloo]

same here

[@thebestofthebest6426]

Same

[@ananthjg1]

Yeah. Me too

[@SmarttechInstitute-cj6ib]

I cannot import from Figma like the video instructs because the token must be yours. I created a Personal Token but got an error when importing.

[@PA20243]

I have the same

[@PA20243]

I can't connect FF with figma. I added url, access tocken and I see an error. Do you know why is this?

[@PA20243]

@FlutterFlow hallo

[@user-cw8ny5xu4p]

HELLO FF TEAM PLEASE RESPOND TO THIS MESSAGE
I Have been requesting to make video on Genarating Serial Numbering for the Task created e:g- let say for TODO app user added a new task then with each new task it should have serial number assigned to it like in increament way (e.g - 1,2,3,4,5,6), So for user it is identifiable which task has what sequence number
PLEASE MAKE VIDEO ON IT I AM REQUESTING FOR SO MANY DAYS NO ONE OS HELPING ON IT😢😢
Always love for FLUTTER FLOW it is very helpful tool , which really helping me creating app with very less coding...from INDIA

[@Zoyasohel]

Bro , Why so quick brother ? huh

[@RayaNhoung]

Yeah. It's hard for beginner! too quick!

[@bharatha3422]

thank you, don't fire him

[@FlutterFlowAR]

🎉❤

[@SmarttechInstitute-cj6ib]

I cannot import from Figma like the video instructs because the token must be yours. I created a Personal Token but got an error when importing.

[@surendramanjhi2764]

same, did you find any solution?

[@selimbouasker6614]

@@surendramanjhi2764 same here did you find any solutions ?