# Import Figma designs into 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.

1. Open your Figma project.
2. Click on the ***Main Menu*** (Figma icon <img src="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2FBzKgXDWw7EQRu2qkOz6g%2Fimage.png?alt=media&#x26;token=0aa4c0a1-b83f-4fc1-9fd9-b8887733159d" alt="" data-size="line">) in the top-left corner and navigate to ***Plugins** > **Manage plugins...*** option. Alternatively, you can click on Resources icon (<img src="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2FnglpHHCiZGebb8Eim0iL%2Fimage.png?alt=media&#x26;token=661be824-5a8d-45ab-baa9-7c377695c9a8" alt="" data-size="line">) from the tools on the top-left side of the Figma editor.

<figure><img src="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2FlgAcHcLYtiVfs6Yt6yJv%2Fimage.png?alt=media&#x26;token=b11baa74-83a9-4b67-be76-9898d81941b0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2FgWje8E0fbLyYqvRhMkUR%2Fimage.png?alt=media&#x26;token=10a6a497-b4cb-421b-b707-cc8be81697cc" alt=""><figcaption><p>Installing Codelessly Plugin in Figma</p></figcaption></figure>

## 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.

1. Select frames you want to export from Figma to Codelessly. You can select multiple frame at once too!
2. Right click on the selection and go to ***Plugins > Codelessly***.

   <figure><img src="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2FGzSOMehuCZ28dMsN5wU2%2Fimage.png?alt=media&#x26;token=1d810aad-963e-44c1-a347-848799e38745" alt=""><figcaption><p>Running Codelessly Plugin in Figma</p></figcaption></figure>
3. This will open Codelessly plugin's window.&#x20;
4. Sign-in if you are not already signed in. Once signed in, it should show your selected designs like this.

<figure><img src="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2F7GNcAail2ywo8FCB1cMx%2Fimage.png?alt=media&#x26;token=7e8d2e83-b3e0-4c12-85a1-6f102f7f4911" alt=""><figcaption><p>Codelessly Plugin showing selected designs</p></figcaption></figure>

5. Select a project from dropdown to export your design to. You can click on `Create a project` to create a new project instead.
6. 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.

<figure><img src="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2FQa5YNUDhHbp1Ca3UqfHA%2Fimage.png?alt=media&#x26;token=5c4fb617-202d-42c7-ab33-897ed15640b8" alt=""><figcaption><p>Project and Page selection configuration in Codelessly plugin</p></figcaption></figure>

7. 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.
8. That's it! Head over to your project at Codelessly to see your exported designs.

<figure><img src="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2FVTuvTGJFnnfwvIrxJxTl%2Fimage.png?alt=media&#x26;token=4108a84f-dc41-45a8-889a-f670bd507cb1" alt=""><figcaption><p>Imported design in Codelessly Editor</p></figcaption></figure>

Congratulations 🎉! you've successfully exported your design from Figma to Codelessly.&#x20;