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

so let's start our to-do app by creating a new project here and we're just going to call it Todo beautiful create blank and we're brought to this project setup page now we're not going to do anything here but don't worry you still have access to all of these options in your settings and I'll show you that in a second so we're just going to click off setup Firebase because we'll do that later and start building now all of those options are still available to you they're down here in your options but let's go back to our canvas right here and talk about what we're going to do in this video in this video I'm going to show you how to set up your figma file so that it's ready for importing the design system into flutter flow and then we're going to import it but why like why do we need to mess around with a design system why don't we just start building right here well flutter flow is designed to build scalable and maintainable apps and designing with a design system is a central part of that now why is that well let me show you if you're not using a design system and let's say we've just got some text right here then you come down and you manually change all of the properties here so the font weight and the font size and then if you have another text widget that has those same Styles you have to go through and set all those again manually but if you have your design system and you have your typography already set up you can just come down to this menu right here and select whichever text style it is so there's a title large and here I come to my title large and this makes it not only faster to build but more maintainable so you don't have to remember all these values or go back to them they're already all saved now where is this design system well that's down here here is where we'll import our figma theme and we've got other options for styling our app here's our colors our typography and icons that we'll use in our app and theme widgets and these are base styles for widgets that you'll use so for instance the style of a button or a container so once you have all of these set up here then when you reference them in your app you're just referencing Your Design system this also means when you change your design system anywhere where those things are bound in the app will also change and you don't have to go through those and change each individual one okay great let's delete these two right here and then jump into our figma file to see how to set it up so here's our figma file with all the pages that we're going to build and this file is available to you in the link below in the description now when we import our theme from figma We're importing two main things our typography so that's all the fonts we're using and their weights and styles and our colors but we have to set them up correctly because flutter flow is not going to import just every font and every color you used in your projects in your project so which ones will it import well if you just click off here you can see these local Styles these are what will be imported so all of these text Styles and all of these color styles so let me show you how to get these in here now I haven't added this blue yet so let's do that so I'm going to select this blue right here and let's click on it and come into libraries and press plus and you want to click on style give it a name blue and create style then when you click off on the canvas here you can see it's in our color style so it will be imported great let's do these text Styles now to understand your typography let's go jump into flutter flow and see how the type is set up there because then it'll make more sense about what we have to do here so let's come down to our theme settings and to this third option for typography and icons and you can see these are the styles that you have available to you so display small medium and large and then headline title label and body so five different groups of three different weights now these names don't mean anything they're just helpful guides so you can use these styles for any font size or weight or color or family here and they don't have to go from large to small you can use them however you want these are the styles that Google's material design uses so they're a helpful guide when you're setting up your design system so what's going to happen is when we import our text styles from figma we will map them or connect each one of our Styles in figma to one of these Styles here so I have a trick that helps me with this I've got a frame here with typography that has all of those styles that we're going to map to in flutter flow and what you're going to do is go through your design and Define styles for each one of the type choices in your app so I haven't set the type choice for this this little hint text right here so let's set that so I have all the type setting that I want this font called enter it's 18 and regular weight and so then I can come in here to text and select that go to text Styles and click plus give it a name and here I can see all the Styles I have set up already and I can see that I don't have a label large yet so I'll call it label large create style and so when I click off here I can see I've got this label large so I use this text to Define that label large but now I can apply that to the other ones so let's come in here and set label large and do it to all the rest of these now one helpful tip for keeping track of which Styles you've defined is whenever you define one you can come over here and apply it to this type Legend you have so that's the label large I'm going to set it here and I'm going to search for label large and apply it I also like to move it in a little bit like this or do some other visual indicator to say I've used this already so these are the other ones that I have available to me so then by the time you're done when you select any text you should see that it has a style bound to it now why do we need to do it this way well when we're designing our app we probably won't remember which style should be applied to it so we can come back to our figma file let's say we were designing this profile file page and say what is that style called that we defined and we select it here and we can say okay we're using headline large for that and then go to apply it now keep in mind that you don't have to use all of these you could use just a few and that's totally fine Your Design system is just sitting there waiting to be used and if it isn't nothing happens okay once you've defined all of your type Styles and your colors you are ready to import this into your flutter flow project and to do that we're going to need two things the URL of this project that's just the URL of this page and a personal access token so first let's grab this URL here's mine and jump over to flutter flow and come into this design system right here and click this import figma theme and drop in that URL and then let's grab this token right here to do that you can come into here and go back to your files come into your name up at the top left here and select settings scroll down to this personal access token and generate a new token the name doesn't matter so we're going to call it Todo and you normally only need this once so 30 days is fine generate token click on this to copy you're not going to see this again so just make sure you've got it and we can jump into flutter flow let's paste in that token and import figma theme next it's going to walk us through what is actually imported so first we import our colors that's beautiful and now we have to map our colors well what does that mean well flutter flow has some default color category set up so things like your primary secondary and tertiary brand colors background colors text colors accent colors and just like with a type these don't bind you in any way you can use these for whatever you want they're just helpful categories that many apps need and what we do here is we map the colors we're importing from figma to these colors here so our primary color is going to be that green color our secondary one is going to be that blue and our primary background color is going to be this background color and we can just accept all the rest of the defaults now if your app has a dark theme you can come in here and set up those colors our app doesn't so we're just going to save and continue next we're going to do the same process for our type so here's all the type we're importing and so let's import and continue now because we used the same naming convention here it's easy to map these values so display large should be display large and as you can see we're not using any of those display ones so we can just skip over them so you want to just go through and map all of these values so headline large and through the rest of these I won't bore you with this beautiful save and finish there we go we've imported our theme and you can check it by coming into colors here and see that we've got those we can just turn off our dark mode right here and come into our typography right here and you can see that we've got all of those set now one additional thing I'm going to do here is set our primary and secondary font family why am I going to do that well I'm only using these Styles right here but in case I want to use an additional one it will map to the correct font family so I'm going to just come in here and search for enter and set that for both great so now if I use a display the primary font family will be correct and the last thing we need to do is apply the correct colors to our different type Styles so we've imported the colors and the type font and weights but now we need to set the colors so I know from both my label medium and large I'm going to take my primary black and just bump it back to 30% beautiful and that's it all right so let's take a look at how this works in the actual app so when we come back here we see something's changed already and it's this app bar right here because now our primary color has changed and that was bound to our primary color so also if we add a text widget in here now we have all of our type Styles in here and we can just apply them like that beautiful and that's how to set up your figma file for importing into flutter flows design system

Channel: FlutterFlow

Views: 22,741

Keywords: Flutter, FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, Google Flutter, Dart, No Code App, FlutterFlow App Builder, No Code App Builder, figma, figma import flutterflow

Id: 5_PEDRfhJlM

Length: 10min 47sec (647 seconds)

Published: Fri Mar 08 2024