> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/help-guides/design/importing-from-figma.md).

# Importing from Figma

{% hint style="info" %}
This tool and article are not affiliated with, endorsed by, or sponsored by Figma.
{% endhint %}

If you've already got a design mapped out in Figma, or a designer has handed you one, you don't need to rebuild it from scratch. Bubble's free Figma converter turns your Figma design into responsive, pixel-accurate Bubble elements in a few clicks.

## What is Figma?

Figma is a browser-based design tool that teams use to design and prototype websites, apps, and other digital products. Unlike traditional design software, it runs entirely in the browser, so there's nothing to install and your work saves automatically as you go.

What makes Figma popular is that several people can work on the same design file at the same time, seeing each other's changes live, similar to how Google Docs works for documents. Designers use it to lay out screens, define colors and fonts, build reusable components, and create clickable prototypes that simulate how an app should feel before a single piece of it gets built.

If you work with a professional designer or a design agency, there's a good chance you'll receive a Figma file, or a link to one, as part of the deliverable. It's become the standard hand-off format between designers and developers.

## Why design in Figma first?

You don't need Figma to build in Bubble. Plenty of builders design directly in the Bubble editor. But there are a few reasons some people prefer to design their app in Figma before bringing it into Bubble:

* **A dedicated design tool.** Figma is built entirely around visual design, with tools for precise spacing, typography, color systems, and reusable components that go beyond what's practical in an app editor.
* **Easier collaboration with designers.** If you're working with a designer who isn't building the app themselves, Figma gives you a shared space to review, comment on, and refine the design before any of it becomes a working app.
* **Faster iteration on visuals.** Since Figma doesn't involve workflows, data, or logic, it can be quicker to try out different visual directions before you commit to building them.
* **A common starting point.** Many free and paid Figma UI kits and templates exist, giving you a professional-looking starting point for your design.

Once your design is ready, the converter is what turns that Figma file into real, working Bubble elements, so you don't have to manually recreate the layout, spacing, and styling by hand.

## How the converter works

Getting a design from Figma into Bubble involves two tools working together:

* A **Figma plugin**, which you use inside Figma to select and prepare the design you want to convert.
* A **Chrome extension**, which you use inside the Bubble editor to paste that design onto your page.

Bubble supports Figma files with up to 1,000 elements. For the best results, use designs built with [Auto Layout](#user-content-fn-1)[^1], Figma's system for automatically adjusting spacing, alignment, and sizing. Fixed layout designs still convert, but the plugin translates them as best it can based on the properties Figma provides.

{% hint style="warning" %}
Figma doesn't have element definitions for buttons, inputs, multiline inputs, or dropdowns. You'll need to convert these separately using the *Buttons/input* tab, covered below.
{% endhint %}

## Installing the plugin and extension

You'll need both the Figma plugin and the Chrome extension installed before you can convert a design.

{% stepper %}
{% step %}

#### Install the Figma plugin

Open the [Figma plugin page](https://www.figma.com/community/plugin/1319011724054438539/figma-to-bubble-io-converter) and install it. Once installed, you can access it from Figma's *Dev Mode*, under the *Plugins* tab.
{% endstep %}

{% step %}

#### Install the Chrome extension

Download the [Chrome extension](https://chromewebstore.google.com/detail/deezign/mbofgadpoeclogccaclfpdpnclommnmi?hl=en-US\&utm_source=ext_sidebar\&pli=1). Once it's installed, you'll be able to launch it directly inside any Bubble editor.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
The Chrome extension only works inside the Bubble editor. We recommend [pinning it](https://support.google.com/chrome/a/answer/11190170?hl=en) to your browser toolbar so it's easy to reach.
{% endhint %}

## Converting and importing a design

Once both tools are installed, here's how to get a design from Figma into your Bubble app.

{% stepper %}
{% step %}

#### Get your access token

Go to [bubble.io/figma-to-bubble](http://bubble.io/figma-to-bubble) to generate your access token. You'll need this to connect the Figma plugin to your Bubble account.
{% endstep %}

{% step %}

#### Paste your token into the plugin

Open the Figma plugin from *Dev mode* and paste in your token. You're now ready to start converting.
{% endstep %}

{% step %}

#### Select and convert your design

In Figma, click the element you want to convert, then hit **Convert** in the plugin.
{% endstep %}

{% step %}

#### Paste it into your Bubble editor

Head to your Bubble editor and open the Chrome extension. Select the element you just converted, and paste it directly onto your page.
{% endstep %}
{% endstepper %}

That's it. Your design lands in Bubble as real, editable elements, ready for you to add workflows, connect data, and make it functional.

## Getting the best results

A few things to keep in mind as you prepare your Figma design for conversion:

* **Use Auto Layout wherever you can.** Since it follows the same layout logic as Bubble's own responsive engine, designs built with Auto Layout convert far more accurately than fixed layout designs.
* **Convert buttons and inputs separately.** Since these elements don't have a direct equivalent in Figma, use the *Buttons/input* tab in the plugin to map them correctly.
* **Expect some manual cleanup.** Even a well-prepared design may need a little adjustment once it lands in Bubble, especially around spacing, fonts, or elements the converter couldn't map automatically.

[^1]: Auto Layout in Figma lets you build designs that adjust spacing, alignment, and sizing automatically, making them flexible and responsive.

    It follows the same layout logic as Bubble's responsive engine, which leads to the best conversion results.

    Article: [Figma Auto Layout](broken://pages/WOd3Ef7Yy6xHQurldiho)