Import Figma designs into Codelessly

Learn how to import design from Figma to Codelessly

PreviousThank you for your purchase!NextPublish your design as a website

Last updated 10 months ago

Was this helpful?

Import Figma designs into Codelessly

Learn how to import design from Figma to Codelessly

Codelessly allows you to effortlessly convert your Figma designs into interactive prototypes or live websites. By using the Codelessly plugin on Figma, you can streamline the import process and quickly bring your designs to life. Follow these steps to get started:

Install the Codelessly Plugin

Start by installing our plugin for Figma to import designs with just few clicks.

Open your Figma project.
Click on the Main Menu (Figma icon ) in the top-left corner and navigate to Plugins > Manage plugins... option. Alternatively, you can click on Resources icon () from the tools on the top-left side of the Figma editor.

In the search bar, type Codelessly.
Click on the Codelessly plugin from the search results.
Press the Run button to add the plugin to your Figma workspace.

Exporting your designs

Once the plugin is installed, it is very easy to export your designs. Follow these steps to export selected frames to Codelessly.

Select frames you want to export from Figma to Codelessly. You can select multiple frame at once too!
Right click on the selection and go to Plugins > Codelessly.
This will open Codelessly plugin's window.
Sign-in if you are not already signed in. Once signed in, it should show your selected designs like this.

Select a project from dropdown to export your design to. You can click on Create a project to create a new project instead.
Optionally, Turn on Add to existing page option to export your designs to an existing page inside the selected project. If not enabled, a new page inside the project will be created for your exported designs. If you enable this option, a page selection dropdown will appear for you to choose in which page you want to export your designs into.

Click on Export button to start exporting your designs. Wait for it to finish exporting. It might take some time depending on the size of your designs and images used in it.
That's it! Head over to your project at Codelessly to see your exported designs.

Congratulations 🎉! you've successfully exported your design from Figma to Codelessly.

PreviousThank you for your purchase!NextPublish your design as a website

Last updated 10 months ago

Was this helpful?

Install the Codelessly Plugin

Start by installing our plugin for Figma to import designs with just few clicks.

Open your Figma project.
Click on the Main Menu (Figma icon ) in the top-left corner and navigate to Plugins > Manage plugins... option. Alternatively, you can click on Resources icon () from the tools on the top-left side of the Figma editor.

In the search bar, type Codelessly.
Click on the Codelessly plugin from the search results.
Press the Run button to add the plugin to your Figma workspace.

Exporting your designs

Once the plugin is installed, it is very easy to export your designs. Follow these steps to export selected frames to Codelessly.

Select frames you want to export from Figma to Codelessly. You can select multiple frame at once too!
Right click on the selection and go to Plugins > Codelessly.
This will open Codelessly plugin's window.
Sign-in if you are not already signed in. Once signed in, it should show your selected designs like this.

Select a project from dropdown to export your design to. You can click on Create a project to create a new project instead.
Optionally, Turn on Add to existing page option to export your designs to an existing page inside the selected project. If not enabled, a new page inside the project will be created for your exported designs. If you enable this option, a page selection dropdown will appear for you to choose in which page you want to export your designs into.

Click on Export button to start exporting your designs. Wait for it to finish exporting. It might take some time depending on the size of your designs and images used in it.
That's it! Head over to your project at Codelessly to see your exported designs.

Congratulations 🎉! you've successfully exported your design from Figma to Codelessly.