Good practices on Figma to get a better result
FlutterVision uses Computer Vision to understand a Figma Project and convert it into an application. That's why paying attention to some details on Figma is so important.
Last updated
FlutterVision uses Computer Vision to understand a Figma Project and convert it into an application. That's why paying attention to some details on Figma is so important.
Last updated
Choosing the best names to components (e.g. Frames, Buttons, etc.) can help you to get a better organization in your project. FlutterVision will import all names, in this way it will be easier to identify and make changes in those components. You can also use the component type in the name, like "Login_Button", "Services_Frame" and "Email_Edit".
Boxes into boxes: this is how we build applications. So, when preparing your Figma project, it's important to create frames (this one is the best way) and groups to get a great "application tree".
Since it's not necessary to code the status bar and the home indicator, this is not necessary on the Figma project. If it does, you can delete it before going to FlutterVision.
If you are working with a lot of vectors that compose the same image, remember to group it. In this way, FlutterVision will identify it as one component.
Figma has a lot of options in terms of Alignments. If you are building a mobile application, it's important to review each frame's alignments, from parents to children. Access the "Auto Layout" properties to analyze the alignments, those will be imported as Stack Layout on FlutterVision. When there isn't Auto Layout, our tool will understand it as Relative Layout.
TIP: you can check the page behavior by resizing it. Figma will automatically update the component's sizes to adapt them to the screen.
Constraints and Resizing are also important when we are considering the user experience. So, it's important to check the selected options to ensure that the frames are having the expected behavior. Choose between Fill, Fixed, and Hug Contents.
TIP: you can check the page behavior by resizing it. Figma will automatically update the component's sizes to adapt them to the screen.
You can use the navigation flow from Figma to import it to FlutterVision. In this way, navigation between screens will be already setted up.
When we are creating Figma projects, it is common to add some components, like frames, that we don't need. So, remember to delete those components. If you see a lot of strange boxes on Flutter Vision, there is a huge chance there will be an unnecessary components problem. Also, avoid using Invisible components.
Check each component color fill property. Remember that screens have their own color and layers can have different ones. You can also use the transparency option.
Please, do not use components or images which is using spaces outside of screens. Example:
Avoid having more than one page on the Figma project. You may have only the page with the screens. At this same page, you can set up the navigation between the screens (on Figma this feature is called as Prototype).
Remeber, one Figma page. Not screens.
The line should have at least 1 px. If you use a line with height = 0, tha AI will not be able to import the project.
