Question 1

Using the Figma to Code 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 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 TeleportH

Question 2

How to make a fixed header when scrolling?

Accepted Answer

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 3

View code and export

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

Whilte 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 flavours 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, click on the Code button on the Top Bar and go to the Download tab.

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

Question 4

Styling elements

Accepted Answer

Style elements from the Style Inspector 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 presentation

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.

![Setting margins and paddings](https://sto

Question 5

Responsive design and Media Queries

Accepted Answer

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

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

1. Relative sizing

The first thing in making your layout responsive is to consider using relative sizing instead of fixed sizing. Considering you have an image whose size is set to a specific width in pixels. If the viewport is smaller than the element itself, the image won't be fully visible.

Relative sizing means setting properties for elements relative to the browser viewport or the parent element. Instead of using a pixel-based size, you might consider using different units such as %, VW or VH. VH stands for “viewport height”, which is the viewable screen's height. 100VH would represent 100% of the viewport's height, or the full height of the screen. And, of course, VW stands for “viewport width”, which is the viewable screen's width.

If you use any of these units on an image and adjust the browser width or height, you can see that it will adapt accordingly.

Setting a responsive size

When working with fonts, instead of using px, we recommend using Ems or Rems. Ems units are useful for size properties that need to scale based on the parent element's font-size, so if the parent has font-

Question 6

Custom code scripts

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.

![Adding c

Frequently Read Articles

Browse All Categories