Import

How to install the TeleportHQ Figma plugin

September 15, 2026
How to install the TeleportHQ Figma plugin

The TeleportHQ Figma plugin is called TeleportHQ - Design to Code. Install it from its page in the Figma Community, then open any Figma design file and run it from the plugins menu. The plugin sends your Figma frames to TeleportHQ as a new project, or copies them so you can paste them into an existing project.

Before you start

  • You need a Figma account and a TeleportHQ account.
  • The plugin is free to install. Creating a project from Figma counts toward your TeleportHQ workspace's project limit (a trial workspace can have 1 project). See How many projects can I have?
  • The plugin works in the Figma design editor and in Figma Dev Mode.

Steps

1. Open the plugin page

Use any of these:

  • From the Create Project panel: on the TeleportHQ dashboard, click + New Project. At the top right of the panel, click the Import from Figma card ("Get our Figma Plugin to import your designs"). The plugin page opens in a new tab.
The top of the TeleportHQ Create Project panel with the Import from Figma card highlighted
  • From the dashboard sidebar: in the left sidebar of the dashboard, under RESOURCES, click Figma Plugin. If the list is closed, click RESOURCES first.
The RESOURCES list in the TeleportHQ dashboard sidebar with Figma Plugin highlighted

2. Install it in Figma

  1. On the Figma Community plugin page, check that the name is TeleportHQ - Design to Code.
  2. Click the page's main button to open or save the plugin in your Figma account. Figma changes this button's label from time to time.
  3. If Figma asks, sign in to your Figma account.

3. Run the plugin

  1. In Figma, open the design file you want to export.
  2. Select a frame, for example your homepage frame.
  3. Open the plugins menu. For example, right-click the selection, point to Plugins, and click TeleportHQ - Design to Code. You can also search for the plugin name in Figma's Actions menu.

The plugin window opens on the Layers tab, which lists the frames you selected.

Check that it worked

The plugin window shows your selected frames in the Layers tab, with the buttons Copy Objects to Clipboard and Export as a new project at the bottom. If nothing is selected, it says: "Select one or multiple object to get started."

Next, follow How to turn a Figma design into a website.

Troubleshooting

The plugin doesn't appear in my plugins list Check that you're signed in to the same Figma account you used on the plugin page, and search for "TeleportHQ" in Figma's plugins menu. If you use Figma in a browser, reload the tab.

The Import from Figma card opens a Figma page but nothing is installed The card only opens the plugin's Figma Community page. Install or open the plugin from there (step 2).

I need help with the plugin At the bottom of the plugin window, click Help & Support to join TeleportHQ's Discord community.

Good to know

  • The plugin's settings (the gear icon in the plugin window) let you set naming rules for buttons, inputs and SVGs. See How to turn a Figma design into a website.
  • The plugin version shows at the bottom of its settings tab, as "Plugin <version> · build <time>".
Share

Related Articles

How to turn a Figma design into a website

In Figma, select your frames, run the TeleportHQ - Design to Code plugin and click Export as a new project to open them as a new TeleportHQ project, or click Copy Objects to Clipboard and paste into an existing project; use auto layout for the best result.

How to create a new project (AI, template or blank)

In TeleportHQ, click + New Project on your dashboard and pick E-commerce, Web App, Bookings, Presentation Website or Blank project; every card except Blank project then lets you generate the project with AI or start from a template, and the new project opens right away.

How to import HTML and CSS code

In the TeleportHQ editor, click Import HTML / CSS / JS in the bottom toolbar (or paste HTML onto the canvas), paste plain HTML with its CSS in the HTML Import window and click Save; TeleportHQ turns it into editable elements and classes.

A tour of the TeleportHQ dashboard

The TeleportHQ dashboard is the home screen after you sign in, with your workspaces and resources in the left sidebar, and the selected workspace's plan, AI token balance, + New Project button, folders and project cards on the right, plus tools to search, sort, filter and tag projects.