# 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="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2FcLg9aZVHjUslwrubtOZS%2Ffigma-design-score-bubble.png?alt=media&#x26;token=8ed90c59-0749-4bc3-8127-03485ae103c5" 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="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2FVWGKInaVrca5sGt60kXG%2Ffigma-ui-kits-bubble.png?alt=media&#x26;token=26e22b57-77eb-4661-8314-b01896e7960d" 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="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2F2oSl6mzAEqxiyDsJwABK%2Fmobile-layout-figma-bubble.png?alt=media&#x26;token=4536cb66-906b-4c10-95fb-adea7a3389b6" 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.