flutterproject-structurefigma

How to Set Up a Flutter Project Structure Based on a Figma Design?

I have a Figma design for my app and want to set up the Flutter project structure (specifically the lib folder) based on the design. The goal is to define the app’s architecture — like folders for screens, components, widgets, etc. — in advance so I can then implement each part individually.

Is there a way to automate or streamline this process? Or do I need to manually create the project structure based on the design? Any suggestions or best practices would be appreciated.

Solution

  • I don't think there's a "Correct" answer to this, but since you've asked explicitly for generating the project structures or files, you can start off with:

    I personally use hygen to handle the boilerplate code in my projects, you can take a look at: https://github.com/mhmzdev/the-holy-quran-app in _templates folder.

    As per Figma is consider you are looking for Design System, here's how I do it generally:

    1. Typography: Have a class as AppText or something that holds all your headings, body and label texts.
    2. Colors: Have a class as AppColors that holds your primary, accent or secondary etc. colors from Figma in here.
    3. Spacing: Any kind of constant spacing like paddings, vertical spaces, horizontal spaces mostly they are multiple of 4 i.e. 4, 8, 12 etc. You can have a class AppSpace to hold these as per your Figma

    Rest are your components, that you can get from your Figma design e.g.

    Button

    These are possible states for any kind of button i.e. primary, secondary, accent etc.

    Hope this helps, for more details this video is a great example of what you are looking for: https://www.youtube.com/watch?v=aRhhUJWHWJY