How to improve layouts in Figma

You may encounter errors when importing projects from Figma, so to prevent bugs from occurring, you need to set up the layout structure correctly.  Below we described what important settings you need to configure before uploading:

1. Properly organize layers in order to improve structuring frames in Sizze. If you put one element into another they should come in the same order in the layers panel. To add layers to this group, just drag them in and drag them out to remove layers from the group. Try to give appropriate names to the layers, as this will help you not to get confused if you have a lot of them.

2. Set constraints and auto-layouts to elements if you want them to be adapted to different screen sizes. Follow the link to learn more about auto-layouts and constraints

3. Some of Figma effects are not supported in Sizze, try to not include them into your frames. Learn more 

4. If you have tab and nav bars in your design make sure the Top and Bottom navigation menus (Tab bar and Nav bar) are in different frames.

5. Not all custom fonts can be displayed in Sizze. If your font is not loaded in Sizze, write to us at support@sizze.io or our Intercom, with a paid subscription, we will add your unique font to the database.

6. Do not add fake elements like a keyboard, because these are non-functional elements that will not work when converted to code, but will remain as pictures.

7. We recommend using simple SVGs that have one or two passes.

8. We do not recommend using the status bars as in the example below when converting to code, since they are only an emulation of the real status bar, which, when converted to code, will hide under the real status bar of the device.