---
description: Horizontal and vertical layouts from Figma are imported with ease.
---

# Horizontal & Vertical Layouts

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

### Auto Horizontal Layout & Horizontal Layout Group

<div align="center"><figure><img src="https://1621352894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbxGkHH9nbw4PqGFuLmzb%2Fuploads%2FG8WjfnRbczr4vx5bhS7w%2FEkran%20Resmi%202024-05-16%2010.34.41.png?alt=media&#x26;token=d4daad4f-bf06-4efb-83d8-0b359b844aaf" alt="" width="231"><figcaption><p>Auto Horizontal Layout (Figma)</p></figcaption></figure></div>

<figure><img src="https://1621352894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbxGkHH9nbw4PqGFuLmzb%2Fuploads%2FyAA4H11GdrW5WG64Bn4i%2FEkran%20Resmi%202024-05-16%2010.33.49.png?alt=media&#x26;token=3205f9b3-d7a1-4646-a4f4-3a8a187548b2" alt="" width="375"><figcaption><p>Horizontal Layout Group (Unity)</p></figcaption></figure>

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.&#x20;

<figure><img src="https://1621352894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbxGkHH9nbw4PqGFuLmzb%2Fuploads%2Ft5urAJS6elSxBlqgbma6%2FEkran%20Resmi%202024-05-16%2010.47.41.png?alt=media&#x26;token=2ac3541f-c235-486c-9308-7d715769aaa1" alt="" width="375"><figcaption><p>Child of Horizontal Layout Group</p></figcaption></figure>

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

<figure><img src="https://1621352894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbxGkHH9nbw4PqGFuLmzb%2Fuploads%2F6DRUJYkuA6bg9ogmDPIL%2FEkran%20Resmi%202024-05-16%2010.34.33.png?alt=media&#x26;token=b3d5d7c3-e4f2-4056-aab8-60fcd8bc1c05" alt="" width="234"><figcaption><p>Figma Auto Horizontal Layout Constraints</p></figcaption></figure>

<figure><img src="https://1621352894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbxGkHH9nbw4PqGFuLmzb%2Fuploads%2FIdAyIoGQ2Rttu5DBSveg%2FEkran%20Resmi%202024-05-16%2010.34.56.png?alt=media&#x26;token=778bf387-33a2-4e63-a314-1e5611151c78" alt="" width="375"><figcaption><p>Unity implementation of Layout Constraint "Hug"</p></figcaption></figure>

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.&#x20;

### Limitations

{% hint style="info" %}
"Wrap" mode on Auto Layouts and "Space Between" layout constraint on Auto Layouts in Figma are not yet implemented in Figma Importer.
{% endhint %}
