Back

Import standarts

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 

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


Autolayout 

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:

  1. Use the keyboard shortcut Shift A.
  2. In the right sidebar, click the  next to Auto layout with a frame selected.

  1. 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:

  1. Enter a number in the field
  2. Nudge the values using your arrow keys.If you hold down shift, the step will be 10 pixels.

  1. Scrub the field using your cursor.

Padding

Padding controls the empty or white space between the child objects and the boundary of an auto layout frame.

You can:

  1. Set the same margins on the right&left and up&down
  2. Choose your own indentation for each side from above and below

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.

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. 

Read more about Autolayout here


Images 

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.

Additional Recommendations

Do you still have questions?

Our team is more than happy to help you sort out or solve the problem you're having.
Request