This document provides a collection of tips and solutions to help you integrate with Builder effectively. It covers common scenarios such as resolving API key mismatches, fixing model name discrepancies, and enabling data-bindings in Node environments.
If you get a message in the Visual Editor that there's an API Key mismatch, it means that Builder and your codebase are using different API keys.
To confirm that you're using the correct Public API Key, check that the Public API Key in your codebase and the Public API Key in Builder are the same.
- In Builder, press
Cmd/Ctrl + kto open the Command Palette. - Search for "API" and select your API Key to copy it.
- Paste the Public API Key into the dialogue in the Figma Plugin.
- In your code, copy the Public API Key and paste it into the dialogue.
- Click the Refresh button.
If you get a message in the Visual Editor that there's a model name mismatch, it means that the Builder model name and the code component name in your codebase aren't the same.
To confirm that you're using the correct model names, provide them to the Figma Plugin dialogue.
- In Builder, go to Models.
- Open the model in question and go to Advanced.
- Copy the Unique Identifier and paste it in the Builder Figma Plugin dialogue.
- Go to the component in your codebase, copy its name, and paste it in the dialogue.
- Click the Refresh button.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button in the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
In certain Node server environments, the builder SDK may require additional initialization steps, namely the initialization of a package called isolated-vm (used to safely evaluate your data bindings).
