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
VIDEO Tutorial
To launch the plugin, Right click the selection and go to Plugins > TeleportHQ - Figma to Code.
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.
When the plugin starts your selection will already appear in the frame window.
If you are happy with your selection, you can click one of the two available options.
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.
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.
The “Copy objects to clipboard” button will generate data that will be added to 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.
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.
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.
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.
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.
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 Settings 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.
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.
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).
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.
Similarly to the general copy/paste of styles above, this button will do the exact same thing but only for the selected object's styles.
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
If you require support on using the Figma plugin please contact us on our Discord channel.
Here is a presentation video taking you through installing the plugin to using it to import your designs into TeleportHQ.
How to use the plugin
Recommendations
Naming conventions
Styles tab
Limitations
VIDEO Tutorial
How to use the plugin
To launch the plugin, Right click the selection and go to Plugins > TeleportHQ - Figma to Code.
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.
When the plugin starts your selection will already appear in the frame window.
If you are happy with your selection, you can click one of the two available options.
Export as a 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.
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 objects and paste them in an existing project
The “Copy objects to clipboard” button will generate data that will be added to 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.
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.
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.
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.
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 Settings 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.
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.
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).
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 object
Similarly to the general copy/paste of styles above, this button will do the exact same thing but only for the selected object's styles.
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.
VIDEO Tutorial
Here is a presentation video taking you through installing the plugin to using it to import your designs into TeleportHQ.
Updated on: 20/07/2023
Thank you!