Guide: How to create a popup in Figma

1️ Adding an Existing Project from SiteLeads

No authorization is required to add a project that already exists on the SiteLeads service. You can add multiple projects from one or more accounts.

1.1. In the left panel, click the “+” button next to «Projects».

1.2. A project addition form will open. In the first field (under the label “Enter number of project in service”), enter the project ID from SiteLeads. You can find the project ID on the project page in the right column, next to the project name.

1.3. In the service, on the project page, a “Connect to Figma” block will appear in the right column. Click “Confirm”. If the block does not appear, refresh the page in your browser.

1.4 In the plugin, click on the project name, and then press the «Check status» button.

2️ Creating a New Project with a New Account

2.1. Sign in to the service. Click the “Get Started” button at the end of the welcome text in the center of the plugin.

2.2. A browser tab will open asking for account confirmation. Click “Allow access”.

2.3. After confirmation, you’ll see a message: “Authorization successful! You can now close this tab and return to Figma.” Close the tab and return to Figma.

A new SiteLeads account will be created. You can log into this account later using the “Sign with Figma” button.

2.4. The page in the plugin should update automatically. If it does not, click the «Check status» or «Reload plugin» button.

2.5. The page will refresh and the text will change. You can now add your own project by entering your website URL at the bottom.

2.6. You can also add a project by clicking the «+» button next to “Projects” in the left panel. After authorization, you’ll see a second section in the add project window, where you can enter a website URL and click “Create”.

2.7. Click any project name to see its info block and the list of widgets. This will appear in the same panel below the project list.

2.8. Above the widget list, there is a “Embed code for website” section. Click it to reveal the project code — copy and paste it into your website.

3️ Exporting from Figma to Website Popups

3.1. In the Figma workspace, select the design you want to turn into a popup. The top-level element must be a Frame, Group, or Component.

3.2. In the plugin, click “Save as new”. Make sure the right project is active.

3.3. After export is finished, the widget preview will appear in the center of the plugin, and a right panel will open with popup settings and “Start” / “Stop” buttons.

Adjust the settings (popup type, display conditions, etc.) and click “Save settings” to save them.

3.4. The widget name will appear in the left panel. Click it to load the HTML preview in the center. Two buttons will appear above the preview:

• “Save for website” — saves the Figma design from the workspace to this widget.
• “Edit in Figma” — loads the saved widget back into the Figma workspace for editing.

3.5. To activate the popup, click the Play button (triangle) in the top-right panel.

4️ Payment

4.1. After authorization, a “Renew” button appears at the bottom of the plugin. Click it to choose between monthly or yearly subscription.

4.2. After selecting a plan, a browser tab will open with the payment page. The payments are handled through Paddle.

4.3. After a successful payment, the page will show: “Payment completed. You can close this tab and return to Figma.” Close the tab and return to Figma.

4.4. In the plugin, if the “Processing your payment” modal is still visible, click “I’ve paid. Check status”. The data will update, and the new payment expiry date will appear at the bottom of the plugin.