Horizontal & Vertical Layouts

Horizontal and vertical layouts from Figma are imported with ease.

While importing layouts, Unity built in Layout Groups are used.

Auto Horizontal Layout & Horizontal Layout Group

Auto Horizontal Layout (Figma)

Horizontal Layout Group (Unity)

Auto horizontal layouts are imported to Unity using built in Horizontal Layout Group. Desired & designed behavior of the auto layout in Figma is copied to Unity Horizontal Layout Group.

Child of Horizontal Layout Group

Children of auto layout frame in Figma are imported with Layout Element component to Unity.

Figma Auto Horizontal Layout Constraints

Unity implementation of Layout Constraint "Hug"

Nodes with auto layouts in Figma may have "Hug", and child of a auto layout node may have "Fill" constraint. These behaviors are copied in Unity using "Content Size Fitter" for nodes with "Hug" constraint for example.

Auto Vertical Layout & Vertical Layout Group

Vertical Layouts are imported the same way as Horizontal Layouts the only difference is that Vertical Layout Groups are used instead of Horizontal Layout Group.

Limitations

"Wrap" mode on Auto Layouts and "Space Between" layout constraint on Auto Layouts in Figma are not yet implemented in Figma Importer.