# Auto layout

Our converter works best with Figma elements that use Auto Layout.

Fixed layout elements will also convert, but they’ll remain fixed in Bubble — meaning they won’t automatically adjust for responsiveness.

## Conversion accuracy indicator

The Figma to Bubble converter plugin gives you four key metrics to help you understand the quality of the conversion before you paste anything into Bubble:

* **Total # of nodes**\
  The number of Figma elements (nodes) that will be converted.
* **Auto Layout**\
  The percentage of nodes within the selected design that use Auto Layout. Designs without Auto Layout are converted as fixed containers in Bubble.
* **Responsive height/width**\
  The percentage of nodes using “fill” and “hug” settings. Fixed-size nodes will be converted as fixed in Bubble.
* **Conversion score**\
  A calculated score based on the Auto Layout and Responsive height/width metrics. Scores over 60% indicate a design that’s well-suited for conversion.

<figure><img src="/files/wmjON62moUl0cctRPjyQ" alt=""><figcaption></figcaption></figure>

## Auto Layout examples

Don’t have a Figma file ready to go? No problem. We’ve put together a list of free Figma UI kits that are fully compatible with the Figma to Bubble converter plugin. We update this list regularly to help you get started.

<figure><img src="/files/lwnFZGoh2sJ74Zn5knir" alt=""><figcaption></figcaption></figure>

### Additional info on Auto Layout

Not sure whether your design uses Auto Layout? Here's one quick way to check:

✅ If the “Mobile” layer has the column layout icon in Figma, it’s using Auto Layout — and that’s exactly the kind of layer the plugin works best with.

<figure><img src="/files/Z1Oy59li65zNivD0OzB3" alt=""><figcaption></figcaption></figure>

#### Native mobile elements

Currently, some native mobile elements won't perfectly convert. Please make sure to check that all elements are working as expected.


---

# Agent Instructions: 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://manual.bubble.io/help-guides/design/importing-from-figma/auto-layout.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.