Using the Figma to Code plugin

TeleportHQ’s Figma to Code plugin has been designed to help you export your Figma projects directly to our editor, where you can further enhance and even deploy them as coded websites.

How to use the plugin
Recommendations
Naming conventions
Styles tab
Limitations

How to use the plugin

Start by selecting a part of your project, it can be a frame, a group, an image, a shape or even multiple elements at the same time.

To launch the plugin, Right click the selection and go to Plugins > TeleportHQ - Figma to Code.

When the plugin starts your selection will already appear in the frame window.

Plugin overview

If you are happy with your selection, you can click one of the two available options.

Export as a new project

Export as new project

The “Export as a new project” button will convert your current selection to data that our platform can read, and it will automatically open a new tab in your browser, where you can create a new project that contains the Figma export content.

New export in TeleportHQ

Please make sure you have the pop-up browser option disabled and you are not using any Adblock extension, if you are using this plugin directly in your browser.

Copy elements and paste them in an existing project

Copy elements to clipboard

The “Copy layers to clipboard” button will generate data that will be added to your clipboard.

If you see the button turned into “Layers Processed” you need to click the button again to finish the copy flow and have everything loaded in your clipboard.

The next step is to go to TeleportHQ, select and open one of your projects, and paste it where you want it.

You can paste it directly using the CTRL/CMD+V command, or you can use the contextual menu by right clicking on the canvas.

Project copied in TeleportHQ

Copy images and SVGs

You can copy an image or an SVG element directly from your design canvas and paste it into TeleportHQ.

You can do this just with copy/paste, without using the plugin.

To copy an image or SVG, make your selection, Right click it in Figma then choose the “Copy/Paste as …” option.

Finally, paste it directly in our TeleportHQ app in the container of your choice.

Copy paste as Image or SVG

Recommendations

In order to get the best out of our plugin, we have a few recommendations on how to build your Figma projects.

This will help you clean up your files and will also allow us to provide you the best copy/paste or export result to our platform and make it easier to add responsiveness to your project in TeleporthQ.

Auto layout

One of the key improvements you can make in order to get a better result from your export is to use Auto layout inside your frames. This helps keep everything clean and structured when exporting to our platform.

Auto layout simulates the behavior of the flex property of a container in HTML/CSS, and it removes the absolute positioning of the elements.

There are two ways for you to add Auto Layout.

If you already have your elements structured inside frames, you just need to select the parent frame and click the Auto layout section in the right panel in Figma.

If you don’t have a frame for your elements you can select the elements you want to encapsulate and enable Auto layout as before. This will create a frame with auto layout that has the selected elements as its children.

From here you can adjust different properties like orientation, paddings or spacing between elements.

Inside the plugin we also provide an Auto layout score for your selected elements, so you can see your progress when adjusting your design.

Auto layout in Figma

Frames vs Rectangles

To continue on the Auto layout topic, we suggest you use frames instead of rectangles when nesting elements. This will enable you to add Auto layout to the frame whereas while using rectangle you will only be able to build flat designs.

Moreover, you won’t have access to resizing properties.

Using Frames in Figma

Resizing

Another adjustment you can make after applying auto layout is using the resizing options. Instead of using fixed sizes, you can adjust your elements to fit the parent container, or if the element itself is a container, hug its children.

This improves the overall responsiveness of the result in our platform.

Testing responsiveness with Figma resize

Naming conventions

In order to improve the semantics of your exported project, we automatically convert your elements based on naming conventions. You can modify these conventions in the Config tab of the plugin to better suit your needs.

For example, by default, every element that contains Button in its name will be treated semantically as an HTML button element in our platform.

For now, the supported conventions are Buttons, Inputs and SVGs. You can also add an ‘exclude’ convention for the elements which should ignore this automatic conversion.

Naming conventions in the plugin

Styles Tab

Preview all the styles

In order to have a better overview of the tokens used in your project, we provide a list of all the styles in a similar way you can find in Figma inspector. For now, the only styles that we support are color and text.

Each of those can be either internal (created within your project) or external (imported from other projects). Moreover, if you have an element selected, the styles used in that respective element will be highlighted.

Project styles in the plugin

Copy local styles

Use this button to copy/paste the entire stylesheet from your Figma file directly into your TeleportHQ project.

This can be useful if you are changing styles attached to elements from your project and you don’t want to re-export the design but only the styles attached to your document.

Copy style from the selected element

Similarly to the general copy/paste of styles above, this button will do the exact same thing but only for the selected elements styles

Copy styles from the Figma file

Limitations

The current version of the TeleportHQ Design to Code plugin does not support the following elements:

Masks
Background blur and layer blur
Rotations
Radial gradients
Shadow tokens
Component overrides and variants
GIFs

Support

If you require support on using the Figma plugin please contact us on our Discord channel.
Was this article helpful?
Cancel
Thank you!