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.

How to prepare your Figma Project

Rename components

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".

Use Frames and Groups

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".

Status bar and home indicator

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.

Group vectors

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.

Alignments

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

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.

Delete unnecessary components

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.

Color Fill properties

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.

Avoid components out of screens

Please, do not use components or images which is using spaces outside of screens. Example:

Let only one page on the Figma project

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.