> For the complete documentation index, see [llms.txt](https://da-assets.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://da-assets.gitbook.io/docs/fcu-for-designers/layout-rules.md).

# Layout rules

{% hint style="info" %}
The first 2 points are mandatory.

In most cases, you don't need to make any other changes to your layout before importing to achieve a correct result.
{% endhint %}

{% stepper %}
{% step %}
Disable "**Clip Content**" on frames before importing.
{% endstep %}

{% step %}
If you want to import section content, you need to convert them into frames:

1. Right-click on the section.
2. In the context menu that appears, select **"Convert to Frame"**.

<div align="left"><figure><img src="/files/BcSdEpickYandPxuISkO" alt="" width="327"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
If you wanted a certain component to be imported as a single image, and this did not happen by default, see the "[**Image Merging**](/docs/image-merging.md)" section.
{% endstep %}

{% step %}
If you want the components within your component to not be merged into a single image,\
see the "[**Image Splitting**](/docs/image-splitting.md)" section.
{% endstep %}

{% step %}
The text after the tag **should not** consist only of **special characters**.

<figure><img src="/files/NsViEr9ovCMVqjB5MJFR" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Rules for parent components that contain child text components or any other elements that prevent the parent from being merged into a single PNG image:
&#x20;

* Do not place **Effects** and **Image-Fill** on parent components.
&#x20;
* If you are using **UI.Image** or **SpriteRenderer**, do not place **Gradients** on parent components.
* If you are using **SpriteRenderer**, do not add corner rounding to parent components.\
  If you violate these conditions, the fills and effects of such parent components will not be imported.
 To resolve this, move those fills and effects into a separate child component.
  {% endstep %}

{% step %}
Unity offers various tools to replicate Figma's graphical capabilities, such as procedural images with support for gradients and outlines. Please review "[**Compatibility Table for Figma Components with Unity Components**](https://www.figma.com/board/doM1KFgNleD8F4EobPkmV1/Compatibility-Table-for-Figma-Components-with-Unity-Components?node-id=0-1\&t=AfvEoIcfjIHBi1eZ-0)" to better understand how your imported design will look.
{% endstep %}

{% step %}
Please review the "[**Example templates**](https://www.figma.com/design/QRYCs4gMgj7f6KCWegNs9B)" to understand what to focus on when designing layouts in Figma for import.
{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://da-assets.gitbook.io/docs/fcu-for-designers/layout-rules.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.