Figma Integration
Last updated
Was this helpful?
Drag and Drop
Last updated
Was this helpful?
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.
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.
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.
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 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.
The following Figma objects are supported by the integration:
Canvas
Component
Ellipse
Frame
Group
Instance
Line
Rectangle
Text
Vector
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.
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.
