> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/figma.md).

# Figma Integration

## Importing a Figma File

You can import a Figma file into your Thunkable project. 

Click on the Assets tab and click the + icon next to the text **Figma Files**.

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-McsDolFcoXJCazY1cLF%2F-McsE3__Ml8vvtc-1LGX%2FScreen%20Shot%202021-06-23%20at%2010.38.24%20AM.png?alt=media\&token=c9b815a4-adb0-4a3a-bb11-798207fda511)

You will be asked to Authenticate with your Figma account. You will only need to do this once.

Paste in the URL of your Figma Project and select a Page in the dropdown menu. 

{% hint style="info" %}
At the moment, we are only supporting imports for mobile designs at 375x667 px in portrait mode. 
{% endhint %}

The Figma importer will add all Artboards in a single page, so we recommend creating a designated Page in Figma with the Artboards you intend on importing.  

![Remember to select the Page you want to import](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Mctn0fJBNBUFGLjDRAc%2F-McttWNrFcsK0I04ypgF%2Ffigma-importmodal.png?alt=media\&token=16f7e62e-351b-4753-9535-55666ab47050)

### What gets imported?

Thunkable imports your Figma files in a way that best preserves your original designs. 

Shapes such as rectangle or a circle will be imported as a shape. \
You can continue to edit its style within Thunkable. \
Images and text will be imported as a png and saved like a normal [asset](/~/changes/wHhkjLVeheBnfbpghRnw/assets.md) that has been uploaded to Thunkable. \
We have done this intentionally to preserve the original font styles. \
If you want text to be editable, we recommend you replace that image with a Thunkable [label](/~/changes/wHhkjLVeheBnfbpghRnw/label.md). 

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FELEN5wKBb0izcsTT2RHY%2Ffigma%20main%20screen.png?alt=media\&token=189d92f1-7a04-4493-b409-5e6e391e046b)

## Supported Objects

The following Figma objects are supported by the integration: 

* Canvas
* Component
* Ellipse
* Frame
* Group
* Instance
* Line
* Rectangle
* Text
* Vector

## Updating a file

As you change and update your original designs, keep Thunkable up to date by re-syncing a Screen.

Find your imported Screen name in the Design tab and click the 🔄 icon.

{% hint style="info" %}
There might be a few differences with your Figma file and the output in Thunkable. Re-syncing your Screen with Figma may improve your imported Screen's appearance!
{% endhint %}

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fn9LqBPRY3ORRp8lzR8QC%2Ffigma_refresh.png?alt=media\&token=b6c380df-66be-4055-8200-3cf679a110c4)

## Blocks

All imported Figma items will have some standard blocks. 

You can use these imported components as a button by adding a `Click` block. You can also choose to change its background color, or add text or a picture, among other actions.

![ ](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FJUTiXmzr5yWSGCripzvq%2Ffigma%20component%20blocks.png?alt=media\&token=5be63bb8-52f4-48fe-bbb5-55ceacf4ef6e)