How to turn a Figma design into a website

To turn a Figma design into a TeleportHQ website, select your frames in Figma, run the TeleportHQ - Design to Code plugin, and click Export as a new project. TeleportHQ opens in your browser with a new, editable project you can style, make responsive and publish. To add a design to a project you already have, click Copy Objects to Clipboard in the plugin and paste into the TeleportHQ editor.

Before you start#

• Install the plugin. See How to install the TeleportHQ Figma plugin.
• Sign in to TeleportHQ in the same browser you'll use for the import.
• Export as a new project creates a project, so your workspace needs room for one more. A trial workspace can have 1 project. See How many projects can I have?
• For the best result, build your Figma frames with auto layout (see "Get the best result" below).
• Allow pop-ups from Figma in your browser. The plugin opens TeleportHQ in a new tab after it uploads your design, and a browser can block a tab that opens that late.

Steps#

1. Select your design and open the plugin#

1. In Figma, open your design file.
2. Select one or more frames, for example the frame for your homepage. You can also select groups, components, shapes, text or images.
3. Right-click the selection, point to Plugins, and click TeleportHQ - Design to Code.

The plugin opens on the Layers tab and lists the frames you selected, each with an auto layout rating. If nothing is selected, it says: "Select one or multiple object to get started. Optimal outcomes can be achieved by choosing a design in a step-by-step manner, section by section."

2a. Export as a new TeleportHQ project#

1. In the plugin, click Export as a new project. The plugin shows "Analysing frames", then "Copying... n/total elements".
2. When it's done, the plugin says "You will now be redirected to our platform." and TeleportHQ opens in a new browser tab.
3. In TeleportHQ, one of these happens:
   • If exactly one of your workspaces has room for a project, TeleportHQ creates the project there and opens it in the editor.
   • If several workspaces have room, the window Save imported project to your workspaces opens. Choose a workspace in Select workspace and click Save project.

The project is named after your Figma file. If that name can't be used, it's called New Project. A number is added if the name is already taken.

If you're new to TeleportHQ, the welcome questions are skipped this first time and appear on your next visit.

2b. Copy into an existing TeleportHQ project#

1. In the plugin, click Copy Objects to Clipboard. The plugin shows "Please wait while your elements are being copied", then "All elements were successfully copied!"
2. In the TeleportHQ editor, open the page you want.
3. Click the page, or the container the design should go into.
4. Press Ctrl+V (Windows) or Cmd+V (Mac). With images, you see "Import in progress..." while they upload.
5. If the design's class, color or text style names clash with ones already in your project, the window We have detected some design language conflicts opens. For each item, choose to keep the original, create a new one, or replace the original, then click Submit.

3. Copy your Figma colors and text styles (optional)#

1. In the plugin, click the Styles tab. It lists the color and text styles in your file, including styles from external libraries used by your selection.
2. Click one of these:
   • Copy Local Styles: copies all the color and text styles of the Figma file.
   • Copy Styles from the selected object: copies only the styles used by your selection.
3. The plugin says "All styles were successfully copied!"
4. In the TeleportHQ editor, click the page on the canvas.
5. Press Ctrl+V (Windows) or Cmd+V (Mac). Nothing new appears on the page: the colors and text styles are added to your project's saved colors and text styles. If a name clashes with one already in the project, the window We have detected some design language conflicts opens first.

This helps when you change styles in Figma and want to update them in TeleportHQ without exporting the whole design again. See What is the Design Language panel?

Check that it worked#

• New project: the TeleportHQ editor opens with one page per exported frame (frames with the same page name become one page), and the layers, text and images from Figma.
• Pasted design: the elements appear on the canvas where you pasted them.

Check each page at tablet and mobile sizes in the editor and adjust the layout where needed. See How to make your site look good on phones and tablets.

Get the best result#

Auto layout#

The plugin rates how well each selected frame uses Figma's auto layout:

• Excellent: "Auto layout frame improves the quality of the exported code."
• Fair or Bad: "<Rating> Auto layout rating. The expected result may differ from Figma design."

Auto layout works like rows and columns on a web page, so frames that use it export as flexible layouts instead of fixed positions. To add it in Figma, select a frame, or select several elements to wrap them in a new frame, and turn on Auto layout in Figma's right panel. Then set direction, padding and spacing.

