Question 1

How to import your designs from Figma using our plugin

Accepted Answer

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

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 have 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 Telepor

Question 2

How to download your project

Accepted Answer

Now that you visually built a project let's see the code behind it and learn how to export it.

View code
Export code

1. View code

While building your project you can check the Code Panel that is populated behind the scenes with the generated code based on the changes you are doing in stage. To do that, go in the top right side of the Teleport and press on the Code button. This will open a modal for code, publish and download.

By default, the generators are set to display our UIDL in React.js format. The UIDL (User Interface Definition Language) is the backbone of our generators.

You can change the format of the code into many flavors of JavaScript such as:

| | | | | | | ---- | | React | Vue | Angular | HTML&CSS | UIDL |

Along with that there are multiple ways to structure the CSS of a project that you can choose from as well. The CSS formats that we support are:

| | | | | | ---- | | Inline Styles | Plain CSS | Styled JSX | CSS Modules | | Styled Components | React JSS | | |

What you have selected as a page or component will be shown in code format in the Code Panel. You can also quickly copy the code and use it somewhere else.

2. Export Code

To export the code:

Cllick on the Code button on the Top Bar
Go to the Download tab.
Select the format
Click Download

Exporting the code that is automatically generated is easy and it comes with a lot of options.

Question 3

How to make a fixed header when scrolling?

Accepted Answer

Here is the easiest way to make your header stick to the top of the page when scrolling the page.

The header component needs to be turned into a top-level container, with z-index: 1; and position: fixed;

In this way it will remain sticky at the top when you are scrolling.

Creating a fixed header

Question 4

How to add custom code to your entire project

Accepted Answer

Add interactive elements to your project: mobile menu, accordion, carousel or learn how to create scroll animations.

Add scripts in Project Settings
Example: Using custom code to create sticky navbar
Use the predefined TeleportHQ Custom Scripts

1. Add scripts in Project Settings

You can add interactive features to your static site right in the platform, without leaving it.

Embed JavaScript code

Whenever you need to add interactive elements to your website JavaScript comes in handy.

In order to embed JavaScript into your project, click on your project name to open the Project Settings view and then select the Custom Code tab.

There are 2 available sections: Head and Body in which you can embed your custom code.

The Head section can be used to inject any script or custom styling instructions which are not currently supported in the visual editor. Everything that you insert here will be injected first thing in the head tag of all the pages of your project.

Everything that you insert in the Body section, generally scripts, will be added at the end of your html structure, just before closing the body tag.

|| Please note that everything that you inject here will only be injected in the deployed/downloaded version of your project and won't have any effect in the Design canvas.

![Addi

Question 5

How to make your website responsive

Accepted Answer

How to make your website look good on every screen using relative sizing and media queries

Media queries
Relative sizing
Video: How to make your design responsive

1. Media queries

When working with more complex layouts, you need to use breakpoints. A breakpoint or a media query is a specific width number that allows you to modify the design of the elements.

Entering the Visual Editor, the default Canvas width is 1200px, the desktop view. The existing media queries that we support by default are: 991, 767 and 479px.

Style changes cascade both up and down (bidirectional cascade), so any change made on 991px will be visible on any screen with width less than 991px. Additionally, any inherited styles from a higher breakpoint can be overridden.

To start editing on a media query, click on one of the media query icons. You can also quickly cycle through media queries by dragging the canvas inside or outside or by clicking on the media query lines.

Selecting media queries

Each media query has a specific color: blue, yellow and orange that will be used to indicate style changes in both Visual and Advanced inspector.

|| When a media query is enabled all the style changes that are being submitted will be applied starting from this viewport

Question 6

How to use the editor to style any element

Accepted Answer

Style elements from the Right panel and use the design language tokens we previously set up.

Visual Inspector
Advanced Inspector
Using the Design Language
Resizing in the Canvas

In the right side of Teleport you will find the Style Inspector Panel. This will be visible only when one or more elements are selected. There are two types of Inspector, visual and advanced.

1. Visual Inspector

The Visual Inspector will help you quickly set the most common style properties on your elements. It is split into sections that are visible depending on your element's type and display property.

In the case when multiple elements are selected, only the common sections will be visible and if the values differ, then we will show mixed instead. Let's take a closer look into the most important sections.

Visual inspector in the Right panel

Layout Section

The Layout Section is visible only for elements that have flex display. From here you can change the most important flex properties that will help you to align and position the children of the flex element.

Margin & Padding Sections

You can easily set margin and padding for your elements by locking all values or binding values on the two axis.

![How to add margin and padding to element

Frequently Read Articles

Browse All Categories