In order to reduce technical debt and keep projects clean, Parabeac tries to find the optimal way to arrange Components and Frames in your project.
Below is a sample screenshot of a Flutter project
Pages are directly correlated to directories. Take the sample Figma structure below:
When parabeac generates the Flutter project, these pages will be used to organ screens or components that exist in the same page.
For this section, we'll use the following structure in Figma:
The first thing to note here is the structure of the Pages. As seen in the sample, the relevant page is Symbols
When generated, Parabeac will export the following folder structure:
As seen above, all Components will generate inside the widgets folder. Inside the widgets folder, Parabeac will generate more subfolders according to the structure of the Figma file. In this case, a single symbols folder based on the Page is generated with all the Components that exist in that page.