Figma Integration

Overview

Thunkable's Figma integration streamlines the design-to-development process, allowing you to easily translate your Figma prototypes into functional and interactive mobile apps using Thunkable's low-code platform.

Video Tutorials

Import a Design from Figma to Thunkable

Import a Figma File

To import a Figma file into your Thunkable project:

1. Click the Assets icon in the left sidebar.

2. Click the + icon next to Figma Files.
3. Authentication with your Figma account. You will only need to do this once.

4. Paste your Figma Project's URL into the provided field.

5. Select the appropriate page from the dropdown menu.

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

Only imports for mobile designs at 375 x 667 px in portrait mode are supported.

Imported Formats

Imported Figma objects can be converted to the following Thunkable components:

• Animation

• Map

• PDF Reader

• Data Input

• Video

• Web Viewer

Figma Shapes

Shapes such as rectangles or circles are imported as a shape. You can continue to edit their style within Thunkable.

Figma Images

Figma images are imported as an SVG and saved as an asset uploaded to Thunkable.

Figma Text

Figma text fields are imported as an SVG and saved as an asset uploaded to Thunkable. This is intentional to preserve the original font styles. If you want the text to be editable, replace the image of the text with a Thunkable label component.

You must replace the imported SVG with a Thunkable component to edit designs or use other components.

Supported Objects

The integration supports the following Figma objects:

• Canvas

• Component

• Ellipse

• Frame

• Group

• Instance

• Line

• Rectangle

• Text

• Vector

Update a Design

To update your Thunkable project with changes made to your Figma project:

1. Locate the screen in your project's component library.

2. Click the refresh icon next to the screen's name.

If there are differences between your Figma file and the output in Thunkable, try re-syncing the screen.

Figma Import Blocks

Imported Figma items have standard blocks. You can use these imported components as a button by adding a "when [item] click" block. You can also change its background color or add text or a picture, among other actions.