• Use frames, not rectangles, to group elements. Only frames can use auto layout.
• Use Fill and Hug sizing instead of fixed widths and heights where you can, so elements resize with the screen.
• Export section by section for large designs. Selecting more than 8,000 elements shows "There are more than 8,000 elements selected, so copying might be time-consuming. We suggest a section-by-section approach".
• Flatten icons. A selection with more than 100 vector layers still exports, but the result is heavier; the plugin suggests "flattening icons into single vectors helps."

Naming conventions#

The plugin can turn Figma layers into real web elements based on their names. Open the plugin's settings (the gear icon):

• Tokens: "Match tokens to Figma frame names to automatically convert frames to TeleportHQ elements." By default, a layer whose name contains button becomes a button, input becomes a text input field, and svg becomes an SVG image. You can add your own words for each.
• Exclude Tokens: "Prevents the conversion of Figma frames into TeleportHQ elements." By default, the word is thqExclude. Add it to a layer name to keep that layer from being converted.
• Preferences → Ignore rich text elements: turn on to export each text layer as plain text in one style. Words in another color, weight or size, and links inside a text, are then not kept.

Mobile and tablet frames#

If you design the same page at several widths, give the frames the same name followed by a device word or a width, for example Home - Desktop, Home - Tablet and Home - Mobile, or Home (1440) and Home (390). Select them together and export. The widest frame becomes the page. Each narrower frame becomes that page's styles at the smallest TeleportHQ breakpoint that is at least as wide as the frame: 479 for frames up to 479 pixels wide, 767 for 480 to 767, 991 for 768 to 991, then 1200, 1600 and 1920. Each breakpoint takes one frame; a frame that fits none is exported as a page of its own and listed in the export warnings. New projects use 991, 767 and 479 as their responsive breakpoints, so draw tablet frames 768 to 991 pixels wide and phone frames 479 pixels or narrower. Layers are matched level by level by name and kind (container, image or text), in order, so keep the same structure and layer names in each frame; text layers are matched by their order. Only style differences carry over: text, images and links come from the widest frame. A layer that exists only in a narrower frame appears only at that breakpoint, and a layer missing from it is hidden there.

Troubleshooting#

TeleportHQ says it could not create the project TeleportHQ opened, but couldn't create the project from the export, and an error asks you to try again. Run Export as a new project again. If it keeps failing, export a smaller part of the design.

"The project could not be uploaded to TeleportHQ. Check your connection and try again." The plugin couldn't send your design to TeleportHQ, so no tab opened. Check your internet connection and click Export as a new project again.

"Projects limit reached" "All your existing workspaces have reached the projects limit." Delete a project you don't need, upgrade a workspace, or use Copy Objects to Clipboard to paste the design into an existing project.

The plugin says "The export went through. A few things could not be converted" The export worked, but some layers were left out. The window lists them; click a name to find the layer in Figma. It may also list Frames exported as separate pages (frames whose width matches a breakpoint another frame already used) or say The project may not open cleanly. Simplify or rename those layers and export again.

"There has been a problem when exporting the nodes." The export failed. The message names the Affected frames. Click the frame name to find it in Figma, simplify it, and try again.

A frame shows "Unsupported" That layer type can't be exported, and the plugin says "Exporter does not support <type>, selected frame will not be exported". Select a frame, group or component instead.

The new tab didn't open Your browser may have blocked it: the plugin opens the tab only after the upload ends. Allow pop-ups for Figma, then click Export as a new project again.

The result looks different from Figma Check the auto layout rating and improve the frames rated Fair or Bad: frames without auto layout keep fixed positions. Shadows, layer and background blur, all gradient types, rotation and rectangle masks are converted. A component with variants exports all its variants stacked one under the other, not as one switchable component: select the variant you need instead.

I copied images or SVG icons from Figma without the plugin You can also copy a single image or SVG in Figma (right-click → Copy/Paste as → Copy as SVG or Copy as PNG) and paste it into a container in TeleportHQ. SVG code is added as an image.

Good to know#

• Exporting from Figma doesn't change your Figma file.
• Need help? In the plugin window, click Help & Support to join TeleportHQ's Discord community.