Menu
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:
Constraints tell Figma and Sizze how layers should react when their frames are resized. This will help you control how projects look on screens of different sizes and on different devices.
You can apply constraints along both the x (horizontal) and y (vertical) axis.
Use horizontal constraints on the right and left to make the content stretch to the full width of the screen.
Pic
To apply vertical constraints to any layer within a frame select the top and bottom constraints.
Pic
Use bottom vertical constraints for bottom elements like tab bars.
Pic
Use top vertical constraints for nav bars.
Pic
There are other options of constraint settings available in Figma:
Center maintains the layer’s position, relative to the horizontal or vertical center of the frame.
Scale will define the layer’s size and position as a percentage of the frame's dimensions. It will then maintain those proportions as you resize it.
To make the elements flexible you need to select them one by one, click on constraints which you can find on the right sidebar in Figma and choose the desired settings. It will ensure that the elements on the frame adapt when the screen is resized. After that you can see how the component adapts to the frame size when stretched.
Auto Layout is Figma's feature for creating components and frames that adapt their size to the content inside them. It allows you to create designs that grow to fill or shrink to fit, and reflow as their contents change.
You can add auto layout to a selected frame, component, or component set from a few places:
Use the keyboard shortcut Shift A.
In the right sidebar, click the next to Auto layout with a frame selected.
Right-click on the frame or object and select Add Auto layout.
Spacing between items
You can control the spacing between items in an auto layout frame.
Unlike smart selection, there isn't a way to adjust the spacing on the canvas. Instead, use the spacing fields in the Auto layout section of the right sidebar:
Enter a number in the field, nudge the values using your arrow keys, or scrub the field using your cursor.
Gif
Padding
Padding controls the empty or white space between the child objects and boundary of an auto layout frame. You can set padding uniformly, or have different values for top, right, bottom, and left padding.
Gif
Alignment
Choose how to align child objects within an auto layout frame. Use the interactive grid to select from nine layout options for the children in a frame.
Gif
Distribution
Once you've set alignment rules for child objects in a frame, choose how those objects will be distributed within that frame.
Packed: Objects in a frame will be grouped together. Use this option to keep objects in a frame as close as possible and aligned together.
Space between: Objects in a frame have the space between them equally distributed along the direction and alignment set for the frame. Use this option to stretch objects across a frame.
Resizing
One of the most powerful functions of auto layout is its ability to control the dimensions of the objects in an Auto layout frame. Set resizing behavior for parent auto layout frames to adapt to any changes made to their children objects.
Fixed width or height: When an auto layout frame is set to Fixed width or height, the values of the frame's dimensions remain the same regardless of the content within them.
Hug content: Set an auto layout frame to Hug content to resize itself according to its child objects. The frame will keep the smallest possible dimensions to surround the objects within it, while respecting the padding value.
Fill container: Objects in an auto layout frame set to Fill container stretch to the width and/or height of their parent frame.
Vector images are one of the most important parts of interface design. It is very important that you prepare all of these elements before uploading. They should be combined into one path each icon as much as possible.
Use layer blending for vector elements
Pic
Don’t use nested structure in vector elements that is not perceived by the code. You can't change the color
Pic
- Firstly, you need to make sure that your layouts don't contain complicated Figma effects in your layout like Blur, Gradient, lots of Shadows (Sizze supports only one shadow per element), we recommend to use simple SVGs that have one or two passes.
- Make sure the Top and Bottom navigation menus (Tab bar and Nav bar) are in different frames.
- In order for functional methods such as text field, tab bar and nav bar to work, use a ready-made set of presets. To do this, replace the downloaded elements from Figma after import, such as bars, buttons etc., with ready-made presets that you can later customize for yourself.
- 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.
- 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.
Pic
- 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.
These were the methods for eliminating the most common mistakes when importing a project from Figma to Sizze. If you didn’t find a solution to your problem in this article, please don’t hesitate to write to us, our technical team is always ready to help you!
