Menu
How to properly import a file from 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.
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.
To apply vertical constraints to any layer within a frame select the top and bottom constraints.
Use bottom vertical constraints for bottom elements like tab bars.
Use top vertical constraints for nav bars.
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.
Read more about Constraints here
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:
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:
Padding controls the empty or white space between the child objects and the boundary of an auto layout frame.
You can:
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.
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.
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.
Read more about Autolayout here
Vector images (icons) 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. Don’t use nested structure in vector elements that is not perceived by the code. You can't change the color.
